Question 15079 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to automatically load a certain webpage content with Ajax and jQuery when page is first loaded?

When opening my webpage none of the Ajax content loads until one of the links is clicked then displaying the content connected to that link.

This is where the content is loaded into the main webpage at ext-content:

<main>
    <article class="ext-content">

    </article>
    </main>

This is the javascript which loads the content when one of the links is clicked:

$('section li').click(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/'+$(this).data('content')+'.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content').html(response);
      }
    });
  });

These are the links which then load the content into ext-content when clicked:

<section id="section-links">
      <p>Kies een van de onderstaande opties:</p>
      <ul id="componenten-links">
        <li data-content="cpu-shop">CPU's</li>
        <li data-content="moederbord-shop">Moederborden</li>
        <li data-content="geheugen-shop">Geheugen</a></li>
        <li data-content="hardschijf-shop">Harde schijven</a></li>
        <li data-content="grafischekaart-shop">Grafische kaarten</a></li>
        <li data-content="voeding-shop">Voedingen</a></li>
        <li data-content="behuizing-shop">Behuizingen</a></li>
      </ul>
    </section>

The code below will automatically load a specific webpage when the page loads, but this only works if I manually type in the webpage.html. Is there a way to make this code below work where it automatically takes one of the links listed above instead of me having to type in a specific webpage.html? Otherwise I would need a different script for each webpage.

 $('section li').ready(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/cpu-shop.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content2').html(response);
      }
    });
  });

Thanks for the help

Tags:

3

Answers


  1. 0 
    $('section li').load(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/cpu-shop.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content2').html(response);
      }
    });
  });

    Use the load method instead of ready.

    Login or Signup to reply.
  2. 0

    you can use the document.ready for load data on page load.

    $( document ).ready(function() {
$.ajax({
      type: 'GET',
      url: 'includes/ext-content/cpu-shop.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content2').html(response);
      }
    });
});
    Login or Signup to reply.
  3. 0

    Consider the following.

    $(function(){
  $('.ext-content').load('includes/ext-content/' + $('section li').eq(0).data('content') + '.html');
  
  $('section li').click(function() {
    $('.ext-content').load('includes/ext-content/' + $(this).data('content') + '.html');
  });
});

    See More: https://api.jquery.com/load/

    When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

    when the page is ready, this will load the first LI and collect it’s data attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search