display a link from another php page without page reload

Question

So basically I have a link as a div in page 1.

<a href="/computing/abc/page2.php" class="topic-list-item">

    <h3 class="topic-title">Internet Protocol Basics</h3>

    <div class="topic-description-text">
        Learn how Internet Protocol is used 
    </div>
</a>

When I click on the div it opens the page 2 by reloading the page.

I want the new content of page 2 to appear without any reloading while at the same time this changes my URL.

Is this possible?

You can: https://stackoverflow.com/questions/33496555/display-a-link-from-another-php-page-without-page-reload#answer-33497371 — Vivaan, Aug 26 '21 at 15:11

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

HTML:

Disable your <a> tag because you will send an ajax request instead of loading a new page

<a href="#" data-url="/computing/abc/page2.php" class="topic-list-item">

    <h3 class="topic-title">Internet Protocol Basics</h3>

    <div class="topic-description-text">
        Learn how Internet Protocol is used 
    </div>
</a>

JS (jQuery):

Bind the click event to execute your ajax call, then set the HTML your server send back where you want it to be.

  $("a").click(function(){
    $.ajax({
      url: $(this).data("url"),
      method: 'get',
      success: function(data){
         $("#targetContainer").html(data);
      }
    })
  });

The success function's argument will be what your server send back, the /computing/abc/page2.php page. You can set it where you need it to be on your page (here inside $("#targetContainer") ).

See Modify the URL without reloading the page for the url modification without reload

edited May 23 '17 at 11:51

Community

1
1

answered Nov 03 '15 at 10:57

Yabada

1,728
1
15
36

Can you please clarify on #thePlaceWhereYouWantToPutTheNewHTML. Also, i have about 10 such div, that mean i will have 10 ajax call? I did try the pushState but it doesn't suit my purpose. – Neha Nov 03 '15 at 11:04
I edited my answer. By setting `data-url` on your `` tag, you can make ajax calls by using this url and avoid multiplyng code – Yabada Nov 03 '15 at 12:05
I was wrong - it does not work, i want to change the full html not just a single div. – Neha Nov 03 '15 at 14:30
1

Then you just have to modify the `` tag. If you want to change all the page maybe you could considere reloading the page ? – Yabada Nov 06 '15 at 23:22

display a link from another php page without page reload

1 Answers1