Ajax呼叫第二次无法工作

时间:2014-10-20 12:27:05

标签: javascript php jquery ajax

我有这个ajax / php结构,在选择一个图像时效果很好。但是,如果我点击“选择器”以第二次执行相同的代码,则不会显示任何图像。 “ajax”页面确实正确加载。

基本上我拥有的东西;

文章页面:此页面显示10个按钮“Selecteer”。在这10个按钮下,你有一个div,按下Selecteer后会显示一些图像。单击其中一个图像时,单击的图像将被选中并将单独显示。 Javascript:此脚本绑定点击事件,并执行ajax加载以及显示的图像。 图片页面:此页面由ajax加载,并显示在文章页面内的div中。

编辑:

我做了一些测试。第二次使用ajax调用(图像页面)加载div时,它使用createImage函数“创建”所有图像。但我只看到搜索栏和“zoek”按钮。所以真正的问题是:图像没有第二次出现!

代码(我遗漏了一些我认为无关紧要的东西)

文章:

<?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.com/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.com/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);
        }
    });
});

最后是图片页面:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/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>

5 个答案:

答案 0 :(得分:3)

如果动态加载内容并且想要对它们执行绑定操作,则不应使用.bind(),. click()和.on([action],function(){})函数。因为这些函数只能绑定到在页面加载时呈现的元素。

所以你应该使用那个功能:

  

$('body')。on([action],[selector],function(){});

[action]:你想要什么类型的绑定(即:点击,提交,......) [selector]:选择要绑定的元素(即:'。moreButton')

例如,而不是代码:

$(".moreButton").click(function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

使用此代码:

$('body').on('click' , '.moreButton', function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

答案 1 :(得分:1)

$('#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();  
    }
});

});

用它替换你的代码..我希望url刷新有问题....所以试试吧..

答案 2 :(得分:1)

尝试更改为,

$('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);
    }
  });
});

答案 3 :(得分:0)

也许您正在使用包含新内容的功能或事件?

如果你这样做,也许你有类似的问题

https://stackoverflow.com/a/26559809/2043592

答案 4 :(得分:0)

我遇到了同样的问题,并且在head标签中添加了以下代码后,问题得以解决。

<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" />