2014-09-01 76 views
0

我有此代码将显示带有复选框的单词。正如你所看到的,它们是用逗号分隔的,我使用split()函数来爆炸字符串,使它成为一个数组。我用for循环来重复单词,但是我得到了一个“未定义”的单词。它应该用复选框自动显示单词,但单词显示为未定义。当我点击刷新时,它显示正确的单词,并有一个复选框。我不确定问题在哪里。对此有何想法?成功时在跨度中显示数组单词AJAX

$(document).on('click', '#wordlistsave', function() 
    { 

    var user = $("#getUser").val(); 
    var title = $("#wordbanktitle").val(); 
    var word = $("#wordbanklist").val(); 
    var postID = $("#getPostID").val(); 
    var words = word.split(", "); 


    for(var i = 0; i < words.length; i++) 
    {     
    var dataString = 'user='+user+'&title='+title+'&words='+words[i]+'&id='+postID; 

    <?php if (is_user_logged_in()): ?> 
     if(words[i]) 
     { 

     $.ajax({ 
     type: "POST", 
     url: "<?= plugins_url('wordlistsave.php', __FILE__) ?>", 
     data: dataString, 
     cache: true, 
     success: function(postID) 
     { 

     var testBoxDiv = $(document.createElement('div')).attr("id", words[i]); 
     testBoxDiv.css({"margin-bottom":"5px"}); 
     testBoxDiv.after().html('<span id="'+words[i]+'" style="cursor:pointer">\ 
     <img src="./wp-content/plugins/wordwork/admin/pdfpreview/delete_icon.png" title="Delete word"></span>\ 
     &nbsp&nbsp<input type="checkbox" name="words[]" value="'+ words[i]+ '">'+words[i]); 
     testBoxDiv.appendTo("#test_container"); 

     } 
     }); 
     } 


    <?php else: ?> 
     alert('Please login.'); 
    <?php endif; ?> 
    }  

    });  

回答

1

words是成功的功能可见,但在执行时不能为i价值肯定,因为它不syncronously执行。
因此,您可以将一个额外的参数,单词传递给ajax安装字典,并从成功函数访问它。就像这样:

$.ajax({ 
    type: "POST", 
    url: "<?=plugins_url('wordlistsave.php', __FILE__)?>", 
    data: dataString, 
    cache: true, 
    word : words[i], 
    success: function(postID) 
    { 

     var testBoxDiv = $(document.createElement('div')).attr("id", this.word); 
     testBoxDiv.css({"margin-bottom":"5px"}); 
     testBoxDiv.after().html('<span id="'+this.word+'" style="cursor:pointer"><img src="./wp-content/plugins/wordwork/admin/pdfpreview/delete_icon.png" title="Delete word"></span>&nbsp&nbsp<input type="checkbox" name="words[]" value="'+ this.word+ '">'+this.word); 
     testBoxDiv.appendTo("#test_container"); 

    } 
}); 
+0

不错的,它的工作原理。我只是调整了CSS,因为它在单词上方增加了一个空格。 – user3627265 2014-09-01 05:44:07

0

而且,你不需要构造数据串$阿贾克斯,你可以简单地传递数据,如:

$.ajax({ 
    type: "POST", 
    url: "<?=plugins_url('wordlistsave.php', __FILE__)?>", 
    data: { 
     user: user, 
     title: title, 
     words: words[i], 
     id: postID 
    }