CODEWITHSUNDEEP
jqueryajax
kishor
kishor

Reputation: 35

Jquery Ajax loading dynamic content

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.

Upvotes: 1

Views: 2074

Answers (8)

syabro
syabro

Reputation: 1887

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.

Upvotes: 0

Stian
Stian

Reputation: 886

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"/>

Upvotes: 0

tusar
tusar

Reputation: 3424

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>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 0

think1712
think1712

Reputation: 106

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?

Upvotes: 0

mgraph
mgraph

Reputation: 15338

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>

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

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?

Upvotes: 2

MatuDuke
MatuDuke

Reputation: 5010

On Page1 try to do this:

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

Upvotes: 0

Related Questions