Jump to content

Loaded AJAX Div does not execut JQuery function

ScotDiddle

By ScotDiddle
in Javascript Help

 Share

Recommended Posts

ScotDiddle Member

ScotDiddle

Posted
Posted

Hello All,

 

    I really hope I can do what I am trying to do.

 

  I call a php page via AJAX and the page loads fine, but the jquery call :

 


<script type="text/javascript">
$(document).ready(function(){
	$("#slider").easySlider();
});
</script>

 

doesn't intercept my list of <li's> and format them for the easySlider function ( found here: http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

.)

 

How does one make JQuery work as part of an AJAX call.

 

Everything works fine if I call my php as a stand-alone page.

 

Thanks in Advance.

 

Scot L. Diddle, Richmond VA

Link to comment
Share on other sites
ScotDiddle Member

ScotDiddle

Posted
  • Author
Posted

AlexWD,

 

I am loading a div via a rock-solid ajax script.  The php script that the ajax writes a call to Jquery to organize sql data into a "slide-show" which presents 1 / 16 th of the data per slide.  As a stand-alone script, Jquery works correctly, but when the page is rendered via ajax, the jquery script never executes, and no javavascript error is generated. See code below.

 

Thanks,

 

Scot L. Diddle, Richmond VA

 

<?php

/**
*
*  product.php
*
*/

$standalone = TRUE;

if ($standalone) {

$vendor = 'bella';
$category = 'none';

}


Header("Cache-control: private, no-cache");
Header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
Header("Pragma: no-cache");


$this_template="product.php";
//include file to connect to database
require_once( 'includes/application_start.inc.php' );
//end kgt

$this_header="<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd\">
<html>
<head>
<title>Products - Wholesale Sports Apparel Imprinted Logo Apparel Corporate Apparel</title>
<META NAME=\"description\" content=\"Wholesale sports apparel and corporate imprinted logo apparel at our online wholesale sports apparel store with corporate apparel t-shirts, golf shirts, polo shirts, caps, logo shirts Êand more.\">
<META NAME=\"KEYWORDS\" CONTENT=\"wholesale sports apparel,imprinted apparel,logo apparel,corporate apparel,apparel,t-shirts,polo shirts,logo,embroidery,shirts,caps,embroidered logos,corporate logo shirts\">
<META NAME=\"robots\" content=\"index,follow\">
<meta name=\"GOOGLEBOT\" content=\"index,follow\">
<META NAME=\"revisit-after\" CONTENT=\"14 days\">
<!-- LINK TO CSS STYLESHEETS
//-->

<link href=\"vats_stylesheets.css\" rel=\"stylesheet\" type=\"text/css\">

<style>

img {
	border:none;
}

pre {
	display:block;
	font:12px Verdana, \"Courier New\", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;
	margin:.5em 0;
	width:500px;
}

/* Easy Slider */

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	background-color:red;
	}
#slider li{
	/*
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/
	width:940px;
	height:430px;
	overflow:hidden;
	border: solid 0px;
	background-color:#205e75;
	color:#FFFFFF;

	}
span#prevBtn{}
span#nextBtn{}

/* // Easy Slider */

</style>

<script type=\"text/javascript\" src=\"javascript/jquery-1.4.1.min.js\"></script>
<script type=\"text/javascript\" src=\"javascript/easySlider1.5.js\"></script>


