How do I hide a tag in jQuery within HTML loaded via AJAX

This post is actually a continuation of the following:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28360042.html

I now want to hide a link within the loaded HTML.

The parent code is here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>

<body>

	<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        $('#internaldiv').load('link.htm');

        $('#internallink2').hide();

		$(document).on("click",".link",function(){		
		   alert("Link clicked");
		   return false;
		});

    });
    //]]>
    </script>
    
    <a class="link" href="#">Click parent link</a>
    
    <div id="internaldiv">
    
    </div>

</body>
</html>

Open in new window


The HTML to load is here:
<a class="link" href="#">Click loaded link</a><br>
<a class="link" id="internallink2" href="#">Click loaded link 2</a>

Open in new window


I am trying to hide internallink2 but the following jQuery does not work:
$('#internallink2').hide();

I know this somehow needs to change but not exactly sure what the syntax is as this time the trigger is the HTML snippet loading.
mike99cAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
jQuery .load is asynchronous so, while it is loading your external page, it is carrying on with the rest of your js code, at which point you are trying to hide a link that doesn't yet exist.
You are better of using the full ajax code so you can fire your hide when it has been loaded and handle errors

$.ajax({url: 'link.htm', success: function(response) {
	// success: is for the callback when your ajax call has finished
	$('#internaldiv').html(response)
	// Now you can hide it as the html has been loaded.
	$('#internallink2').hide();
},
error: function(e){
    // Oops something went wrong.
}
});

Open in new window



But you can amend your code like so...
$( "#internallink" ).load( "link.htm", function() {
	$('#internallink2').hide();
});

Open in new window

0
 
mike99cAuthor Commented:
Ok thanks Cathal. I have now changed the code to the following:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>

<body>

	<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){
		
		// Do a synchronous call to load the 
		$.ajax ({
			type: 'GET', 
			url: 'link.htm', 
			success: function(response) {
			   $('#internaldiv').html(response)
			   $('#internallink2').hide(); // Now you can hide it as the html has been loaded.
			 }
		});		

		$(document).on("click",".link",function(){		
		   alert("Link clicked");
		   return false;
		});

    });
    //]]>
    </script>
    
    <a class="link" href="#">Click parent linkx</a>
    
    <div id="internaldiv">
    
    </div>

</body>
</html>

Open in new window


So the synchronous AJAX call now does the load as well.
0
 
GaryCommented:
It's asynchronous
A synchronous call would block all further processing until the current function has finished - but this should not be used/or at the very least avoided.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.