Placing different contents in different divs in a single ajax call

Question

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, ie 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

Answer 1

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>