PHP & JS - append html and scripts on page
Question
I'm using an ajax call to append a MVC partial view with some styles sheets and script files to my php page.
However it is not appending de <script> tags. I already checked my HTTP request on the network and it really brings those tags.
My code:
$.ajax({
type: 'POST',
url: 'http://localhost:63322/MyController/MyAction', //external url project
data: JSON.stringify(parameters),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
crossDomain: true,
processdata: true,
headers: {
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Headers": "*"
},
success: function(result){
$(".pageContainer").html(result);
},
error: function(er){ alert('Error'); }
});
On ajax success function I already tried:
- to use
$(".pageContainer").empty().append(result) - to separate the script tags and add to
<head>like this:
var elems = $(result); var scripts = $.grep(elems, function(e){ try{ return e.tagName.toLowerCase() == "script"; }catch(er){ return false; } }); var remainElems = $.grep(elems, function(e){ try{ return e.tagName.toLowerCase() != "script"; }catch(er){ return false; } }); $.each(scripts, function(){ $('head')[0].appendChild(this); }); $(".pageContainer").append(remainElems);
to give some time before appending with
setTimeout(function(){ $(".pageContainer").html(result); }, 1000);to change
<script>tags to<link type="text/javascript" src="http://someurl.com" rel="tag"/>and it was appended but the code wasn't executed
But nothing works.
What is wrong? What I'm missing?
My PHP page uses jquery-1.8.3 and jquery-ui-1.9.2.custom. This is the problem?
NOTE:
My question is very different from that on: Executing inside retrieved by AJAX
If you read both you will see they are very different. I already readed what and noticed that.
2 answers
solution1
0 ACCPTED 2018-02-16 14:21:47
Solved. I don't know why but seems jquery-1.8.3 don't performs the insertion of the <script> tags to the html code dynamically.
I changed
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
to
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
and now it works.
solution2
-1 2018-02-16 14:32:58
I found the problem: that old version of jQuery stumbles over the </script> in the html it's supposed to append. If you mask the slash however, it works:
<\/script>
DEMO:
var result = '<p>Hello</p><script>function test() { return "hello!";} <\\/script>'; $(".pageContainer").html(result); console.log(test());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="pageContainer"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.