CODEWITHSUNDEEP
javascriptjqueryajaxhtml
morewry
morewry

Reputation: 4450

Executing javascript mixed with HTML from a jQuery ajax response

Or, not precisely "executing," but updating a function that exists before the response with a function returned in the response.

Step 1

  1. I have an HTML5 page that describes a location.
  2. On the server side this page includes a ColdFusion file "MapFunction.cfm." (Which is used for consistent mapping all over the site at large.)
  3. MapFunction.cfm outputs a javascript function "loadMap" mixed with the HTML.
  4. loadMap() contains all the javascript needed to place a Bing map of the location on the page.
  5. Some javascript in a separate js file actually calls loadMap().

This works when the page is first loaded.

Step 2

  1. Search & results stuff is all fine too. Nothing needs to be done with the map here.

Step 3

  1. When a search result is clicked, the result detail is loaded asynchronously via a jQuery $.get() request.
  2. It returns mixed HTML and javascript which I use jQuery to traverse through.
  3. With the jQuery objects I update specific areas of the page to show different details.

One of the areas I need to update is the map. That part isn't working.

What I'm working with is mixed HTML and Javascript that is identical in both Step 1 and Step 3:

<section id="mod-map" class="module mod-map">
    <header class="mod-head">
        <a href="#map" class="mod-head-link"> Map <span class="arrow"></span> </a>
    </header>
    <div id="map" class="mod-body">
        <div id="cmMap" style="position:relative;width:369px;height:303px;"></div>
        <script type="text/javascript" id="cfLoadMap">
            // ...some global variables are defined to use...
            function loadMap()
            {                   
                // ...Bing/Virtual Earth Map Stuff...
                // This part here is unique to each location's detail
                var propertypoint = new VELatLong(parseFloat(36.707756),parseFloat(-78.74204));
                // ...More Bing/Virtual Earth Map Stuff...
                // This part here is unique to each location's detail
                var label = "<div class=\"wrapper\"><img onerror=\"replaceImage(this);\" src=\"noimage.jpg\" width=\"100\" class=\"thumb\" alt=\"\" /><div class=\"caption\"><br />City<br /> State, 12345</div></div>";    
                // ...More Bing/Virtual Earth Map Stuff...              
            }
        </script>
    </div>
</section>

Now, in Step 3 loadMap() does get called again, but it just refreshes the map to the same location. The loadMap() function as the browser knows it doesn't get updated with the one retrieved via ajax.

That updated block of mixed HTML & javascript above does get successfully added to the page after each ajax call. It is placed right where it originally is, but with different coordinates and captions where indicated by the comments above. The ajax callback looks like (slightly simplified):

$.get(urlToLoad, {}, function(data, status, request){   
    var newData = $(innerShiv(data, false)),
        newModules = newData.find(".module");
    // (innerShiv is used to make HTML5 tags work in IE. It's possible I'm going a little overboard with using it, but I had a lot of issues with IE. :-))
    newModules.each(function(i){
        var thisId = "#" + $(this).attr("id"),
            thisBody = $(this).find(".mod-body").html(),
            toReplaceAll = $("body").find(thisId),
            toReplaceBody = toReplaceAll.find(".mod-body");
        // These variables are used to choose add content in different ways based on thisID. Below is the one the map area is subject to.
        toReplaceBody.html(innerShiv(thisBody));                
    }); // each
    // Various things including loadMap() get called/re-initiated/etc. here
}, "html"); // get

This works in Firefox 3.6, but nowhere else I've tested (Opera 11, IE 7, Chrome 8).

I have done this before in a similar situation with dynamically PHP generated javascript written to a separate js file--$.getScript works great there. But this is mixed into the HTML of the ajax response.

I've been looking and have found and tried the following (among other things):

Attempted Solutions

1. var myScript = new Function($('script#cfLoadMap', data).text()); myScript();
2. eval(newData.text());
3. eval(newData.find("#cfLoadMap").text());
4. $("head").append(newData.find("#cfLoadMap"));

