Jquery Ajax loading dynamic content

Question

I am having the problem with executing the following lines of code..Code contain 2 part. One is a simple HTML file have a call to another Html page through Ajax.

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
type: 'GET',
url: 'check.html',
cache:false,
success: function callme(html){
document.getElementById('display').innerHTML=html;
}
});
});
});
</script>
</head>
<body>
<form>
<input type="button" id="btn" value="Click"/>
</form>
<div id="display"></div>
</body>

check.html

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#btn").hide();
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Click"/>
</body>
</html>

problem is that when I try to click the button of page1.html it will not hide the button of the jquery part of check.html but if I simply run the check.html page it will hide the button immediately.I don't know where is the problem.

Are you using frames? Or these 2 pages are two different examples? — MatuDuke
– MatuDuke, Commented Mar 13, 2012 at 12:53
@MatuDukue No m not using any frame..I don't know why it is happening??? — kishor
– kishor, Commented Mar 13, 2012 at 12:55
even if he changes the id, it will never hide. the code for hiding is written inside click() event — tusar
– tusar, Commented Mar 13, 2012 at 13:43

Sven Bieder · Accepted Answer · 2012-03-13 12:57:18Z

2

When you load the check.html in your page then you have two times the id btn on the page.

Have you tried to change that and see if that solves the problem?

answered Mar 13, 2012 at 12:57

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

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

Comments

MatuDuke · Accepted Answer · 2012-03-13 12:56:01Z

0

On Page1 try to do this:

$(document).ready(function(){
    $("#btn").click(function(){
        $.get("check.html", null, function(data) {
            $("#display").html(data);
        }, "html");
    });
});

answered Mar 13, 2012 at 12:56

MatuDuke

5,0081 gold badge25 silver badges28 bronze badges

Comments

mgraph · Accepted Answer · 2012-03-13 13:08:05Z

0

In check.html change btn by btn2 because ids should not be used twice or more

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn2").click(function(){
$("#btn2").hide();
});
});
</script>
</head>
<body>
<input type="button" id="btn2" value="Click"/>
</body>
</html>

answered Mar 13, 2012 at 13:08

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Comments

think1712 · Accepted Answer · 2012-03-13 13:14:03Z

0

Your main problem is that once you have loaded in the html, you will have two buttons with the same ID on the page. Try changing the one you are loading in (and want to hide) to some other ID. This way you will still have valid markup and your jquery will not hide both of your buttons.

Your new button can be changed to something new like "newbtn". Then you should do

$(document).ready(function() {
    $("#newbtn").click(function() {
        $("#newbtn").hide();
    })    
});

Also... why are you using document.getElementById('display').innerHTML when $('#display').html(data); will have the same effect?

edited Mar 13, 2012 at 13:14

answered Mar 13, 2012 at 13:07

think1712

1064 bronze badges

1 Comment

kishor Over a year ago

if I write the code u mention above..still it is not working..and I want that when I click the the button then it will hide.

charlietfl · Accepted Answer · 2012-03-13 13:18:58Z

0

Problem is quite simple...the ready event only occurs on main page load. When you are loading check.html it has already occurred. Your script in check.html will now fire immediately, but the html it is referring to hasn't been loaded yet.

If your script tag is placed in body in check.html, after the buttons it refers to , the handler will be attached.

Using ajax success callback alleviates this situation as well

answered Mar 13, 2012 at 13:18

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

tusar · Accepted Answer · 2012-03-13 13:33:07Z

0

in check.html you have written the hiding functionality inside a click() event

$("#btn").click(function(){
    $("#btn").hide(); // this will be executed only if someone clicks the `btn` element
});

If you use this code, the $("#btn") will hide only if it is clicked. To make it hidden with calling AJAX, you need to put outside click the click event. Also use a different id for the button in check.html

Update :

to make it happen, your final code of check.html should be :

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
    $("#btn").click(function(){
       $("#btn2").hide(); // this will hide only when you click the 'btn2'
    });
    $("#btn2").hide(); // this is for hiding when load the page
});
</script>
</head>
<body>
<input type="button" id="btn2" value="Click"/>
</body>
</html>

edited Mar 13, 2012 at 13:33

answered Mar 13, 2012 at 13:24

tusar

3,4306 gold badges41 silver badges62 bronze badges

7 Comments

kishor Over a year ago

when button with id btn click how it will hide button with id btn2 because both are in the different page

kishor Over a year ago

ya I have tried it... first load the page page1. then click the button with id btn and clicking that btn another button with id btn2 will display and clicking that btn2 it will hide itself

tusar Over a year ago

make sure everything is alright links, codes. it works for me when I tried :)

Stian Over a year ago

@tusar According to your code, #btn2 will hide when #btn is clicked, but #btn2 will always be hidden on page load as well. What's the point in that?

tusar Over a year ago

@Stian, that is the problem statement, isn't it ? 'problem is that when I try to click the button of page1.html it will not hide the button of the jquery part of check.html but if I simply run the check.html page it will hide the button immediately'

|

Stian · Accepted Answer · 2012-03-13 14:25:10Z

0

It's not entirely clear what you want to achieve here. Do you want both buttons to be hidden when you press one of them? Or do you want to hide only the button in check.html when it is clicked?

If the last question is the case, I suggest this:

In page1.html have the following:

<html>
<head>
<title>
</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
type: 'GET',
url: 'check.html',
cache:false,
success: function callme(html){
document.getElementById('display').innerHTML=html;
},
dataType: "html"
});
});

$("#btn2").live("click", function(){
$("#btn2").hide();
});

});
</script>
</head>
<body>
<form>
<input type="button" id="btn" value="Click"/>
</form>
<div id="display"></div>
</body>

check.html:
<input type="button" id="btn2" value="Click"/>

edited Mar 13, 2012 at 14:25

answered Mar 13, 2012 at 13:25

Stian

8862 gold badges9 silver badges17 bronze badges

3 Comments

kishor Over a year ago

@Sitan I just want that when I run the page1 code, it will first display a button with id btn.and after clicking that button it will display a button with id btn2.and on the clicking of button with btn2 it will hide..

Stian Over a year ago

Okay, you should try my suggestion then. I have tested it here and it seems to work like you want it to. :)

kishor Over a year ago

@Sitan Would u plz upload ur codes so that I will understand it better...

syabro · Accepted Answer · 2012-06-20 22:03:47Z

0

Problem is that $.ready in loaded html doesn't work in 1.7.x Now I'm looking for solution, but downgrading to 1.6.x works.

answered Jun 20, 2012 at 22:03

syabro

1,8872 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Jquery Ajax loading dynamic content

check.html

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

check.html

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related