<script type=\"text/javascript\">
$(document).ready(function(){
	$(\"#slider\").easySlider();
});
</script>

</head>
<body bgcolor=\"#FFFFFF\">
<br />

<table border=0 cellpadding=0 cellspacing=\"0\" width=\"96%\">
<tr>
	<td align=left>
		";

if (empty($page)) {
$page=0;
}
if (empty($cur)) {
$cur=0;
}
$next_page=($page + 9);
$previous_page=($page - 9);


  if ($s=="top") {
  	if (($category=="none") && ($vendor=="none")) {
  		print $this_header;
  		print ("
  			<a class=\"content\"><h3>Whoops!</h3>
  			You must select <b>either</b> a category, <b>or</b> a vendor, or <b>both</b>.<br /></a>"
  		);
  	}
  	else {

  		$slashed_category=addslashes($category);

  		if (($category!="none") && ($vendor!="none")) {

  			$sql = "SELECT cat_let FROM VAT_categories WHERE cat_des like '$slashed_category'";

  			$find_cat_code=mysql_query($sql);

  			if (!$find_cat_code) {
  				print mysql_error();
  				exit;
  			}
  			else {

  				while ($row = mysql_fetch_array($find_cat_code)) {
  					$cat_let=$row['cat_let'];
  				}

  				$this_category_list_query = "SELECT style_no, category_list FROM VAT_styles";

  				$find_category_list=mysql_query($this_category_list_query);

  				$vendorOr = NULL;

  				while ($row = mysql_fetch_array($find_category_list)) {

  					if ($row['category_list'] != NULL) {

  						$pieces = explode(',', $row['category_list']);

  						if (in_array($cat_let, $pieces)) {

  							$vendorOr .= "OR style_no like '" . $row['style_no'] . "' \n";
						// echo $row['style_no'] . '    ' . $row['category_list'] . "<br /><br/> \n";

  						}

  					}

  				}

  				$this_query=("SELECT *
  					FROM VAT_styles
  					WHERE vendor like '$vendor'
  					AND (category1 like '$cat_let'
  						OR category2 like '$cat_let'
  						OR category3 like '$cat_let'
  						$vendorOr)"
  				);

  				$match_query=("SELECT *
  					FROM VAT_styles
  					WHERE vendor like '$vendor'
  					AND (category1 like '$cat_let'
  						OR category2 like '$cat_let'
  						OR category3 like '$cat_let'
  						$vendorOr)"
  				);
  			}
  		}
  		else if (($category!="none") && ($vendor=="none")) {
  			$vendor_show="yes";
  			$search_criteria=("Category: ".$category."<br />");
  			$find_cat_code=mysql_query("SELECT cat_let FROM VAT_categories WHERE cat_des like '$slashed_category'");

  			if (!$find_cat_code) {
  				print mysql_error();
  				exit;
  			}
  			else {
  				while ($row = mysql_fetch_array($find_cat_code)) {
  					$cat_let=$row['cat_let'];
  				}

  				$this_category_list_query = "SELECT style_no, category_list FROM VAT_styles";

  				$find_category_list=mysql_query($this_category_list_query);

  				$vendorOr = NULL;

  				while ($row = mysql_fetch_array($find_category_list)) {

  					if ($row['category_list'] != NULL) {

  						$pieces = explode(',', $row['category_list']);

  						if (in_array($cat_let, $pieces)) {

  							$vendorOr .= "OR style_no like '" . $row['style_no'] . "' \n";
						// echo $row['style_no'] . '    ' . $row['category_list'] . "<br /><br/> \n";

  						}

  					}

  				}


  				$this_query=("SELECT *
  					FROM VAT_styles

  					WHERE category1 like '$cat_let'
  						OR category2 like '$cat_let'
  						OR category3 like '$cat_let'
  						$vendorOr"
  				);

  				$match_query=("SELECT *
  					FROM VAT_styles
  					WHERE category1 like '$cat_let'
  						OR category2 like '$cat_let'
  						OR category3 like '$cat_let'
  						$vendorOr"
  				);
  			}
  		}
  		else if (($category=="none") && ($vendor!="none")) {

  			$this_query=("SELECT *
  				FROM VAT_styles
  				WHERE vendor like '$vendor'"
  			);

  			$match_query=("SELECT *
  				FROM VAT_styles
  				WHERE vendor like '$vendor'"
  			);

  		}

  		$result=mysql_query($this_query);

  		if (!$result) {

  			print $this_header;
  			print mysql_error();
  			echo $category;
  			echo $vendor;
  			exit;

  		}
  		else {


  			$this_many_matches=mysql_query($match_query);

  			$cur=$cur + 1;

  			$number = mysql_num_rows($result);

  			$p=0;

  			$i = 0;
  			$r = 0;

  			$productsOut = array();

  			if ($number == 0) {

  				echo $this_header;
  				echo "
  					<br /><p align=center>
  					<font face=\"arial, helvetica\" size=4><b>
  					There are no items that match this search criteria.</b><br /><br /><font color=\"#FF0000\">".$search_criteria."</font><br />
  					Please make another selection.<br /></font></p></td></tr></table>";
  			}
  			else if ($number > 0) {

  				echo $this_header;

  	    		echo "<img src=\"http://www.virginiats.com/images/spacer.gif\" height=2></td></tr> \n";

  			}
  		}

  		while ($i < $number) {

  				$r=($r+1);

  				$style_no    = trim(mysql_result($result,$i,"style_no"));
  				$description = mysql_result($result,$i,"description");
  				$vendor      = mysql_result($result,$i,"vendor");
  				$vendor_full = mysql_result($result,$i,"vendor_full");

  				$productsOut[] = "
  						<a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\"><img src=\"http://www.virginiats.com/catalog/jpgs/".$style_no.".jpg\" border=0 hspace=8 width=200 style=\"border-color:#380808;\"></a> \n";
  				if ($vendor_show=="yes") {
  					$productsOut[] = "<font size=1 face=\"arial, helvetica\"><a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\">#".$style_no." - ".$vendor_full." - ".$description."</a></font></center> \n";
  				}
  				else {
  					// print ("<font size=1 face=\"arial, helvetica\"><a href=\"item.php?sku=".$style_no."&\">#".$style_no." - ".$description."</a></font></center>");
  					$productsOut[] = "<font size=1 face=\"arial, helvetica\"><a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\">#".$style_no." - ".$description."</a></font></center> \n";
  				}

  				$i++;

  				if ($i < $number) {

  					$style_no=trim(mysql_result($result,$i,"style_no"));
  					$description =mysql_result($result,$i,"description");
  					$vendor =mysql_result($result,$i,"vendor");
  					$vendor_full =mysql_result($result,$i,"vendor_full");

  					$productsOut[] = "
  						<a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\"><img src=\"http://www.virginiats.com/catalog/jpgs/".$style_no.".jpg\" border=0 hspace=8 width=200 style=\"border-color:#380808;\"></a> \n";
  					if ($vendor_show=="yes") {
  						$productsOut[] = "<font size=1 face=\"arial, helvetica\"><a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\">#".$style_no." - ".$vendor_full." - ".$description."</a></font></center> \n";
  					}
  					else {
  						$productsOut[] = "<font size=1 face=\"arial, helvetica\"><a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\">#".$style_no." - ".$description."</a></font></center> \n";
  					}

  					$i++;

  					if ($i < $number) {

  						$style_no    = trim(mysql_result($result,$i,"style_no"));
  						$description = mysql_result($result,$i,"description");
  						$vendor      = mysql_result($result,$i,"vendor");
  						$vendor_full = mysql_result($result,$i,"vendor_full");

  						$productsOut[] = "<a href=\"item.php?sku=".$style_no."&\"><img src=\"http://www.virginiats.com/catalog/jpgs/".$style_no.".jpg\" border=0 hspace=8 width=200 style=\"border-color:#380808;\"></a><br /> \n";
  						if ($vendor_show=="yes") {
  							$productsOut[] = "<font size=1 face=\"arial, helvetica\"><a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\">#".$style_no." - ".$vendor_full." - ".$description."</a></font></center>";
  						}
  						else {
  							$productsOut[] = "<font size=1 face=\"arial, helvetica\"><a href=\"javascript:ajaxPrep('ajaxDriver.php?ajaxProcess=item?sku=$style_no@AjaxContent');\">#".$style_no." - ".$description."</a></font></center>";
  						}

  						$i++;

  					}

  				}
//  				if ($i < $number) {
//  					// nop
//  				}
//  				else {
//
//  					if ($number > 0) {
//  						$productsOut[] = "<br /><br /> <img src=\"http://www.virginiats.com/images/spacer.gif\" height=2> \n";
//  					}
//  				}
  			}
  		}
  	}

@mysql_free_result($result);

echo "</center> \n";

$subgroup = array();

$groupCount    = 0;
$subgroupCount = 0;

foreach ($productsOut as $IDX => $lineOut) {

	$modulo = $IDX % 2;

	if ($modulo === 0 ) {

		$subgroupCount++;

	}

	$subgroup[$subgroupCount][] = $lineOut;

}

$sliderPages       = array();
$singleSliderPage = array();

$sliderPages = array_chunk($subgroup,9);

/**
 *
 *  Break the sliderPages into 3 arrays, each holding 3 items ( We will be generating a 3 by 3 table )
 *
 */

foreach ($sliderPages as $sliderCandidate) {
	$tempSliderPages[] = array_chunk($sliderCandidate,3);
}

/**
 *
 *  Break each of the $tempSliderPages into a 3 by 3 array
 *
 */

$slider = array();

foreach ($tempSliderPages as $IDX => $pageOut) {

	$slider[] = $pageOut;

}

/**
 *
 *  Break each of the $slider into a 3 by 3 array
 *
 */


$sliderPage    = array();
$sliderPageOut = array();

foreach ($slider as $IDX => $tempPage) {

	$sliderPage = $tempPage;


	/**
	 *
	 *  $sliderPage should be 3 arrays, 0, 1, & 2 where each of the three arrays hols an array of two items:
	 *
	 *  An image with anchor link and the item description (text) with the same anchor link as the image
	 *
	 */

	$sliderPageOut[$IDX][] = "<table width=\"100%\" border=\"5\"> \n";
	$sliderPageOut[$IDX][] = "\t<tr> \n";
	$sliderPageOut[$IDX][] = "\t\t<td width=\"33%\"> \n";

		foreach ($sliderPage as $IDX2 => $lineArrayOut) {

			if ($IDX2 === 2) {
				$sliderPageOut[$IDX][] = "\t\t</td></tr><tr><td width=\"33%\"> \n";
			}
			else {
				$sliderPageOut[$IDX][] = "</td></tr><tr><td> \n";
			}

			foreach ($lineArrayOut as $contentLineOut) {

				foreach ($contentLineOut as $lineOut) {
					$sliderPageOut[$IDX][] = $lineOut .  "<br /> \n";
				}

				$sliderPageOut[$IDX][] = "\t\t</td><td width=\"33%\"> \n";

			}

			$sliderPageOut[$IDX][] = "</tr><tr> \n";

		}

	$sliderPageOut[$IDX][] = "\t\t</td> \n";
	$sliderPageOut[$IDX][] = "\t</tr> \n";
	$sliderPageOut[$IDX][] = "</table> \n";
}

/**
 *
 *  Parrot out the Slider pages... ( "Live" data... )
 *
 */
//
//	echo "<div id=\"slider\"> \n";
//	echo "\t<ul> \n";
//
//	foreach ($sliderPageOut as $sliderPageArray) {
//
//		echo "<li> \n";
//
//		foreach ($sliderPageArray as $lineOut) {
//			echo $lineOut;
//		}
//
//		echo "</li> \n";
//
//	}
//
//	echo "\t</ul> \n";
//	echo "</div> \n";

echo "<script type=\"text/javascript\"> \n";

	require('javascript/jquery-1.4.1.min.js');
	require('javascript/easySlider1.5.js');

echo "</script> \n";

?>

<script type="text/javascript">

/*
* 	Easy Slider 1.5 - jQuery plugin
*	written by Alen Grakalic
*	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
*	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
*	Dual licensed under the MIT (MIT-LICENSE.txt)
*	and GPL (GPL-LICENSE.txt) licenses.
*
*	Built for jQuery library
*	http://jquery.com
*
*/

/*
*	markup example for $("#slider").easySlider();
*
* 	<div id="slider">
*		<ul>
*			<li><img src="images/01.jpg" alt="" /></li>
*			<li><img src="images/02.jpg" alt="" /></li>
*			<li><img src="images/03.jpg" alt="" /></li>
*			<li><img src="images/04.jpg" alt="" /></li>
*			<li><img src="images/05.jpg" alt="" /></li>
*		</ul>
*	</div>
*
*/

(function($) {

$.fn.easySlider = function(options){

	// default configuration properties
	var defaults = {
		prevId: 		'prevBtn',
		prevText: 		'Previous',
		nextId: 		'nextBtn',
		nextText: 		'Next',
		controlsShow:	true,
		controlsBefore:	'',
		controlsAfter:	'',
		controlsFade:	true,
		firstId: 		'firstBtn',
		firstText: 		'First',
		firstShow:		false,
		lastId: 		'lastBtn',
		lastText: 		'Last',
		lastShow:		false,
		vertical:		false,
		speed: 			800,
		auto:			false,
		pause:			2000,
		continuous:		false
	};

	var options = $.extend(defaults, options);

	this.each(function() {
		var obj = $(this);
		var s = $("li", obj).length;
		var w = $("li", obj).width();
		var h = $("li", obj).height();
		obj.width(w);
		obj.height(h);
		obj.css("overflow","hidden");
		var ts = s-1;
		var t = 0;
		$("ul", obj).css('width',s*w);
		if(!options.vertical) $("li", obj).css('float','left');

		if(options.controlsShow){
			var html = options.controlsBefore;
			if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
			html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
			html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
			if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
			html += options.controlsAfter;
			$(obj).after(html);
		};

		$("a","#"+options.nextId).click(function(){
			animate("next",true);
		});
		$("a","#"+options.prevId).click(function(){
			animate("prev",true);
		});
		$("a","#"+options.firstId).click(function(){
			animate("first",true);
		});
		$("a","#"+options.lastId).click(function(){
			animate("last",true);
		});

		function animate(dir,clicked){
			var ot = t;
			switch(dir){
				case "next":
					t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
					break;
				case "prev":
					t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
					break;
				case "first":
					t = 0;
					break;
				case "last":
					t = ts;
					break;
				default:
					break;
			};

			var diff = Math.abs(ot-t);
			var speed = diff*options.speed;
			if(!options.vertical) {
				p = (t*w*-1);
				$("ul",obj).animate(
					{ marginLeft: p },
					speed
				);
			} else {
				p = (t*h*-1);
				$("ul",obj).animate(
					{ marginTop: p },
					speed
				);
			};

			if(!options.continuous && options.controlsFade){
				if(t==ts){
					$("a","#"+options.nextId).hide();
					$("a","#"+options.lastId).hide();
				} else {
					$("a","#"+options.nextId).show();
					$("a","#"+options.lastId).show();
				};
				if(t==0){
					$("a","#"+options.prevId).hide();
					$("a","#"+options.firstId).hide();
				} else {
					$("a","#"+options.prevId).show();
					$("a","#"+options.firstId).show();
				};
			};

			if(clicked) clearTimeout(timeout);
			if(options.auto && dir=="next" && !clicked){;
				timeout = setTimeout(function(){
					animate("next",false);
				},diff*options.speed+options.pause);
			};

		};
		// init
		var timeout;
		if(options.auto){;
			timeout = setTimeout(function(){
				animate("next",false);
			},options.pause);
		};

		if(!options.continuous && options.controlsFade){
			$("a","#"+options.prevId).hide();
			$("a","#"+options.firstId).hide();
		};

	});

};

})(jQuery);



</script>

<style>

	img {
		border:none;
	}

	pre {
		display:block;
		font:12px Verdana, \"Courier New\", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;
		margin:.5em 0;
		width:500px;
	}

/* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		background-color:red;
		}
	#slider li{
		/*
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/
		width:940px;
		height:430px;
		overflow:hidden;
		border: solid 0px;
		background-color:#205e75;
		color:#FFFFFF;

		}
	span#prevBtn{}
	span#nextBtn{}

/* // Easy Slider */

</style>


<!-- Test data --->

<div id="slider">
	<ul>
		<li><?php require('hiMom.php'); ?></li>
		<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
		<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
		<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
		<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
	</ul>
</div>

<?php

$time_now = date("l, F j, Y - g:i:s a");

echo "<br /><br /><font size=1 face=\"arial, helvetica\" color=\"#666666\">page loaded: ".$time_now."<br /></font><br /></center> \n";


?>

<script type="text/javascript">

var ajax_func = function () {

	$(document).ready(function(){

		$("#slider").easySlider();

	});


}


</script>

</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.