Solved

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

Posted on 2014-02-08
3
460 Views
Last Modified: 2014-02-08
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.
0
Comment
Question by:mike99c
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39844793
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
 

Author Comment

by:mike99c
ID: 39844807
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
 
LVL 58

Expert Comment

by:Gary
ID: 39844808
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

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question