Jquery - 如何从另一个模态的动态列表中以模态形式填充表单字段?

时间:2013-05-24 21:57:54

标签: php jquery jquery-ui

好的,我会尽可能地清楚这一点。

我有一个包含团队名单的页面,您可以添加和删除。当您决定添加播放器时,单击“添加播放器”按钮,使用Jquery-UI加载带有表单的对话框模式。您可以填写表格并提交,效果很好。我还添加了一个“搜索”按钮,当单击时,会加载另一个模式,让您搜索存在玩家的数据库。当它检索搜索结果时,它会将它们加载到OL中。现在这就变得棘手:

我希望有一个名为“使用播放器信息”的按钮,当点击它时,关闭搜索模式并使用所选播放器的信息自动填充表单字段。

以下是搜索模式的代码:

脚本(在head中):

<script type="text/javascript">
    $(function() {
        $(".search_button").click(function() {
            var search_word = $("#search_box").val();
            var dataString = 'search_word='+ search_word;

            if(search_word==''){
            } else {
                $.ajax({
                    type: "GET",
                    url: "searchdata.php",
                    data: dataString,
                    cache: false,
                    beforeSend: function(html) {

                        document.getElementById("insert_search").innerHTML = ''; 
                        $("#flash").show();
                        $("#searchword").show();
                        $(".searchword").html(search_word);
                        $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');

                    },
                    success: function(html){
                        $("#insert_search").show();
                        $("#insert_search").append(html);
                        $("#flash").hide();
                    }
                });
            }
            return false;
        });
    });
</script>

HTML

<div id="search" align="center">
    <div style="width:500px">
        <div style="text-align:center; padding-top:10px" class="title">Player Search</div>
        <div style="margin-top:20px; text-align:left">
            <form method="get" action="">
                <div style="margin:0; padding:0; float:left">
                    <input type="text" name="search" id="search_box" class='search_box'/> 
                </div>
                <div style="margin:0; padding:0; float:left; padding-left:8px; font-size:16px">
                    <input type="submit" value="Search" class="search_button" /> 
                </div>
            </form>
        </div>      
        <div style="width:480px; padding-left:10px; padding-right:10px;">
            <div id="flash"></div>
            <ol id="insert_search" class="update"> </ol>
        </div>
    </div>
</div>

这是实际搜索功能的php代码:

<li><div id="all">
    <div id="result"><div id="names"><div id="lnames"><?php echo $final_msg; ?></div><div id="fnames">&nbsp;<?php echo $firstName ?></div></div><div id="dobs"><?php echo $DOB ?></div><div id="ids"><?php echo $ID ?></div>
    <div id="add"><button type="button" id="add_player2" > Add Player </button></div></div>
</div></li>

以下是表单模式的代码,我希望将信息输入:

<script>
$(function() {
$( "#search" ).dialog({
autoOpen: false,
width: 550,
modal: true,
resizable: false,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;   
if(search_word=='')
{
}
else
{
$.ajax({
type: "GET",
url: "../../Search/searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {   
document.getElementById("insert_search").innerHTML = ''; 
$("#flash").show();
$("#searchword").show();
 $(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');
 },
 success: function(html){
  $("#insert_search").show();

  $("#insert_search").append(html);
  $("#flash").hide();

  }
 });
 }
 return false;
});

 });
</script>

<script>
$(function() {
$("#dialog-form").dialog({autoOpen:!1, height:380, width:350, modal:!0, buttons:{

  "Search for Player":function() {
      $( "#search" ).dialog( "open" );
  },

  "Add Player":function() {
$("#myForm").ajaxSubmit({success:function() {
  window.location = ""
}});
$(this).dialog("close")
}, 

Cancel:function() {
$(this).dialog("close")
}
},

create:function () {
    $(this).closest(".ui-dialog")
        .find(".ui-button:contains(Search for Player)") // the first button
        .addClass("green");
}}); 



$("#add-player").button().click(function() {
$("#dialog-form").dialog("open")
})
});
</script>

     <div id="dialog-form" title="Add Player">

<form name="myForm" id="myForm" action="../../php/add_player_comp_script_test.php?id=<?     echo $table ?>" method="post" enctype="multipart/form-data">
<fieldset>
<label for="last_name_add">Last Name</label>
<input type="text" name="last_name_add" id="last_name_add" class="text ui-widget-content ui-corner-all" />
<label for="first_name_add">First Name</label>
<input type="text" name="first_name_add" id="first_name_add" class="text ui-widget-content ui-corner-all" />
<label for="id_add">ID Number</label>
<input type="text" name="id_add" id="id_add" value="" class="text ui-widget-content ui-corner-all" />
<label for="jersey_add">Jersey Number</label>
<input type="text" name="jersey_add" id="jersey_add" value="" class="text ui-widget-content ui-corner-all" />
<label  for="dob_add">DOB (YYYY-MM-DD)</label>
<input type="text" name="dob_add" id="dob_add" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>

</div>

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

我假设这个 -

<li><div id="all">
    <div id="result"><div id="names"><div id="lnames"><?php echo $final_msg; ?></div><div id="fnames">&nbsp;<?php echo $firstName ?></div></div><div id="dobs"><?php echo $DOB ?></div><div id="ids"><?php echo $ID ?></div>
    <div id="add"><button type="button" id="add_player2" > Add Player </button></div></div>
</div></li>

是此成功函数中的html -

success: function(html){
         $("#insert_search").show();
         $("#insert_search").append(html);
         $("#flash").hide();
}

如果是这样,如果你返回一个json编码的数组json_encode()而不是html会更好 - 例如。

[{"lname":"Jones","fname":"Joe","dob":"2000-01-13","id":"6"},
 {"lname":"Jones","fname":"Jim","dob":"2001-04-04","id":"19"},
 {"lname":"Jones","fname":"Bob","dob":"1999-10-23","id":"32"}]
../../Search/searchdata.php上的php代码就像 -

while($row = _fetched_array_) {
      $players[] = array(
        'lname' => $row['lname'],
        'fname' => $row['fname'],
        'dob'   => $row['dob'],
        'id'    => $row['id']
      );
}
// Return JSON Encoded Array
echo json_encode($players);

然后,您可以为每个链接创建链接,在选择播放器时,它会将其添加到您的表单字段

success: function(html){
         players = $.parseJSON(html); //create json array in format above
         player_links = '';  // create blank variable
         for (var i = 0; i < players.length; i++){  // loop through each of the returned players
              // Echo Player First & Last Name and a link to add
              player_links += '<li>' + players[i].lname + ' ' + players[i].fname + ' <a href="javascript:void(0);" data-player="'+i+'" class="player_details">Add Player</a></li>';
                        }
         $("#insert_search").show();
         $("#insert_search").append(player_links);
         $("#flash").hide();
         // Bind .player_details click
         $('.player_details').click(function () {
            var pid = $(this).data('player');
                    $('#last_name_add').val(players[pid].lname);
                    $('#first_name_add').val(players[pid].fname);
                    $('#id_add').val(players[pid].id);
                    $('#dob_add').val(players[pid].dob);
                    $("#search").dialog("close");
         });
}

我创建了一个简单的例子作为jsFiddle - http://jsfiddle.net/8jcLQ/