CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
bryangators55
bryangators55

Reputation: 138

Link to dynamically created div on another page

I have a navigation bar drop down menu that lists event titles stored in the database. I am trying to allow a user to click one of these links and bring the page to the specified event that was clicked. The problem is the target event is dynamically created by the database.

I believe I am having a concurrency issue because the ajax request is not completed that grabs the event and dynamically creates it. Is there a way to link to the page and wait for the event to be created from the database and scroll down to the object div.

Here is one of the links from the nav bar:

<a href="events.php#2">The Choice </a>

Here is the target div on the events.php page:

<div id='2'>Dynamic content</div>

Is there something I can do in Javascript or PHP I can do to wait for this to load? Maybe fire a function by accessing a hidden div then the function will scroll to the div?

Upvotes: 1

Views: 707

Answers (1)

amflare
amflare

Reputation: 4113

Since the page won't scroll on load because the div does not exist, scroll to it once it does exists. This presumably happen on the success of the ajax query, so when that occurs, scroll your page down to the new div.

Example:

$.ajax({
  url: "test.html"
  //whatever this ajax is supposed to do.
}).success(function() {
  //make the new div
  $('body').append('<div id="newDiv></div>')
  //scroll to the new div
  $('html, body').animate({
    // window.location.hash is the div you want to scroll to as set by the link on the other page, and it even comes pre hashed ("#whatever").
    scrollTop: $(window.location.hash).offset().top
  }, 2000);
});

Upvotes: 2

Related Questions