I have this ajax/php structure that works perfectly when selecting one image. But, if I click on "selecteer" to perform the same code for the second time, no images are shown. The "ajax" page does load correctly though.
Basically what I have;
Article page: This page shows 10 buttons "Selecteer". Under these 10 buttons you have a div where some images are shown after pressing Selecteer. When clicking on one of those images, the clicked image is selected and will be shown solely. Javascript: This script binds the click events, and performs the ajax loading aswell as the image showing. Images page: this page is loaded by ajax and is shown in a div inside the article page.
EDIT:
I did some testing. The second time the div is loaded with an ajax call (the images page) it does "Create" all the images with the createImage function. Yet I only see the search bar and the "zoek" button. So the real problem is: the images aren't showing the second time!
The code (I left some things out which I think are irrelevant)
article:
<?php for($i = 0; $i < constant("MAX_PICS"); $i++) { ?>
<button <?php echo"id='select_portal$i' class='select_portal_class'";?> type="button">Selecteer</button>
<div <?php echo"id='dialog_form$i'";?> style="display:none; position:absolute; width:auto; height:auto; margin-left: auto; margin-right: auto; z-index:1;"></div>
<div <?php echo"id='selected_image$i'";?> style="display:block; width:auto; height:auto">
<?php if(isset($_GET['edit_artikel'])) { ?><img src="../images/<?php $beeldbank = Beeldbank::find_by_portal_id($artikel->portal_id); echo $beeldbank[0]->imagelib_id; ?>/<?php echo $artikel->portal_id;?>" id="selid" width="125" /> <?php } else {?>
<img src="../images/icons/no_image_found.png" alt="No image available" <?php echo"id='selid$i'";?> width="125" /> <?php } ?>
<input type="hidden" <?php echo"id='portal_id$i'";?> name="portal_id" value="<?php if(isset($_GET['edit_artikel'])) { echo $artikel->portal_id; } ?>" />
</div>
<div id="selected_portal"></div>
javascript:
$(document).ready(function() {
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = document.location.protocol + '//ajax.googleapis/ajax/libs/jquery/1.11.0/jquery.min.js';
var script2 = document.createElement('script');
script2.type = 'text/javascript';
script2.src = document.location.protocol + '//ajax.googleapis/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
document.getElementsByTagName('head')[0].appendChild(script2);
})();
$( ".select_portal_class" ).each(
function( intIndex ){
$(this).bind('click', function() {
loadAjaxFrame(intIndex);
});
}
);
});
function loadAjaxFrame(id)
{
var dialog = $("#dialog_form"+id);
//alert(dialog.attr('id'));
dialog.css("display", "block");
dialog.css("top", "auto");
dialog.css("left", "auto");
dialog.css("right", "auto");
dialog.css("backgroundColor", "white");
document.getElementById(dialog.attr('id')).style.visibility = 'visible';
tempDialogID = id;
if(!ajaxLoad){
dialog.load("imglib.php");
ajaxLoad = true;
}
}
function showImage()
{
var portal = $("#portal_id"+tempDialogID);
var dialog = $("#dialog_form"+tempDialogID);
var selid = $("#selid"+tempDialogID);
alert(tempDialogID);
var img = document.getElementById(selid.attr('id'));
img.src = imgname;
var portal_id = document.getElementById(portal.attr('id'));
portal_id.value= imgid;
document.getElementById(dialog.attr('id')).style.visibility = 'hidden';
dialog.unload();
ajaxLoad = false;
}
function create_image(src,alt) {
var img = document.createElement("img");
var objTo = document.getElementById('imagesDiv');
img.src = src;
img.alt = alt;
img.className= "imgid";
$(img).height(imageHeight);
$(img).width(imageWidth);
$(img).bind('click', 'span', function () { imgid = alt; imgname = src; showImage(); });
objTo.appendChild(img);
}
$('#formpie').on('submit', function(e) {
e.preventDefault();
var dialog = $("#dialog_form"+tempDialogID);
$.ajax({
type : 'POST',
url : "imglib.php",
data : $(this).serializeArray(),
success: function(data) {
dialog.html(data);
}
});
});
And finally the images page:
<script src="//ajax.googleapis/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/SelectImage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var photos = <?php echo json_encode($photoSources); ?>;
var photoAlts = <?php echo json_encode($photoAlts); ?>;
var photoTags = <?php echo json_encode($photoTags); ?>;
var photoCount= <?php echo $total_count; ?>;
photoCount = photoCount/10;
photoCount = Math.ceil(photoCount);
function buttonClicked(id){
var page = id;
photoPage = page*10;
minCount = photoPage-10;
maxCount = photoPage;
jQuery("#imagesDiv").html("");
createButtons();
$( "#imagesDiv" ).append( " <br/>");
populateDiv();
}
function createButtons() {
var i = 1;
var button= "";
while(i <= photoCount)
{
var button = document.createElement("BUTTON");
var buttonName= document.createTextNode(i);
button.appendChild(buttonName);
button.id = i;
jQuery(button).bind('click', { id: i}, function(event) {
var data = event.data;
buttonClicked(data.id);
});
var objTo = document.getElementById('imagesDiv');
objTo.appendChild(button);
i++;
}
}
$(".moreButton").click(function() {
maxCount += 10;
minCount += 10;
jQuery("#imagesDiv").html("");
populateDiv();
});
function populateDiv() {
for(var i = minCount;i < maxCount; i++)
{
if(i < <?php echo $total_count ?>)
{
create_image("../"+photos[i],photoAlts[i]);
$( "#imagesDiv" ).append( "<p style=\"display:inline; padding-left:10px;\">" + photoTags[i] + "</p><br/>" );
}
}
}
createButtons()
$( "#imagesDiv" ).append( " <br/>");
populateDiv();
});
</script> <?php
if(isset($_POST['submit'])) {
$artikel->portal_id = $_POST['portal_id'];
}?>
<fieldset>
Afbeelding zoeken
<form id="formpie" name="zoek" action="" method="POST">
<input type="hidden" name="zoek" value="zoek" id="zoek"/>
<input type="text" name="tags" size="31" id="tags"/>
<input type="submit" name="zoek" id="search" value="Zoek" />
</form>
<div id="imagesDiv" style="width:800px; height:780px;">
<label for="portal_id"></label>
</div>
</fieldset>
<div id="selected_img_div" style="display:none; width:auto; height:auto;">
<?php if($selected_image == NULL) { echo "No image selected"; }
else { echo '<img src="images/'.$selected_image.' class="selimgid"/>'; } ?>
</div>
I have this ajax/php structure that works perfectly when selecting one image. But, if I click on "selecteer" to perform the same code for the second time, no images are shown. The "ajax" page does load correctly though.
Basically what I have;
Article page: This page shows 10 buttons "Selecteer". Under these 10 buttons you have a div where some images are shown after pressing Selecteer. When clicking on one of those images, the clicked image is selected and will be shown solely. Javascript: This script binds the click events, and performs the ajax loading aswell as the image showing. Images page: this page is loaded by ajax and is shown in a div inside the article page.
EDIT:
I did some testing. The second time the div is loaded with an ajax call (the images page) it does "Create" all the images with the createImage function. Yet I only see the search bar and the "zoek" button. So the real problem is: the images aren't showing the second time!
The code (I left some things out which I think are irrelevant)
article:
<?php for($i = 0; $i < constant("MAX_PICS"); $i++) { ?>
<button <?php echo"id='select_portal$i' class='select_portal_class'";?> type="button">Selecteer</button>
<div <?php echo"id='dialog_form$i'";?> style="display:none; position:absolute; width:auto; height:auto; margin-left: auto; margin-right: auto; z-index:1;"></div>
<div <?php echo"id='selected_image$i'";?> style="display:block; width:auto; height:auto">
<?php if(isset($_GET['edit_artikel'])) { ?><img src="../images/<?php $beeldbank = Beeldbank::find_by_portal_id($artikel->portal_id); echo $beeldbank[0]->imagelib_id; ?>/<?php echo $artikel->portal_id;?>" id="selid" width="125" /> <?php } else {?>
<img src="../images/icons/no_image_found.png" alt="No image available" <?php echo"id='selid$i'";?> width="125" /> <?php } ?>
<input type="hidden" <?php echo"id='portal_id$i'";?> name="portal_id" value="<?php if(isset($_GET['edit_artikel'])) { echo $artikel->portal_id; } ?>" />
</div>
<div id="selected_portal"></div>
javascript:
$(document).ready(function() {
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = document.location.protocol + '//ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js';
var script2 = document.createElement('script');
script2.type = 'text/javascript';
script2.src = document.location.protocol + '//ajax.googleapis./ajax/libs/jqueryui/1.10.4/jquery-ui.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
document.getElementsByTagName('head')[0].appendChild(script2);
})();
$( ".select_portal_class" ).each(
function( intIndex ){
$(this).bind('click', function() {
loadAjaxFrame(intIndex);
});
}
);
});
function loadAjaxFrame(id)
{
var dialog = $("#dialog_form"+id);
//alert(dialog.attr('id'));
dialog.css("display", "block");
dialog.css("top", "auto");
dialog.css("left", "auto");
dialog.css("right", "auto");
dialog.css("backgroundColor", "white");
document.getElementById(dialog.attr('id')).style.visibility = 'visible';
tempDialogID = id;
if(!ajaxLoad){
dialog.load("imglib.php");
ajaxLoad = true;
}
}
function showImage()
{
var portal = $("#portal_id"+tempDialogID);
var dialog = $("#dialog_form"+tempDialogID);
var selid = $("#selid"+tempDialogID);
alert(tempDialogID);
var img = document.getElementById(selid.attr('id'));
img.src = imgname;
var portal_id = document.getElementById(portal.attr('id'));
portal_id.value= imgid;
document.getElementById(dialog.attr('id')).style.visibility = 'hidden';
dialog.unload();
ajaxLoad = false;
}
function create_image(src,alt) {
var img = document.createElement("img");
var objTo = document.getElementById('imagesDiv');
img.src = src;
img.alt = alt;
img.className= "imgid";
$(img).height(imageHeight);
$(img).width(imageWidth);
$(img).bind('click', 'span', function () { imgid = alt; imgname = src; showImage(); });
objTo.appendChild(img);
}
$('#formpie').on('submit', function(e) {
e.preventDefault();
var dialog = $("#dialog_form"+tempDialogID);
$.ajax({
type : 'POST',
url : "imglib.php",
data : $(this).serializeArray(),
success: function(data) {
dialog.html(data);
}
});
});
And finally the images page:
<script src="//ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/SelectImage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var photos = <?php echo json_encode($photoSources); ?>;
var photoAlts = <?php echo json_encode($photoAlts); ?>;
var photoTags = <?php echo json_encode($photoTags); ?>;
var photoCount= <?php echo $total_count; ?>;
photoCount = photoCount/10;
photoCount = Math.ceil(photoCount);
function buttonClicked(id){
var page = id;
photoPage = page*10;
minCount = photoPage-10;
maxCount = photoPage;
jQuery("#imagesDiv").html("");
createButtons();
$( "#imagesDiv" ).append( " <br/>");
populateDiv();
}
function createButtons() {
var i = 1;
var button= "";
while(i <= photoCount)
{
var button = document.createElement("BUTTON");
var buttonName= document.createTextNode(i);
button.appendChild(buttonName);
button.id = i;
jQuery(button).bind('click', { id: i}, function(event) {
var data = event.data;
buttonClicked(data.id);
});
var objTo = document.getElementById('imagesDiv');
objTo.appendChild(button);
i++;
}
}
$(".moreButton").click(function() {
maxCount += 10;
minCount += 10;
jQuery("#imagesDiv").html("");
populateDiv();
});
function populateDiv() {
for(var i = minCount;i < maxCount; i++)
{
if(i < <?php echo $total_count ?>)
{
create_image("../"+photos[i],photoAlts[i]);
$( "#imagesDiv" ).append( "<p style=\"display:inline; padding-left:10px;\">" + photoTags[i] + "</p><br/>" );
}
}
}
createButtons()
$( "#imagesDiv" ).append( " <br/>");
populateDiv();
});
</script> <?php
if(isset($_POST['submit'])) {
$artikel->portal_id = $_POST['portal_id'];
}?>
<fieldset>
Afbeelding zoeken
<form id="formpie" name="zoek" action="" method="POST">
<input type="hidden" name="zoek" value="zoek" id="zoek"/>
<input type="text" name="tags" size="31" id="tags"/>
<input type="submit" name="zoek" id="search" value="Zoek" />
</form>
<div id="imagesDiv" style="width:800px; height:780px;">
<label for="portal_id"></label>
</div>
</fieldset>
<div id="selected_img_div" style="display:none; width:auto; height:auto;">
<?php if($selected_image == NULL) { echo "No image selected"; }
else { echo '<img src="images/'.$selected_image.' class="selimgid"/>'; } ?>
</div>
- 2 Have you watched the request / response cycle in the browser's console to see if it provides any information? What version of jQuery are you using? – Jay Blanchard Commented Oct 20, 2014 at 12:29
- It does perform the ajax/get request when clicking on the button. I am using the version 1.11.0 I think! – Kraishan Commented Oct 20, 2014 at 12:35
-
It performs the request? Nothing is returned?
on()is preferred overbind()in later versions of jQuery. – Jay Blanchard Commented Oct 20, 2014 at 12:35 - I did use .on, that did nothing.. Literally nothing was done. Also I used .live, which is also not supported by my version. – Kraishan Commented Oct 20, 2014 at 12:37
-
2
You have an error in the images page. You check
if ($selected_image == NULL)but you don't initialize this variable anywere in this page, so I'm assuming in the first run you get here with this variable aready initialized but when you call it from AJAX context it does not have any value – mTorres Commented Oct 23, 2014 at 13:04
5 Answers
Reset to default 4If you load content dynamically and you want bind actions to them you shouldn't use the .bind(), .click() and .on([action], function(){}) functions. Because these functions can be only bind into elements which rendered at page loading.
So you should use that function:
$('body').on([action], [selector], function(){});
[action]: what type of binding do you want (ie: click, submit,...) [selector]: select the element what you want to bind (ie: '.moreButton')
For example, instead of that code:
$(".moreButton").click(function() {
maxCount += 10;
minCount += 10;
jQuery("#imagesDiv").html("");
populateDiv();
});
Use this code:
$('body').on('click' , '.moreButton', function() {
maxCount += 10;
minCount += 10;
jQuery("#imagesDiv").html("");
populateDiv();
});
Try changing to,
$('body').on('submit','#formpie', function(e) {
e.preventDefault();
var dialog = $("#dialog_form"+tempDialogID);
$.ajax({
type : 'POST',
url : "imglib.php",
data : $(this).serializeArray(),
success: function(data) {
dialog.html(data);
}
});
});
$('#formpie').on('submit', function(e) {
e.preventDefault();
var dialog = $("#dialog_form"+tempDialogID);
$.ajax({
type: 'POST',
url: "imglib.php",
data: $(this).serializeArray(),
success: function(data) {
dialog.html(data);
urlRefresh();
}
});
});
replace your code with it. I think there is a problem on url refresh. so Try it.
maybe you are using functions or events with new content?
if you are doing that, maybe you have the same problem like this
https://stackoverflow./a/26559809/2043592
I had same problem and it got resolved after adding below code in head tag.
<meta charset="UTF-8">
<meta http-equiv="cache-control"
content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 G`enter code here`MT" />
<meta http-equiv="pragma" content="no-cache" />