0

I have a project in which I have this ajax call. it works correctly.

$.get(
    'accNoRealMovs1.jsp',
    {mode:"0"},         
    function(responseText){
        $('#divAccMovementNR').html(responseText);
    },'html'
 ); 



<div id="divAccMovementNR"></div>
<div id="divAccMovementNR2"></div>

My accNoRealMovs1.jsp is

<% jsp scriplet getting "mode" parameter and other instructions%>
..
<script>
$(document).ready(function() {
alert('hello');
var t1 = $('#table1').DataTable(); //Convert table1 into Datatable Jquery (plugin)
var t2 = $('#table2').DataTable(); //Convert table2 into Datatable Jquery (plugin)
})
</script>
<div id="divAccMovementNR"><table id="table1">...</table></div>
<div id="divAccMovementNR2"><table id="table2">...</table></div>

In the example above, the javascript code is executed, i.e. the alert appears and tables are converted in Datatables. But both datatables are placed in the same div "divAccMovementNR".

However I would like to return both datatables in two different div's by using only one ajax call, for this reason I had to specify each div content. I follow these threads:

jQuery .load() / .ajax() not executing javascript in returned HTML after appended

How to include multiple rendered JSP into response to AJAX?

And it is my code:

$.get(
    'accNoRealMovs1.jsp',
    {mode:"0"},         
    function(responseText){

    // I try with only one div, but it doesnt work.
    $responseText = $(responseText);                    
    $('#divAccMovementNR').html($('#divAccMovementNR' , $responseText).html());
    $responseText.find('script').appendTo('#divAccMovementNR');

    //$('#divAccMovementNR2').html($('#divAccMovementNR2' , $responseText).html());
    //$responseText.find('script').appendTo('#divAccMovementNR2');

    },'html'
);

However, using the code above, the alert doest not appear and tables appear but are not converted in datatable.

Other detail, I am using many jquery ajax "post" calls, however in the examples that I found, people use the "get" call. I would like to keep using "post". But any way.. I dont have any problem by using "get" calls.

Do you have any idea? Thanks

Community
  • 1
  • 1
Lev
  • 693
  • 1
  • 8
  • 24
  • $('#divAccMovementNR').html($('#divAccMovementNR' , $responseText).html()); i think problem is in this statement. try using $('#divAccMovementNR').html($responseText).html()); and try $responseText = responseText; instead of $responseText = $(responseText); – 3bu1 Feb 14 '17 at 10:13
  • It executes the JavaScript code, but both content are loaded in the same div "divAccMovementNR". I think I have to specify each div in the function. – Lev Feb 14 '17 at 17:42
  • you want accNoRealMovs1.jsp#divAccMovementNR to be placed in
    is it?     – 3bu1 Feb 15 '17 at 04:33
  • Many thanks for your help. Yes, it is half of my need. What I want is to place accNoRealMovs1.jsp#divAccMovementNR into
    , and also accNoRealMovs1.jsp#divAccMovementNR2 (what is commented in my code) into
    . Both in a single Ajax call and executing the JavaScript code that exists in accNoRealMovs1.jsp.     – Lev Feb 15 '17 at 15:22

1 Answers1

0

there are many ways to do it. one is below.Due to code limitation, I haven't checked output but the logic should work. let me know the output if it has any errors.

$.get(
        'accNoRealMovs1.jsp',
        {mode:"0"},         
        function(responseText){

        // copy html in to tmpValue and then segregate to respective divs.
          $("body").append("<div id='tempValue'>"+responseText+"</div>").done(function(){

//1st div
$("#divAccMovementNRNew").html($("#tempValue").find("#divAccMovementNR").html());
$("#tempValue #divAccMovementNR").remove();

// 2nd div
$("#divAccMovementNR2New").html($("#tempValue").find("#divAccMovementNR2").html());
$("#tempValue #divAccMovementNR2").remove();



});  

});

<div id="divAccMovementNRNew"></div>
<div id="divAccMovementNR2New"></div>
3bu1
  • 977
  • 12
  • 30