Jump to content


Photo

Ajax Search Not Updating Content


  • Please log in to reply
3 replies to this topic

#1 ab2qik

ab2qik

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 30 December 2012 - 09:19 PM

Hello All!

code below is for a carousel of a few images. Images are inline on page body. It has next / previous navigation. It also has a search box to enable search of an image by its name. Its an ajax request to a php file that uses an array to hold the images.

Navigation by next / prev works. Using ajax search displays the specific image searched for on a first search. The searched image gets loaded into the carousel and hides the viewable images in the carousel viewable area. This is desired. But a second search does not seem to generate an ajax request when checking in firebug console panel. The searched image is replaced by the viewable images instead.

How can it be edited to make each ajax search show up and update the viewale area.

Thankyou for any help.

JS:

$(document).ready(function() {
var spacing = 140;

//console.log(imagename);


$('#imageSlide')
.css(
{ 'width': spacing * 3,
'height': '166px',
'overflow': 'hidden' }
)
.find('.covers a')
.css(
{ 'float': 'none',
'position': 'absolute',
'left': 1000 }
);

var setUpCovers = function() {
var $covers = $('#imageSlide .covers a');
var prev = $('.controler a.prev');
prev.unbind('click');
var next = $('.controler a.next');
next.unbind('click');

// Left image; scroll right (to view images on left).
$covers.eq(0)
.css('left', 0);
prev
.click(function(event) {
$covers.eq(2)
.css('left', 1000);
$covers.eq($covers.length - 1)
.prependTo('#imageSlide .covers');
setUpCovers();
});

// Right image; scroll left (to view images on right).
$covers.eq(2)
.css('left', spacing * 2);
next
.click(function(event) {
$covers.eq(0)
.css('left', 1000);
$covers.eq(0)
.appendTo('#imageSlide .covers');
setUpCovers();
});

// Center image.
$covers.eq(1)
.css('left', spacing);
};
setUpCovers();


var imageLoader = function() {
$('form').submit(function() {
$('#imageSlide')
.load('scripts/imageHolder.php', $(this).serialize());
});

$('form-container').submit(function(event) {
//$(event.target).remove();
});
}
imageLoader();
});



PHP:

<?php
$items = array(
'image1' => '8252313238',
'image2' => '8247338432',
'image3' => '8251341199',
'image4' => '8248530301',
'image5' => '8253003584',
'image6' => '8241570649'
);

$imageId = $_REQUEST['imageId'];
$item = $items[$imageId];
?>

<div align="center">
<?php if ($imageId != "") { ?>
<img id="itemPhoto" src="images/<?php echo $item; ?>.jpg" />
<?php } ?>
</div>

#2 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 564 posts
  • LocationPennsylvania, United States
  • Age:22

Posted 30 December 2012 - 10:32 PM

Could you please format and use code tags?

Edited by Xaotique, 30 December 2012 - 10:35 PM.


#3 ab2qik

ab2qik

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 31 December 2012 - 11:19 AM

Hello Xaotique, thanks for quick reply. Hope the code displays as you wanted it to.

Heres a link to it:
http://www.codesolv..../carousel-ajax/


$(document).ready(function() {
var spacing = 140;

//console.log(imagename);


$('#imageSlide')
	 .css(
	 { 'width': spacing * 3,
		 'height': '166px',
		 'overflow': 'hidden' }
	 )
	 .find('.covers a')
	 .css(
		 { 'float': 'none',
		 'position': 'absolute',
		 'left': 1000 }
	 );

var setUpCovers = function() {
	 var $covers = $('#imageSlide .covers a');
	 var prev = $('.controler a.prev');
		 prev.unbind('click');
	 var next = $('.controler a.next');
		 next.unbind('click');
	
	 // Left image; scroll right (to view images on left).
	 $covers.eq(0)
	 .css('left', 0);
	 prev
	 .click(function(event) {
		 $covers.eq(2)
		 .css('left', 1000);
		 $covers.eq($covers.length - 1)
		 .prependTo('#imageSlide .covers');
		 setUpCovers();
	 });

	 // Right image; scroll left (to view images on right).
	 $covers.eq(2)
	 .css('left', spacing * 2);
	 next
	 .click(function(event) {
		 $covers.eq(0)
		 .css('left', 1000);
		 $covers.eq(0)
			 .appendTo('#imageSlide .covers');
		 setUpCovers();
	 });

	 // Center image.
	 $covers.eq(1)
	 .css('left', spacing);
};
setUpCovers();


var imageLoader = function() {
	 $('form').submit(function() {
	 $('#imageSlide')
		 .load('scripts/imageHolder.php', $(this).serialize());	
	 });

	 $('form-container').submit(function(event) {
	 //$(event.target).remove();
	 });
}
imageLoader();
});


#4 ab2qik

ab2qik

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 31 December 2012 - 11:27 AM

Ooh heres the php part:

<?php
	 $items = array(
					 'image1' => '8252313238',
					 'image2' => '8247338432',
					 'image3' => '8251341199',
					 'image4' => '8248530301',
					 'image5' => '8253003584',
					 'image6' => '8241570649'
				 );

	 $imageId = $_REQUEST['imageId'];
	 $item = $items[$imageId];
?>

<div align="center">
<?php if ($imageId != "") { ?>
<img id="itemPhoto" src="images/<?php echo $item; ?>.jpg" />
<?php } ?>
</div>





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com