Executing script in ajax response

Question

I load some HTML code into a div with the $.ajax function. but the script that I have in <body> doesn't execute, can you help me please, it's very important for me.

This is my HTML main page:

<!DOCTYPE html>
<html>
<head>
<title>Navigation AJAX avec jQuery</title>

<script type="text/javascript" src="js/jquery.js"></script>
  
<script type="text/javascript">
$(document).ready(function() {
	var $contenu_div = $('#content div');
	
	
	$('#nav li a').on('click', function() {
		var url = $(this).attr('href'); 

			$.ajax({
				url: url,
				cache: false,
				success: function(html) {
					$contenu_div.hide().html(html).fadeIn();
				}
			});
				
		return false;
	});
});
</script>
  
</head>
<body>

	<h2>Navigation AJAX with jQuery</h2>

	<div id="menu">
		<ul id="nav">
			<li><a href="pages/page1.html">page 1</a></li>
			<li><a href="pages/page2.html">page 2</a></li>
			<li><a href="pages/page3.html">page 3</a></li>
			<li><a href="pages/page4.html">page 4</a></li>
		</ul>
	</div>

	<div id="content">
		<div>the content of the first page</div>
	</div>
  
  <script src="problem.js"></script>

</body>
</html>

I have simplified the code

The ajax navigation work perfectly but the <script src="problem.js"></script> doesn't execute, what is the problem?

your codes look fine, it maybe your ajax request not get "success" status. do you check your ajax response status??? — Shayan
– Shayan, Commented Apr 9, 2016 at 17:34
yes, the ajax request work perfectly, but the script doen't execute, it execute only when I refresh the page ( so without ajax ), and sorry for my bad english — bildstein
– bildstein, Commented Apr 9, 2016 at 17:36
ok you say, you get status 200 on ajax request,and do you check your console when ajax done?is it show any error?? maybe Cross-Origin Request Blocked is the problem that your code not execute — Shayan
– Shayan, Commented Apr 9, 2016 at 17:42

Deepak · Accepted Answer · 2016-04-18 07:31:04Z

1

You can directly put this ajax function into document.ready function Like

$(document).ready(function(){
var url = $(this).attr('href'), $contenu_div = $('#content div');
        $.ajax({
            url: url,
            cache: false,
            success: function(html) {
                $contenu_div.html(html);
            }
        });
  });

It will hit the server after loading complete DOM and will pull data from server.

answered Apr 18, 2016 at 7:31

Deepak

1,6021 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StudioTime · Accepted Answer · 2016-04-09 17:25:32Z

0

Try like this:

I've commented to show you what's going on...

var $contenu_div = $('#content div');
$('#nav li a').on('click', function() { /* click captured */
    var url = $(this).attr('href'); /* set the URL we want to load */
    $contenu_div.hide().load(url, function(){ /* hide element first, then load it */
      $(this).fadeIn() /* this is the callback which will fadeIn() when content loaded */
    });
    return false; /* stop the click */
});

answered Apr 9, 2016 at 17:25

StudioTime

24.3k40 gold badges129 silver badges217 bronze badges

4 Comments

bildstein Over a year ago

the script doesn't execute

StudioTime Over a year ago

What do you mean doesn't execute? Do you see any errors? - you mean problem.js doesn't work?

bildstein Over a year ago

No there is no errors, but i doesn't get any result that mean that the script don't work, soory for my english

StudioTime Over a year ago

What does your network tab show? Does it show the page loading? Is there a response?

Shayan · Accepted Answer · 2016-04-09 18:00:12Z

i wrote a sample for you, for create full ajax page and work fine for me, but i suggest you to use one of the spa framework like angular,ember. these framework are so usefull

main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
    <h2>Navigation AJAX with jQuery</h2>
    <div id="menu">
        <ul id="nav">
            <li><a href="page.html">page 1</a></li>
            <li><a href="page.html">page 2</a></li>
            <li><a href="page.html">page 3</a></li>
            <li><a href="page.html">page 4</a></li>
        </ul>
    </div>

    <button id="click-me">First Click on page 1, then click me</button>
    <div id="content">
        <div>the content of the first page</div>
    </div>

<script type="text/javascript" src="jquery.1.11.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var $contenu_div = $('#content div');
    $('#nav li a').on('click', function() {
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            cache: false,
            success: function(html) {
                $contenu_div.hide().html(html).fadeIn();
            }
        });                
        return false;
    });
    $("#content").on("click", "#click",function(){
        alert("button click");
    })
});
</script>
</body>
</html>

page.html

<h2>page 2</h2>
<button id="click">Click me</button>

<script type="text/javascript">
    $(document).ready(function() {
        // console.log("page 2 is loaded");
        // your code should be here
        $("#click-me").on("click",function(){
            alert("button clicked on main page");
        })
    });
</script>

Collectives™ on Stack Overflow

Executing script in ajax response

3 Answers 3

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Related