CODEWITHSUNDEEP
javascriptphpjqueryajaxfopen
jeanhules
jeanhules

Reputation: 235

Ajax: Posting dynamic ajaxed content

I am trying to write the content of a div to a new html file. The content of the div is being generated by ajax itself, so when I try to post the contents to a new file, all that is being written to the file is the raw html. Is there a way to write the div contents of the 'ajaxed in' content?

This is my ajax code:

$("#getSource").on('click', function(){

  headerURL = $(".header-code").attr('data-url');
  $.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);
    }
  });

  var bufferId =$("#mainCode").html();
  $.ajax({
     type : "POST",
     url : "postCode.php",
     data: {id : bufferId},
     dataType: "html",
     success: function(data){ 
       alert("ok");  
     }
  });
});

my php code:

$handle = fopen("test.html", 'w+');
$data = $_POST['id'];
if($handle) {
    if(!fwrite($handle, $data )) {
        echo "ok";
    }
}

the end result of whats being written in test.html:

<div id="mainCode"></div>

when I really need:

<div id="mainCode">
  [dynamic content that is added by the user via ajax]
</div>

Upvotes: 0

Views: 107

Answers (2)

UpVs
UpVs

Reputation: 1958

You also can use a deffered object returned by $.ajax to run second ajax request after the first one:

headerURL = $(".header-code").attr('data-url');
$.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);
    }
}).done(
  function() {
    var bufferId =$("#mainCode").html();
    $.ajax({
       type : "POST",
       url : "postCode.php",
       data: {id : bufferId},
       dataType: "html",
       success: function(data){ 
         alert("ok");  
       }
    }); 
  }
)

Upvotes: 1

Rimas
Rimas

Reputation: 6024

Issue second AJAX call after first call appends content. Change JavaScritp code to:

$("#getSource").on('click', function(){

  headerURL = $(".header-code").attr('data-url');
  $.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);

      // second ajax call
      var bufferId =$("#mainCode").html();
      $.ajax({
         type : "POST",
         url : "postCode.php",
         data: {id : bufferId},
         dataType: "html",
         success: function(data){ 
           alert("ok");  
         }
      });
    }
  });
});

Upvotes: 1

Related Questions