将所选数据发送回原始数据 window

Question

我有一个名为 bpSearch 的文件。在 bpSearch 中，我有一个 MODAL window，叫做 addNewModal。在 addNewModal 中，我有 2 个名为 partnerName 和 partnerCode 的 INPUT 字段。我有一个按钮，单击后会打开另一个模式 window，称为 searchPartnerModal。

这是 addNewModal 中 FORM 的一部分：

 <form action="bpSearch.php" method="get">
   <input type="text" readonly id="partnerName" name="partnerName" />
   <input type="text" readonly id="partnerCode" name="partnerCode" />
   <a href="#searchPartnerModal" data-toggle="modal" class="btn">Go</a>
 </form>

当用户单击 GO 时，它会打开 searchPartnerModal。

searchPartnerModal 是用户输入代码或名称（不必同时输入）的地方。但是在点击搜索时，我使用 AJAX 调用 returns JSON 我解析并最终在名为 pNames 的 UL 字段中使用 return。我们仍在 searchPartnerModal 中。

这是 searchPartnerModal 中的表单：

 <form action="bpSearch.php" method="get">
   <input type="text" id="pNameSearch" name="pNameSearch" />
   <input type="text" id="pCodeSearch" name="pCodeSearch" />
   <input type="button" class="btn" id="pSearch" name="pSearch" value="search" />
 </form>

当用户输入名称时，我使用 jquery 将其发送到 PHP 脚本，然后该脚本将 return UL 标签中的数据。

这里是 jquery，如果用户输入姓名，将进行搜索：

 $('#pSearch').on('click', function()
 {
   var partnername = $('#pNameSearch').val();
   if($.trim(partnername) != '')
   {
     $.post('api/pNameSearch.php', {partnername: partnername}, function(data)
     {
       var obj = JSON.parse(data);
       $('#pNames').empty();    
       var htmlToInsert = obj.map(function (item)
       {
         return '<li><a id="getPInfo" href="javascript:;"
         onclick="getPInfo()" data-selname="'+item.FULL_NAME+'" 
         data-selcode="'+item.PARTNER_CODE+'">'
          + item.FULL_NAME + ' - '
          + item.PARTNER_CODE + '</a></li>';
       }).join('');
       $('#pNames').html(htmlToInsert);
     });
   };
 });

使用此代码，我可以发送名称以在数据库 table 中搜索有效名称。数据通过 JSON 进行 return 编辑，并在 UL 标签（称为 pNames）内被解析并显示为 LI 标签，每个标签都有一个 A 标签，它们有自己的数据属性，称为 data-selname 和 data -selcode.

现在我需要做的是，一旦用户单击 pNames 中的 returned 数据链接之一，我需要将其发送回之前的模态 window，addNewModal。

这就是我卡住的地方。

如果你查看上面的 Jquery 内部，在我解析 JSON 之后，你会看到我在每个 [=57= 的 A 标签内创建了另一个 Javascript 函数]ed 数据，调用 getPInfo()。

这是我到目前为止对函数 getPInfo() 的了解：

 function getPInfo()
 {
   var selname = ($('#getPInfo').attr('data-selname'));
   var selcode = ($('#getPInfo').attr('data-selcode'));
 }

此时，我可以警告两个变量（selname 和 selcode）并让它们显示在警告中 window。

我想要做的是将这两个变量发送回各自的 INPUT 字段中的 addNewModal，称为 partnerName 和 partnerCode。

所以 selname 将转到 partnerName，selcode 将转到 partnerCode。

我没有显示 return 编辑数据的 PHP 脚本。

Answer 1

将锚 id=getPInfo 更改为 class=getPInfo 因为您有多个锚。接下来处理锚点的点击事件并提取数据属性，在addNewModal表单中设置相应的表单元素。以下内容应该基于我目前看到的标记。

$(function(){
   $('body').on('click', 'a.getPInfo', function (e) {
      var $a = $(e.srcElement || e.target);
      $('#partnerName').val($a.attr('data-selname'));
      $('#partnerCode').val($a.attr('data-selcode'));
      $('#searchPartnerModal').modal('hide'); //assuming bootstrap modal
   });
});

将所选数据发送回原始数据 window

Send selected data back to original window

javascript

jquery

json

modal-dialog

custom-data-attribute