Wallpapers Forums Login

How To Make Jquery Function Available In Dom And Ajax Content

Posted On Mon Apr 23, 2012 By zcar In Javascipt Forums And Other Related Topics Discussion About Javascript Progamming Forums

i was following your tutorial on how to use ajax jquery with php: http://www.wallpaperama.com/forums/_ayxrzw.html i wanted to take it to the next level. i wanted to use a function in DOM aswell as in my AJAX contente. for example, lets say i have a div with a class called 'shared' and this class has some CSS that makes the div appear to be a link. so when you click on the link from the DOM, you get an alert that says hello. it works if i use this code:

$(document).ready(function() {
	$(".shared").click(function() {
		alert('Hello');
	});
});

how about if i have the same div in my AJAX content. since im using PHP, i want the same div with the same class in my post.php file. but when i click on the div, it does not show anything. so here is where it matters, i need to use the live event handler. you can read more at the official jquery site: .live() so i changed my code to this:

$(document).ready(function() {
	$(".shared").live("click",function() {
		alert('Hello');
	});
});

now it works.. here is the complete code i used: 1. create a folder called: test. 2. create a file called index.php and copy and paste the following code 3. create a new called post.php and copy and paste the post.php code from below 4. upload it to your PHP server and see it in action.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Ajax Example by Webune.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// This functions starts the ajax to show the output from post.php
// COPYRIGHT: WWW.WEBUNE.COM
//http://www.wallpaperama.com/forums/_ayxrzw.html
$(document).ready(function() {
	$(".shared").live("click",function() {
		alert('Hello');
	});
});
function StartAjax(ResultsId){
	$.ajax({
	  type: "GET",
	  url: "post.php",
	  cache: false,
	  data: "name=John&location=Boston",
	  success: function(html){
		$("#"+ResultsId).append(html);
	  }
	
	});
}
</script>

<style type="text/css">
.shared {
	text-decoration:underline;color:#00F;margin:20px;cursor:pointer;
}
</style>
</head>
<body>
<div class="shared" >This is From index.php Click me</div>
<a href="#" onclick="StartAjax('ResultsId');">Click Here to see content from post.php</a>
<div id="ResultsId"></div>
</body>
</html>

post.php

<?php
// This functions starts the ajax to show the output from post.php
// COPYRIGHT: WWW.WEBUNE.COM
//http://www.wallpaperama.com/forums/_ayxrzw.html
?>
<div class="shared" style="text-decoration:underline;color:#00F">This is From post.php. Click me</div>

Information

Forums »
Javascipt Forums And Other Related Topics Discussion About Javascript Progamming »
How To Make Jquery Function Available In Dom And Ajax Content

Title: How To Make Jquery Function Available In Dom And Ajax Content

Description: this tutorial will show you how you can use a function from DOM and AJAX callback using a PHP file

Tags: php ,computer ,programming ,script ,javascript ,jquery ,php

Info: This Post Has Been Viewed 0 Times Since
Date: Mon Apr 23, 2012
Author zcar Received 0 Replies #847

How To Use If And Else Operator In Jquery An Example

How To Make Jquery Function Available In Dom And Ajax Content

Related Content

Information

Share