CODEWITHSUNDEEP
javascriptjqueryajax
bildstein
bildstein

Reputation: 25

Executing script in ajax response

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.

enter image description here

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?

Upvotes: 0

Views: 3176

Answers (3)

Deepak
Deepak

Reputation: 1584

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.

Upvotes: 1

Shayan
Shayan

Reputation: 966

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>

Upvotes: 0

StudioTime
StudioTime

Reputation: 23989

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 */
});

Upvotes: 0

Related Questions