Sorry for the lateness, and the sloppiness about not posting code.
So here it works: In the index page, there are some categories, which the user can use to filter between shown images. When the user filters the images, I get the images and pass them via jQuery AJAX to my controller, where I get the new filtered images. Here is what the AJAX method looks like: In the "filter_these" variable, the variables are stored.
$.ajax({
'type': 'post',
'url': '*controllername*',
'datatype': 'html',
'data': {'categories': filter_these},
success: function(response){
window.alert(response);
}
});
In my controller, I get the new images, which are stored in a variable. While passing through in jQuery, the images are in "response" variable. Now I need to find a way to reload the images section of the page, with the new images. This could be easily done if I did not have to apply A LOT of HTML stuff around it.
So what I want to know is how do I reload that part of the page, with the new images.
I was thinking about echo'ing a page with those pictures in it, but I can't seem to find that out, while using Codeiginiter.
Or either echoes it in my controller, which is not a good way to work. Help would appreciate.
Jquery function that loads (load_image.php) into some div.
$('#filter_id').click( function(){
// grabs some info so we know what the image is
var aa = $('#image').val();
// clears the div before loading
$('#div_id').empty();
// loads the php page into the div
$('#div_id').load('load_image.php?imagename='+aa);
});
load_image.php
<php
$imagename = $_GET['imagename'];
?>
<img src="/images/<?php echo $imagename;?>">
You could do something like this:
<div id="imagesContainer">
<img src="image1.jpg" title="Fred" />
<img src="image2.jpg" title="Dave" />
</div>
And use jQuery to show/hide the images using a text input box with the id "filter" (<input type="text" id="filter" />
). This would use the text in the images' title attribute as what to filter on:
$('input#filter').keyup(function() {
if($(this).val() == '') { //If the filter is blank
$('div#imagesContainer > img').show(); //Show all the images
} else { //If the filter is not blank
$('div#imagesContainer > img').hide(); //Hide all of the images to start with
$('div#imagesContainer > img[title^="'+$(this).val()+'"]').show(); //Show the matching images
}
});
Checkout this JSFiddle: http://jsfiddle.net/59ngx/ (in this example you can search for Mario, Zelda or Sonic)