+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Have to click twice to load Ajax Data. (/showthread.php?tid=40471)
Have to click twice to load Ajax Data. - El Forum - 04-09-2011
[eluser]sbarow[/eluser]
Hey,
Pretty new to Ajax.
I am trying to make a gallery, where all the images in the database will be show. An image can then be clicked and it will take you to the top of the page and the image clicked will be loaded into the main div view. This is the code for the view.
Code:
<div id="work_gallery">
<div id="main_image">
</div>
<?php
foreach($work_images as $item)
{
echo "<a id='clicked_1' href='#top_nav'><img src='images/thumbs/1' /></a>";
}
?>
</div>I then have that info posting to this controller function
Code:
function work_images($id)
{
$image = $this->Info_model->get_item_where('Work_images', 'id', $id);
foreach($image as $item) {
echo "<img >image' />";
}
}And finally here is my Javascript
Code:
[removed]
function get_images(id) {
$('#clicked_' + id).click(function() {
var ajax_data = { ajax: '1'};
$.ajax({
url: '<?php echo base_url(); ?>site/work_images/' + id,
type: 'POST',
data: ajax_data,
success: function(msg) {
$('#main_image').html(msg);
}
});
});
return false;
}
[removed]The whole thing works fine. Except that you have to click twice on an image for it to actually load. This is not ideal. Can any one explain why this is happening and how I can fix the problem?
Thanks in advance.
Have to click twice to load Ajax Data. - El Forum - 04-09-2011
[eluser]InsiteFX[/eluser]
Try using prevent default
InsiteFX
Have to click twice to load Ajax Data. - El Forum - 04-09-2011
[eluser]sbarow[/eluser]
I have no idea what that means?
Have to click twice to load Ajax Data. - El Forum - 04-09-2011
[eluser]InsiteFX[/eluser]
If your using jQuery goto the jQuery site and search on prevent default
InsiteFX
Have to click twice to load Ajax Data. - El Forum - 04-09-2011
[eluser]sbarow[/eluser]
Seems the issue was I had to bind the event handler to the links as they where created dynamically. Here is the fixed code if any one is interested.
Code:
function get_images(id) {
$('#clicked_' + id).live('click', function() {
var ajax_data = { ajax: '1'};
$.ajax({
url: '<?php echo base_url(); ?>site/work_images/' + id,
type: 'POST',
data: ajax_data,
success: function(msg) {
$('#main_image').html(msg);
}
});
});
}
[removed]Have to click twice to load Ajax Data. - El Forum - 04-09-2011
[eluser]InsiteFX[/eluser]
jQuery is a great site with a lot of examples that are great for learning
InsiteFX