0

I was trying to make an ajax call and show an html part inside a div class. For that i used the following way.

$.ajax({
    type: "get",
    url: "{{url('searchByCheckbox')}}",
    dataType: 'html',
      success: function(html)
        {
           $(".infinite-scroll").html(html)
        }   
});

But the problem is there is a script inside that html part which i wanted to load when i make first ajax call it's not loaded but for the second one it's loaded the script. suppose the html response like this :

<script>
  alert()
</script>
// html

How do i make it work? I put the script above the html page which i'm getting as response.

(those who are marking the Question as duplicate should read at least what i want and what they wanted )

User57
  • 2,453
  • 14
  • 36
  • 72
  • Did you try `$(".infinite-scroll").text(html)` ? – ricky Oct 18 '17 at 10:03
  • 1
    @ricky, that will display the HTML as plain text. – Mouser Oct 18 '17 at 10:04
  • Do you get your HTML request? As far as I understand you get response but `script` inside you response HTML doesn't work, am I right? – Krusader Oct 18 '17 at 10:05
  • @OP What you observe is default behavior; if you want to run code loaded via AJAX, you have to call it yourself. A better solution is to restructure your website so all code is in the main document. –  Oct 18 '17 at 10:05
  • 4
    Possible duplicate of [How do you execute a dynamically loaded JavaScript block?](https://stackoverflow.com/questions/75943/how-do-you-execute-a-dynamically-loaded-javascript-block) – RAUSHAN KUMAR Oct 18 '17 at 10:06
  • @ricky that'll show the html as text inside that div – User57 Oct 18 '17 at 10:07
  • Possible duplicate of [Calling a JavaScript function returned from an Ajax response](https://stackoverflow.com/questions/510779/calling-a-javascript-function-returned-from-an-ajax-response) – linktoahref Oct 18 '17 at 10:09
  • What is the ajax result can you share with us? – Ferhat BAŞ Oct 18 '17 at 10:12
  • ajax result would be a foreach loop inside a div – User57 Oct 18 '17 at 10:43

1 Answers1

0

Im sure that the error is happening because of the script, because you are closing the </script> tag inside the html.

The best solution is to return the data from your ajax call as a json

To do that you should:

1- add a dataType to your ajax parameter as the below:

$.ajax({
    type: "get",
    dataType: "json",

2- In the php file handling the ajax call, you must resurn the values as a json as below:

Assume that currently you are doing the following:

echo $html

You should change it to match the below:

$retArr = array(
    "html"     => $html, //Your html code without the javascript function
    "jsFunc"   => $jsFunc //Your java script function parameters
) ;
echo json_encode($retArr) ;

And then your ajax success must be as the below:

success: function(data)
    { //You can access all the object parametes by calling the object name `data` followed by a dot `.` and then by the parameter key
       data.jsFunc // Your javascript function params
       $(".infinite-scroll").html(data.html) ;
    }
Mario Rawady
  • 871
  • 7
  • 17