How can I change the html from the ajax call before adding it to the document?

I am making an ajax call to grab an HTML page from the server; the ajax call looks like this:

function loadHtml() {
    $.ajax({
          type          :  'GET',
          async         :  false,
          url           :  'my.html',
          contentType   :  'text/html',
          dataType      :  'html',
          success       :  function(data) {
              loadedHtml = data; // the loadedHtml variable is global
          }
    });
}

      

Later, I would like to display this html by modifying it a bit.


Attempt 1

I tried this, but as a result, the screen does not show anything (the body does not contain html).

var myContent = $(loadedHtml).find('#test1').text("Modified!");
$('body').html(myContent);

      


Attempt 2

I tried this as well, but as a result the screen just shows the original content loadedHtml

.

var myContent = $(loadedHtml);
myContent.find('#test1').text("Modified!");
$('body').html(myContent);

      


Original HTML

Here's the original content loadedHtml

frommy.html

<div id="test1" style="color: white;"> Working! </div>

      


What am I doing wrong?


UPDATES

  • This is a simple example I'm trying to do before I add the complexity of what I really need to do. So using a simple string replacement in a variable loadedHtml

    before inserting it into the DOM is not something that will work for me.
  • I have updated my code to show that the ajax call is synchronous. the variable loadedHtml

    actually contains the html from the server by the time I get to the point I am trying to change.
+3


source to share


3 answers


You are using the function incorrectly find

:

Given a jQuery object that represents a set of DOM elements, the .find () method allows us to search for the descendants of those elements in the DOM tree and construct a new jQuery object from the corresponding elements. The .find () and .children () methods are similar, except that the latter only moves one level down the DOM tree.

He is only looking for descendants. In your case is #test1

not a child ...



so that:

$('<div id="test1" style="color: white;"> Working! </div>').find('#test1')

      

Will not capture the test1 element, it is not a descendant.

+3


source


OK If I "read" the question + correctly, your code is outside the success function.
You guys have to remember. ajax

is asynchronous! move your code inside a success handler.

"A" in AJAX means asynchronous.

But how can the answer be used in the context of a function? Consider this erroneous example when we are trying to update some state information on a page:

function updateStatus() {
     var status;
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             status = response;
         }
     });
     // update status element?  this will not work as expected
     $('#status').html(status);
}

      



The above code does not work as expected due to the nature of asynchronous programming. The provided success handler is not called immediately, but rather sometime in the future when a response is received from the server. So when we use the "status" variable right after the $ .ajax call, its value is still undefined. The following snippet shows how we can rewrite this function to behave as we want:

function updateStatus() {
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             // update status element
             $('#status').html(response);
         }
     });
}

      

jQuery Frequently Asked Questions

+1


source


Assuming you've already managed to print loadedHtml

in the first place (and that there is nothing wrong with your AJAX call), try this ...

loadedHtml.replace("test1","modified");

      

And print it out ...; -)

0


source







All Articles