Question 291168 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to modify data from $.ajax call?

I have two .html, content.html and footer.html.

content.html

<div>
   <div class="footer-content"></div>
</div>

footer.html

<div>copyright</div>

i made a ajax call for content.html, then i want to append the footer.html to the data(content), before showing it.

i have tried this.

$.ajax({
  url: "filecheck.php", // Your server-side script
  data: { file: filePath }, // Pass the file path to the server-side script
  dataType: "html",
  async: false,
  success: function (data) {
    if (data === "error") {
      // If the server returns an error, redirect to 404
      window.location.href = "pages/404.html";
      return false;
    } else {
      // If the file exists, load the content
      console.log(data);
      if ($(data).find(".footer-content").length > 0) {
        // Load footer using AJAX
        console.log("put foote");
        $.ajax({
          url: "elements/footer.html",
          success: function (footer) {
            console.log("ok foot!");
            $(data).find(".footer-content").append(footer);
            //$(data)$('.footer-content', data).html(footer);
          },
        });
      }

      $("#content").html(data);
    }
  },
});

this code doesnt seem to work:

$(data).find('.footer-content').append(footer);

footer data wasn’t added to .footer-content

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is the updated code that works.

        $.ajax({
            url: 'filecheck.php', // Your server-side script
            data: { file: filePath }, // Pass the file path to the server-side script
            dataType: 'html',
            async: false,
            success: function(data) {

                if (data === 'error') {
                    // If the server returns an error, redirect to 404
                    window.location.href = 'pages/404.html';
                    return false;
                } else {
                    // If the file exists, load the content
                    $('html').removeClass('lock');

                    if ($(data).find('.footer-content').length > 0) {
                        $("#content")
                          .html(data)
                          .find(".footer-content")
                          .load("elements/footer.html");
                    }else {
                            $('#content').html(data);
                    }
                    
                }
            }
    });

  2. 0

    This is an issue of timing.

    The second $.ajax() success callback completes after $("#content").html(data) is executed. jQuery’s .html() method sets string data via .innerHTML and won’t keep a reference to the $(data) document fragment; adding elements to data later will have no effect on the DOM.

    The solution is to set your HTML data then find the relevant element within #content. If it exists, you can load extra HTML into it.

    $("#content")
  .html(data)
  .find(".footer-content")
  .load("elements/footer.html");

    The .load() method will only run if the selector finds an element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search