None of these so far seem to be doing any good.

I know there are a few other ways this could theoretically be done. But as it stands at the moment, I do not have any ability to change much of anything but what I do with the mixed HTML & javascript response. I need a solution where,

Very similar questions have been asked & resolved before, so I hope this can be done. However, none of the solutions I've found are working for me. Might be making a mistake or missing something, or maybe it's just different when it's a function?

Any help would be appreciated.

Answer

It suddenly started working with the following code:

$.get(urlToLoad, {}, function(data, status, request){   
    var safeData = $(innerShiv(data, false)),
        newModules = safeData.find(".module"),
        newScript = safeData.find("script#cfLoadMap");
    // Update Each module
    newModules.each(function(i){
        var jqoThis = $(this),
            thisId = "#" + jqoThis.attr("id"),
            newModule = jqoThis,
            newModBody = jqoThis.find(".mod-body"),
            curModule = $("body").find(thisId),
            curModBody = curModule.find(".mod-body");
        // Varies by id, this one is used by the map area.
        curModBody.html(innerShiv(newModBody.html()));      
    }); // each
    // Make sure plugins are bound to new content
    $("body").oneTime(100, function(){
        // Various things get initiated here
        // Maps -- this one works: Chrome, Firefox, IE7, Opera
        $("head").append(newScript);
        // Maps -- these did not work
        /* 
            // Firefox only (but Firefox always works)
            runScript = new Function(newScript.text());
            runScript();
        */
        /*
            // Firefox only (but Firefox always works)
            eval(newScript.text());
        */
    }); // oneTime
}, "html"); // get

One thing I did notice for sure was that without innerShiv, in all my browsers, $(data).find("script#cfLoadMap").text() was blank -- which I did not expect.

Upvotes: 0

Views: 3502

Answers (2)

morewry
morewry

Reputation: 4450

It suddenly started working with the following code:

$.get(urlToLoad, {}, function(data, status, request){   
    var safeData = $(innerShiv(data, false)),
        newModules = safeData.find(".module"),
        newScript = safeData.find("script#cfLoadMap");
    // Update Each module
    newModules.each(function(i){
        var jqoThis = $(this),
            thisId = "#" + jqoThis.attr("id"),
            newModule = jqoThis,
            newModBody = jqoThis.find(".mod-body"),
            curModule = $("body").find(thisId),
            curModBody = curModule.find(".mod-body");
        // Varies by id, this one is used by the map area.
        curModBody.html(innerShiv(newModBody.html()));      
    }); // each
    // Make sure plugins are bound to new content
    $("body").oneTime(100, function(){
        // Various things get initiated here
        // Maps -- this one works: Chrome, Firefox, IE7, Opera
        $("head").append(newScript);
        // Maps -- these did not work
        /* 
            // Firefox only (but Firefox always works)
            runScript = new Function(newScript.text());
            runScript();
        */
        /*
            // Firefox only (but Firefox always works)
            eval(newScript.text());
        */
    }); // oneTime
}, "html"); // get

One thing I did notice for sure was that without innerShiv, in all my browsers, $(data).find("script#cfLoadMap").text() was blank -- which I did not expect.

However, I don't really see how this is different from what I had tried before and which failed. If someone spots a substantive difference, please let me know, for future reference?

(Note: it doesn't seem to make a difference that the Map bit is placed in the timeout, it works as well above it.)

Upvotes: 0

Brian Donovan
Brian Donovan

Reputation: 8390

Most likely it's that functions in JavaScript can be declared in non-global scope, so when you're inserting the <script> tag, jQuery is evaling it, but not replacing the original function (as you noticed).

A fix for this would be to change how you declare the function from this:

function loadMap()
{
  ...
}

to this:

window.loadMap = function loadMap() {
  ...
}

That way the top-level loadMap will always be the latest one that came down from the server.

You may want to consider not modifying the client code this way as it can make debugging trickier, but that's totally up to you. Hopefully this answer works for you either way.

Upvotes: 1

Related Questions