Why isn't string getting passed into function - jQuery

Question

First, I grab HTML using jQuery's $.ajax function.

In the success function I alert it (this works correctly and shows an HTML string as expected);

Then I pass it in as a variable to another function, processHTML. But it's not working and says the variable is null. I confirm this with an alert.

var my = my || {};

jQuery(function ($) {
  my.html = {
    getHTML: function(url) {
      $.ajax({
        url: url,
        dataType: "html",
        success: function( myHTML ) {
          alert(myHTML); // shows string, as expected
          my.html.processHTML(myHTML); //returns null
        }
       });
    },

    processHTML: function ( myHTML ) {
      alert(myHTML);
      // do stuff and return myHTML
    }

  } // end of my.html object
}); // end of jQuery wrapper function

Why isn't the string getting passed from the success callback into the processHTML function? If I replace myHTML in the success callback with an actual string (<div>test</div>), that gets successfully passed into the function.

Update: Here's the actual code, as requested. It is invoked by clicking a link with onclick="hey.mydoc.ajax2({source: 'http://www.mysite.com/mypage'})". This is also on JSFiddle but I get ReferenceError: Can't find variable: hey when clicking the link, which doesn't happen on my site.

var hey = hey || {};

jQuery(function ($) {

hey.mydoc = {

        //////////////////////////////////////////////////////
        //////////////////////////////////////////////////////
        //////////////////////////////////////////////////////
        getHTML: function ( source ) {

                  $.ajax({
                      url: source,
                      dataType: "html",
                      beforeSend: function(){ 
                        },
                      success: function( myHTML ) {
                        alert('myHTML is '+myHTML );
                        hey.mydoc.processHTML( myHTML );
                      } // end of success function
                  });
        }, // end of method


        //////////////////////////////////////////////////////
        //////////////////////////////////////////////////////
        processHTML: function ( myHTML ) {

        alert ('processHTML - ' + myHTML );
             myHTML = $(myHTML);
            myHTML.find('script').remove();
            // and a bunch of other DOM manipulations...

           var content = "<!DOCTYPE html><html>" +  myHTML.html() + "</html>";
           return content;
        }, // end of method


    //////////////////////////////////////////////////////
    //////////////////////////////////////////////////////
    ajax2: function ( options ){


        $.ajax({
                  url: options.content,
                  dataType: "html",
                  success: function( myHTML ) {
                    alert('myHTML is '+myHTML ); // myHTML is string of html, as expected
                    var newHTML = hey.mydoc.processHTML( myHTML );  // myHTML not getting passed in
                    alert(newHTML);

                  } // end of success function
              });
        } // end of method
   } // end of hey.mydoc namespace


}); //end of jQuery wrapper

Please post the actual code that is giving you trouble. This looks like a trimmed down example to me. — , Jan 31 '12 at 20:34
Is this your actual code? `var getHTML: function(url)` will fail right away with `Unexpected token :` error. — ShankarSangoli, Jan 31 '12 at 20:34
Is this your exact javascript code or parts you copy-pasted here ? Syntax seems odd as it is using `:` and `=` to define the functions. Do you get any error messages in the console ? — Didier Ghys, Jan 31 '12 at 20:35
Change the order. Move the var processHTML above the ajax call. — j08691, Jan 31 '12 at 20:39
@j08691: That shouldn't make any difference. The AJAX call is asynchronous, so the `processHTML` assignment will happen before the callback happens. — , Jan 31 '12 at 20:41
@j08691: Do you have a jsFiddle of that test? In a single threaded environment, the asynchronous code must allow the rest of the synchronous code to finish before it executes. — , Jan 31 '12 at 20:45
@supertrue: What does `alert(myHTML)` inside `processHTML` method alert? — ShankarSangoli, Jan 31 '12 at 20:54
@supertrue: You still haven't shown anything that would demonstrate an issue, and it's still an incomplete example. For example we don't see where `getHTML` is being called. Please post your actual code. — , Jan 31 '12 at 21:03
@supertrue: Your `hey` won't be seen by the `onclick` because you've chosen `onLoad` from the left menu. Change it to `no wrap (body)`. Aside from that, there's no issue to be seen here, — , Jan 31 '12 at 21:49

score 0 · Answer 1 · answered Jan 31 '12 at 20:35

0

try it like this:

function processHTML(myHTML) {
    alert(myHTML);
    // do stuff and return myHTML
}

answered Jan 31 '12 at 20:35

kleinohad

5,325
1
23
32

The incorrect/inconsistent function definitions were typos from condensing the code. I've now posted the full code and jsfiddle above, if you have any ideas. – supertrue Jan 31 '12 at 21:41

score 0 · Answer 2 · answered Jan 31 '12 at 20:36

0

I'm not sure but I think a friend of mine had the same problem last weekend.

I tolled him he'd better use deferreds http://api.jquery.com/category/deferred-object/

$.ajax({ object literal except success attribute }).success(function() {..

answered Jan 31 '12 at 20:36

Jonas Geiregat

4,359
3
36
56

score 0 · Answer 3 · answered Jan 31 '12 at 20:39

Don't need to pass the parameter.

$.ajax({
        url: "/something/some.do",
        type: "POST",
        dataType: "html",
        data: soapEnv,
        complete: completeCallback,
        contentType: "text/html; charset=\"utf-8\""
    });
}

function completeCallback(myHTML) {
    alert(myHTML)
}

score -1 · Answer 4 · answered Jan 31 '12 at 20:34

-1

Try this - remove the '=' (equal sign) after processHTML and put a colon.

answered Jan 31 '12 at 20:34

PhillipKregg

9,248
8
44
62

That isn't correct. Variable assignment requires `=`, not `:`. – Jan 31 '12 at 20:35
The variable getHTML is being assigned with a colon. – PhillipKregg Jan 31 '12 at 20:38
Just for `:` reference: http://stackoverflow.com/questions/418799/what-does-do-in-javascript – summea Jan 31 '12 at 20:39
@PhillipKregg: I know, and that's incorrect. Though it's probably just a typo in the question since OP stated that replacing `processHTML(myHTML)` with `processHTML('
test
')` works, so we know it isn't a *SyntaxError* – Jan 31 '12 at 20:40
Ok, my bad - I saw the difference in syntax and responded before the OP posted that the
test
worked. Thanks for the link. – PhillipKregg Jan 31 '12 at 20:46
I updated the code to show that it's in an namespacey sort of object. Those were just typos made in trimming down the example code. – supertrue Jan 31 '12 at 20:48
@PhillipKregg: I just updated to show the actual code and a jsfiddle. Any ideas? – supertrue Jan 31 '12 at 21:39

Why isn't string getting passed into function - jQuery

4 Answers4