0

How to call a jQuery function on another jQuery function?

I am trying to refresh the contents of a div using the jQuery setInterval and load functions. So far, everything is working fine, except it loads the full div, including the div tags. I only want the contents of the div to be reloaded/refreshed. I tried adding the jQuery function text(), but it isn't working, or maybe I am writing up the wrong syntax.

$('#numberOfTries').load('index.php #numberOfTries').text(); does not work.

This is what I have so far, which works but loads the entire div with the div tags:

HTML of Index.php (Top)

<div id="numberOfTries"><?php echo $numberOfTries; ?></div>

JS of Index.php (Bottom)

<script src="assets/js/jquery.min.js"></script> 
<script>
$(document).ready(function() {
    setInterval(function() {
        $('#numberOfTries').load('index.php #numberOfTries');
    }, 1000);
});
</script>

The script loads the full div, which is <div id="numberOfTries">50</div>, but I only want to load the content of the div, which is 50.

When the script runs, the HTML ends up looking like this:

<div id="numberOfTries">
<div id="numberOfTries">50</div>
</div>

But I only want it to look like this:

<div id="numberOfTries">
50
</div>

I think my syntax $('#numberOfTries').load('index.php #numberOfTries').text(); is incorrect.

Please let me know if clarification is needed.

Improve this question
7
  • What script loads the full div? Commented Aug 14, 2014 at 12:02
  • @MelanciaUK $('#numberOfTries').load('index.php #numberOfTries'); basically reloads <div id="numberOfTries"><?php echo $numberOfTries; ?></div>, but it loads the entire div like so: <div id="numberOfTries"><div id="numberOfTries">50</div></div>, while I only want it to load <div id="numberOfTries">50</div>', which is only 50` the content of the div. Commented Aug 14, 2014 at 12:04
  • So basically you're loading the same page where the div is, within this div? What were you expecting then? Commented Aug 14, 2014 at 12:07
  • @MelanciaUK I am trying to reload the content of the div only, not the full div with the div tags. I looked up the jQuery text() function, but I am having trouble implementing it. Commented Aug 14, 2014 at 12:09
  • .load() is loading the content of the page you're passing as a parameter, but just the element which ID is numberOfTries, and adding it to the same div. Commented Aug 14, 2014 at 12:09

2 Answers 2

Reset to default
1

You misunderstood the use of .load().

In your call, you're loading the index.php page, and grabbing the element which ID is numberOfTries and placing it in this same div.

To achieve what you want to do, you'll need to use the .load() callback:

$("#numberOfTries").load("index.php #numberOfTries", function() {
  // Load the resource and look for the element.
  // When it's done, return this element .text().
  return $(this).text();
}).text();

jQuery .load()

As a side note, it's worth it clarifying that the .text() would work just fine with your example, but you would have one div nested within another, and worse, both sharing the same ID.

But it would work anyway: Demo

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

Comments

0

If you don't want the nested divs to ocur you could just use .replaceWith() so you'll replace the entire DIV. Maybe you've to save the success data from the .load() in a variable to do so.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.