jQuery load url into div and replace current content pass url to function

Question

I'm trying to call a function called loadPage on click of an a tag and pass it a URL to replace the current content in a div called main via Ajax.

However, my code isn't replacing the content already in the main div or even making the Ajax call as far as I can see and I can't see where it's going wrong.

JavaScript:

$(document).ready(function () {
    function loadPage(urlToLoad) {
        $.ajax({
            type: "POST",
            alert(urlToLoad);
            url: urlToLoad,
            data: dataString,
            success: function (returnedData) {
                $('#main').html(returnedData);
            }
        });
    }
});

HTML:

<nav>
    <ul>
        <li><a onclick="loadPage('load.php');" href="javascript:void(0)" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a>
        </li>
    </ul>
</nav>
<div id="main">
    <section id="mainContent">abc</section>
</div>

Please have a look at this article to learn how to debug JavaScript code. — Felix Kling
– Felix Kling, Commented Mar 25, 2013 at 10:35
1) you have 'alert' in ajax-request parametrs - it's error 2)your function wrapped via anonimous function, so it out of global scope — br3t
– br3t, Commented Mar 25, 2013 at 10:40
If you are getting errors inside of the console (if you are using chrome, you can see them by pushing f12), then can you please paste the exact text so that we can provide more accurate answers. — Travis J
– Travis J, Commented Mar 25, 2013 at 10:43

palaѕн · Accepted Answer · 2013-03-25 10:41:54Z

3

You can simply do this using load:

function loadPage(urlToLoad) {
    $('#main').load(urlToLoad, function () {
        alert('Load was performed.');
    });
}

answered Mar 25, 2013 at 10:41

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Comments

bipen · Accepted Answer · 2013-03-25 10:33:22Z

1

why do you have alert inside ajax options.. this is throwing the error.. removing that and it should work..

//$(document).ready(function() { <--here
    function loadPage(urlToLoad) {
     alert(urlToLoad); // you can check that here...
      $.ajax({
            type: "POST",
           // alert(urlToLoad); <--here
            url: urlToLoad,
            data: dataString,
            success: function( returnedData ) {
             alert("success") //to check if ajax call is successfull
            $('#main').html( returnedData );
          }
        });

and no need to create a function inside document.ready()... keep it outside the ready function

answered Mar 25, 2013 at 10:33

bipen

36.6k9 gold badges51 silver badges62 bronze badges

3 Comments

Ben Paton Over a year ago

Even when I move it outside the document.deady() and remove the alert it still doesn't work.

bipen Over a year ago

is that function called ?? if you alert something inside the function??

Felix Kling Over a year ago

@Ben: We can only work with what you give us. We don't have psychic powers to remotely debug your code. I recommend to read the article I linked to and do some debugging on your own. Sorry if I sound harsh but "it does not work" is really not much to work with. The JavaScript code as it is looks "ok". We don't know if there is any other code that could cause problems or if your PHP script is correct. These are all things you have to check yourself.

Stefan Candan · Accepted Answer · 2013-03-25 10:38:09Z

You could do it in another way, by adding a custom "data-" attribute to your anchor tags, and using jquery to handle the click event.

$(document).ready(function()
{
   $('a.nav').on("click", function(event){
      event.preventDefault();
      $.ajax({
            type: "POST",
            url: $(this).attr('data-page'),
            data: dataString,
            success: function( returnedData ) {
            $('#main').html( returnedData );
          }
      });
   });
});


<nav>
    <ul>         
        <li><a data-page="load.php" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a></li>
    </ul>
</nav>

 <div id="main">
    <section id="mainContent">
        abc
    </section>
 </div>

Travis J · Accepted Answer · 2013-03-25 10:41:41Z

0

Your function loadPage is scoped to the closure used for jQuery's document.ready. Later when the function loadPage is called, the call comes from the global scope. As a result, the function will not be accessible. Take your function out of $(document).ready(function(){});

Also note that when attempting to debug using alert (not really recommended, at the very least you should use console.log), that you need to put the alert on its own line of code, and not just in the middle of code like a breakpoint. Your alert should come before the ajax call.

function loadPage(urlToLoad) {
 alert(urlToLoad);
 $.ajax({/*...*/});
}

edited Mar 25, 2013 at 10:41

answered Mar 25, 2013 at 10:33

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

1 Comment

Ben Paton Over a year ago

I moved it out of the document.deady() and it still doesn't work

Jai · Accepted Answer · 2013-03-25 10:42:54Z

Moveout the function from the doc ready handler:

function loadPage(urlToLoad) {
    $.ajax({
        type: "POST",
        url: urlToLoad,
        data: dataString,
        success: function (returnedData) {
            $('#main').html(returnedData);
        }
    });
}

$(document).ready(function () {
   $('nav a.nav').click(function(e){
      e.preventDefault();
      loadPage(this.href);
   });
});

try with this html:

 <nav>
   <ul>
     <li>
       <a href="load.php" class="nav">
          <img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news
       </a>
     </li>
   </ul>
 </nav>

You should not alert in the ajax function properties, so remove the alert from there. It seems that you want it to be work on click of a certain link. So you can try this.

Collectives™ on Stack Overflow

jQuery load url into div and replace current content pass url to function

5 Answers 5

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related