Question

我不明白如何做正确的事情。通过此查询，我获得了一个带有文件名的JSON：

$.getJSON("http://api.server.com/my/?callback=?",
    function(data){
        var results = [];
        $.each(data['results'], function(i, result) {
            results.push("<div class='accordion-group span4'><div class='accordion-heading'>Video Frame<blockquote><a href='http://server.com/video/?my=" + result.File + "' target='_blank'><img src='http://jpg.server.com/" + result.File + ".jpg' class='img-polaroid'/></a><p>" + result.ListId + "</p><small>" + result.OwnerId + "</small><small>" + result.updatedAt + "</small>    </blockquote><a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#" + result.File + "'>Share video</a></div><div id='" + result.File + "' class='accordion-body collapse'><div class='accordion-inner'><form class='share_file_form'>Set list<input name='nd' id='user_id' type='hidden'><input name='file' value = '" + result.File + "' type='hidden'><div class='list'></div><input type='text' placeholder='New list'><div class='modal-footer'><button class='share_file_submit'>Share video</button></div></form><div id='user_info_result'></div></div></div></div>");
        });
        $('#mytile').html(results.join(""));
    }
);

通过此查询，我获得了一个带有标签名称的JSON：

$.getJSON("http://api.server.com/list/?callback=?",
    function(data){
    var results = [];
    $.each(data['results'], function(i, result) {
        results.push("<label class='radio'><input type='radio' name='list' id='" + result.List + "' value='" + result.List + "' checked>" + result.List + "</label>");
    });
    $('.my_list').html(results.join(""));
    }
);

最后，我需要显示一个文件列表。每个文件旁边应显示一个带有文件名和标签列表的表单：

$(document).on('click', '.share_file_form', function() {
    $('.share_file_form').validate({
        submitHandler: function(form) {
            $.ajax({
                type: "GET",
                url: "http://api.server.com/set/",
                timeout: 20000,
                data: $(form).serialize(),
                beforeSend: function() {
                    $(".share_file_submit").attr("disabled", true);
                    $(".share_file_submit").html("Send <img src='http://src.server.com/loadr.gif' border='0'/>");
                },
                success: function(msg){
                    console.log("Data Saved: " + msg);
                    $("#share_file_submit").attr('disabled', false);
                    $("#share_file_submit").html("Share video");
                    $("#user_info_result_2").html(msg);
                },
                error: function(msg){
////////////////            $('#user_info_result_2').html("<div class='alert alert-error span3'>Failed from timeout. Please try again later. <span id='timer'></span> sec.</div>");
                }
            });
        }
    });


});

所有这一切都有效。

问题是如何确保每个表单单独工作？现在只适用于第一种形式。如果按下其他表格上的按钮仍然可以使用第一个表格。

Answer 1

HMM。我想'我知道你想要什么......

如何将第二个调用包装在一个方法中，或者两个包含ala。

 function fireJSON(){
    var func1 = function(){
      //your first json code
      func2(); // call your second json code
    }
    var func2 = function(){
          // second json code
    }
     return {
       func1: func1
     }

   }


   fireJSON().func1();

Answer 2

您的错误在于您识别用户点击的表单的方式。以下是问题所在：

$('.share_file_form').validate({

独立于您点击的内容，您将始终使用此选择器获得第一个表单。

以下是您需要的内容：

$(document).on('click', '.share_file_form', function(event) {
    $(event.target).validate({
        submitHandler: function(form) {

两个JSON请求的列表

2 个答案: