Ajax change wrapper content

Question

I'm trying to develop my skills with Ajax I want to change my wrapper content with a different pages wrapper content without having to refresh the page.

I'm using:

$(function () {
    $("#page2btn").click(function () {
        $.ajax({
            url: 'page2.asp',
            data: { id: $(this).attr('id') },
            success: function (data) {
                $('#Wrapper').html(data);
            }
        });
    });
});

<div id="Wrapper">
    <div id="menu">
        <a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
        <a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
        <a class="navbutton" onclick="MakeRequest3()">Page3</a>
    </div>
    <h1>Test1</h1>
</div>

and another page called page2.asp with a different wrapper content saying Test2 But my wrapper wont change when I click the button. any help would be appreciated.

Where is the `#Wrapper` element? Have you checked the console to ensure that the request is successful? — Rory McCrossan, Jun 23 '14 at 08:44
Are `MakeRequest1()` and `MakeRequest2()` defined somewhere ? — hutchbat, Jun 23 '14 at 08:47
Hello, put an alert(data) or console.log(data) to make sure that your request is ok. Or replace `$('#Wrapper').html(data);` with: `$('#Wrapper').empty(); $('#Wrapper').append(data);` — mihutz, Jun 23 '14 at 08:50
Do you want
Test1
to be populated with the new content that is "Test2", right ? — Rahul Gupta, Jun 23 '14 at 08:54
On page 2 the content is "
Test2
I want this to appear on page1 where it says
Test1
without refreshing the page — ByronMcGrath, Jun 23 '14 at 09:01

score 1 · Answer 1 · answered Jun 23 '14 at 08:52

1

Try to simplify it to determine if this is a problem with your front-end or back-end code...

Try this and see of it works any better..

$('#Wrapper').load('page2.asp?id='+$(this).attr('id'));

answered Jun 23 '14 at 08:52

Dutchie432

28,798
20
92
109

Well, that's the most very basic way to load content into a div. Are you getting an error? Have you ensured you are capturing the ID correctly? – Dutchie432 Jun 28 '14 at 10:48

score 1 · Answer 2 · answered Jun 23 '14 at 09:18

Try this:

$(function () {
    $("#page2btn").click(function () {
        $.ajax({
            url: 'page2.asp',
            data: { id: $(this).attr('id') },
            success: function (data) {
                $('#dynamic_content_div').html(data);//data = <h1>Test 2</h1>
            }
        });
    });
});

HTML:

<div id="Wrapper">
    <div id="menu">
        <a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
        <a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
        <a class="navbutton" onclick="MakeRequest3()">Page3</a>
    </div>
    <div id="dynamic_content_div">
    <h1>Test1</h1>
    </div>
</div>

brainless coder · Answer 3 · 2014-06-23T09:54:40.803

Javascript is case sensitive. You are using lowercase in case of assigning the event -

$(function () {
    $("#page2btn").click(function () { //lowercase P
        ...
    });
});

but using uppercase for html id

        ...
        <a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span> //upper case P
        ...

so, it never finds the item to bind to, thus nothing happens when you click. Either change js to -

$("#Page2btn").click(function ()

or change html to -

<a class="navbutton" id="page2btn">Page2</a> <span class="navbutton">|</span>

Other than this, I don't see the error.

score 1 · Answer 4 · edited May 23 '17 at 12:31

Try jQuery replaceWith method, like this:

$(function () {
   $("#page2btn").click(function () {
      $.ajax({
          url: 'page2.asp',
          data: { id: $(this).attr('id') },
          success: function (data) {
              $("#Wrapper").replaceWith(data);  //try with double qoutes
          }
      });
   });
});

*The link below maybe helpful:

Change content of div using jQuery

Ajax change wrapper content

Test1

Test2

Test1

4 Answers4