将所选数据发送回原始窗口

Send selected data back to original window

本文关键字：原始 窗口 数据      更新时间：2023-09-26

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

以下是addNewModal中表单的一部分：

 <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 调用来返回我解析并最终在名为 pName 的 UL 字段中返回的 JSON。 我们仍然在searchPartnerModal内部。

这是搜索PartnerModal中的表单：

 <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 脚本，然后该脚本将以 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);
     });
   };
 });

使用此代码，我可以发送名称以在数据库表中搜索有效名称。 数据通过JSON返回，并作为LI标签在UL标签（称为pNames）中解析和显示，每个标签都有一个带有自己的数据属性的A标签，称为data-selname和data-selcode。

现在我需要做的是，一旦用户点击 pNames 中返回的数据链接之一，我需要将其发送回上一个模态窗口 addNewModal。

这就是我卡住的地方。

如果你在上面的Jquery中查看，在我解析了JSON之后，你会看到我在每条返回数据的A标签中创建了另一个Javascript函数，称为getPInfo（）。

以下是到目前为止我为函数getPInfo（）得到的

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

此时，我可以提醒两个变量（selname 和 selcode），并让它们显示在警报窗口中。

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

因此，selname 将转到 partnerName，selcode 将转到 partnerCode。

我没有显示返回数据的 PHP 脚本。

将 anchor 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
   });
});
相关文章：