如何捕获jQuery对话框与父母之间的交互

-1

我在调用JavaScript调用的父HTML中调用。如何捕获jQuery对话框与父母之间的交互

<div class="data"> 
    <form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />&nbsp; 
    <a href="javascript:winOpen('LookupLocation.htm','bld')"> 
    <img src="image/search.gif" border="0" alt="Click here to find Building"></a> 
</div>

用于先前使用window.showModal其中如下面的JavaScript代码的代码已经被注释的模式窗口的JavaScript。我期待通过Jquery替换这个相同的调用并使用jQuery对话框代码。这是调用的JavaScript调用，它封装了一个jQuery对话框弹出窗口。以前，我可以使用modalwindow的返回对象，在父输入文本值中为无论在modalDialog窗口中选择的值设置一个值。现在，该代码已被注释掉，以显示它是什么以及我在其中查找的实现地点。我正在寻找一些使用jQuery对话框的替代方案。我的Dailog封装了另一个表，因此我无法将值返回给父表单。

function winOpen(urlVal, type) { 
    var printNames = new Object(); 
    var ind = [document.forms[0].elements["fireImpairForm.statusId"].selectedIndex].value; 
    ind = document.forms[0].elements["fireImpairForm.facility"].selectedIndex; 
    var facilityCode = document.forms[0].elements["fireImpairForm.facility"].item(ind).value; 
    var sub = facilityCode.substring(((facilityCode).indexOf("-")) + 1, (facilityCode).length); 
    var params = "?bldCode=" + document.forms[0].elements["fireImpairForm.bldCode"].value + "&floorCode=" + document.forms[0].elements["fireImpairForm.floorCode"].value + "&campusCode=" + sub + "&check=" + "check" + "&facilityCode=" + facilityCode; 

    /* 
      retObj = window.showModalDialog(urlVal+params,"","scroll:no;status:no;dialogWidth:620px;dialogHeight:600px;unadorned:yes;resizable=yes"); 
      if (retObj != null) { 
      document.forms[0].elements["fireImpairForm.bldCode"].value=retObj.code; 
      } 
      */ 
} 
var page = urlVal + params; 

var $dialog = $('<div></div>') 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>') 
    .dialog({ 
    autoOpen: false, 
    modal: true, 
    height: 625, 
    width: 500, 
    title: "Buildings" 
    }); 

$dialog.dialog('open'); 
}

的LookupLocation.htm弹簧控制器返回一个jsp

<BODY topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0> 
    <center> 
    <form name="locForm"> 
     <input type="hidden" name="code" /> 
     <DIV style="overflow:auto;clear:both; width:100%; height:525px; border :1px solid;"> 
     <TABLE onkeydown="if (event.keyCode=='13') return returnToParent()" cellpadding="0" cellspacing="1" id="resultTable" width="100%"> 
      <TBODY> 
      <c:if test="${empty resultList}"> 
       <tr> 
       <td bgcolor="buttonface"><b>No data found</b></td> 
       </tr> 
      </c:if> 
      <c:if test="${!empty resultList}"> 
       <tr> 
       <td>&nbsp;</td> 
       </tr> 
       <tr> 
       <td class="label">Search:</td> 
       <td class="content"> 
        <input name="searchFld" type="text" size=15 onChange=""> 
       </td> 
       <td class="content"> 
        <input type="button" value="Find" onclick="findString(document.locForm.searchFld.value)"> 
       </td> 
       </tr> 
       <tr> 
       <td nowrap class="searchTableHeader" align="center" STYLE="color:white">Select</td> 
       <td nowrap class="searchTableHeader" align="center" STYLE="color:white">Location Code</td> 
       <td nowrap class="searchTableHeader" align="center" STYLE="color:white">Description</td> 
       </tr> 
       <c:set var="evenCount" value="${0}" /> 
       <c:forEach var="result" varStatus="i" items="${resultList}"> 
       <c:set var="evenCount" value="${evenCount+1}" /> 
       <c:choose> 
        <c:when test="${evenCount % 2 == 0}"> 
        <tr id='row${evenCount}' class="even_row"> 
        </c:when> 
        <c:otherwise> 
        <tr id='row${evenCount}' class="odd_row"> 
        </c:otherwise> 
       </c:choose> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(${evenCount}); setLookupValuesOne("${result.code}");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content"> 
        <c:out value="${result.code}" /> 
       </td> 
       <td nowrap class="content"> 
        <c:out value="${result.description}" /> 
       </td> 
       </tr> 
       </c:forEach> 

      </c:if> 
      </TBODY> 
     </TABLE> 
     </DIV> 
    </form> 
    </center> 
</BODY>

任何帮助将不胜感激。我看了几个jQuery对话框的实现，我无法拼凑在一起如何让jQuery对话框之间有父窗体交互。 更新：添加标记请求的呈现的HTML

这里是更新的呈现的HTML。正常行为是，当单选按钮被选中时，窗口关闭并返回所选对象，该对象被设置为父窗体上的输入值，但现在返回对象没有被捕获，并且我无法设置输入值fireImpairForm.bldCode

<html> 
    <BODY topmargin=0 leftmargin=0 bottommargin=0 rightmargin=0> 
    <center> 
     <form name="locForm"> 
     <input type="hidden" name="code" /> 
     <DIV style="overflow:auto;clear:both; width:100%; height:525px; border :1px solid;"> 
      <TABLE onkeydown="if (event.keyCode=='13') return returnToParent()" cellpadding="0" cellspacing="1" id="resultTable" width="100%"> 
      <TBODY> 
       <tr> 
       <td>&nbsp;</td> 
       </tr> 
       <tr> 
       <td class="label">Search:</td> 
       <td class="content"> 
        <input name="searchFld" type="text" size=15 onChange=""> 
       </td> 
       <td class="content"> 
        <input type="button" value="Find" onclick="findString(document.locForm.searchFld.value)"> 
       </td> 
       </tr> 
       <tr> 
       <td nowrap class="searchTableHeader" align="center" STYLE="color:white">Select</td> 
       <td nowrap class="searchTableHeader" align="center" STYLE="color:white">Location Code</td> 
       <td nowrap class="searchTableHeader" align="center" STYLE="color:white">Description</td> 
       </tr> 
       <tr id='row1' class="odd_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(1); setLookupValuesOne("PC ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">PC </td> 
       <td nowrap class="content">10150 Place</td> 
       </tr> 
       <tr id='row2' class="even_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(2); setLookupValuesOne("ON ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">ON </td> 
       <td nowrap class="content">1019 Building</td> 
       </tr> 
       <tr id='row3' class="odd_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(3); setLookupValuesOne("OG ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">OG </td> 
       <td nowrap class="content">19137 Building</td> 
       </tr> 
       <tr id='row4' class="even_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(4); setLookupValuesOne("TO ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">TO </td> 
       <td nowrap class="content">2011 Building</td> 
       </tr> 
       <tr id='row5' class="odd_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(5); setLookupValuesOne("TT ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">TT </td> 
       <td nowrap class="content">30133 4 nw Street Building</td> 
       </tr> 
       <tr id='row6' class="even_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(6); setLookupValuesOne("TH ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">TH </td> 
       <td nowrap class="content">13939 Warehouse</td> 
       </tr> 
       <tr id='row7' class="odd_row"> 
       <td width="5%" align="center" class="content"> 
        <input type="radio" name="radioValue" onclick='highlight(7); setLookupValuesOne("N2 ");returnToParent();'> 
       </td> 
       <td width="15%" nowrap class="content">N2 </td> 
       <td nowrap class="content">40th Avenue Warehouse</td> 
       </tr> 
      </TBODY> 
      </TABLE> 
     </DIV> 
     </form> 
    </center> 
    </BODY> 
</html>

这里的jscript调用，如果有帮助。

我有一段时间试图格式化三个jscript调用。如果你需要它，我会以某种方式粘贴它。尽管对于我所要求的，他们并不重要。首先是根据所选行号奇数或偶数突出显示灰色和白色背景。下一个我添加了

function returnToParent() { 
    //var defer=$.Deferred(); 
    if (document.forms[0].code.value == null || document.forms[0].code.value == "") { 
    alert("Please select a row."); 
    return false; 
    } 
    var rowObj = new Object(); 
    rowObj.code = document.forms[0].code.value; 
    if (window.showModalDialog) { 
    self.returnValue = rowObj; 
    } else { 
    //opener.setData(rowObj); 
    } 

    //defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. 
    //$(window.opener.document).forms['dialogForm'].dailogFormVal.val=document.forms[0].code.value; 
    //$(window.opener.document).find().val(document.forms[0].code.value); 
    var parent = $(window.frameElement).parent(); 
    parent.find("#dailogFormVal").val(document.forms[0].code.value); 
    $(this).dialog("close"); 
} 

function setLookupValuesOne(codeValue) { 
    document.forms[0].code.value = codeValue; 
    var parent = $(window.frameElement).parent(); 
    parent.find("#dailogFormVal").val(document.forms[0].code.value); 
    //$(window.parent.document.getElementById("dailogFormVal")).val(document.forms[0].code.value); 
    //$(window.opener.document).forms['dialogForm'].getElementById['dailogFormVal'].value=codeValue;

最后结尾的“}”没有被添加到jscript代码中。

更新，以显示修改的JScript

console.clear();$dialog.append("<iframe id='dialogframe' style='border: 0px; width: 100%;height:100% '/>");$dialog.dialog({autoOpen: false, modal: true,width: "auto", height: "auto", title: "Buildings", buttons: [{ 
text: "Close", click: function() {  $(this).dialog('close'); } }]});function winOpenDlg(urlVal, type) { var printNames = new Object(); var ind =[document.forms[0].elements["fireImpairForm.statusId"].selectedIndex].value; ind = document.forms[0].elements["fireImpairForm.facility"].selectedIndex; var facilityCode = document.forms[0].elements["fireImpairForm.facility"].item(ind).value; var sub = facilityCode.substring(((facilityCode).indexOf("-"))+1,(facilityCode).length); if (type == 'floor') {   if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) {   alert('Please select a building.'); }else {  var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&campusCode="+sub+"&facilityCode="+facilityCode; 
    } 
} else if (type == 'room') { 
     if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) { 
      alert('Please select a building.'); 
     }else if (document.forms[0].elements["fireImpairForm.floorCode"].value.length <= 0) { 
      alert('Please select a floor.'); 
     }else { 
      var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&floorCode="+document.forms[0].elements["fireImpairForm.floorCode"].value+"&campusCode="+sub+"&check="+"check"+"&facilityCode="+facilityCode; 
     } 
} else { 
     var params="?campusCode="+sub+"&facilityCode="+facilityCode; 
}var page = urlVal + params; $('#dialogframe').attr('src', page);// yours would do this // here I create a sample set of text to inject //var sample = '<div id="findem">Hi I am found</div>';var dialogBody = $("#dialogframe").contents().find("body");//$($dialog.find('#dialogframe')[0].contentWindow.document.body);//$('#dialogframe').attr('src', page);// yours would do this // I do this for simplicity and demonstration//dialogBody.html("<div id='original'>First Text </div>"); //dialogBody.append(sample);// add a click event to the dialog contents, you would do different things dialogBody.on('click', '[id^=row]', function() { console.log("triggered !!"); 
console.log(this.id + ":" + this.innerHTML); // id of element clicked document.forms[0].elements["fireImpairForm.bldCode"]=document.forms[0].elements[this.id].value;}); $dialog.dialog('open');}

更新，以显示最新的Javascript

我更新了我的代码，并删除我的SRC位置的任何引用，但即使这样，同样的错误出现。

EditFireImpair.htm?permitIk=301 Uncaught TypeError: Cannot read property 'contentWindow' of undefined

以下定义的是我插入的java脚本代码，与您发布的内容几乎没有变化。该对话框不像打开小提琴页面那样打开。

<script> 
console.clear(); 

var $dialog = $('#mydialog'); 
$dialog.append("<iframe id='dialogframe' style='border: 0px; width: 100%;height:100% '/>");; 
$dialog.dialog({ 
    autoOpen: false, 
    modal: true, 
    width: "auto", 
    height: "auto", 
    title: "Buildings", 
    buttons: [{ 
    text: "Close Me", 
    click: function() { 
     $(this).dialog('close'); 
    } 
    }] 
}); 

function winOpenNewDlg(urlVal, type) { 
     var printNames = new Object(); 
    var ind =[document.forms[0].elements["fireImpairForm.statusId"].selectedIndex].value; 
    ind = document.forms[0].elements["fireImpairForm.facility"].selectedIndex; 
    var facilityCode = document.forms[0].elements["fireImpairForm.facility"].item(ind).value; 
    var sub = facilityCode.substring(((facilityCode).indexOf("-"))+1,(facilityCode).length); 
    if (type == 'floor') { 
     if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) { 
      alert('Please select a building.'); 
     }else { 
      var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&campusCode="+sub+"&facilityCode="+facilityCode; 
     } 
    } else if (type == 'room') { 
      if (document.forms[0].elements["fireImpairForm.bldCode"].value.length <= 0) { 
       alert('Please select a building.'); 
      }else if (document.forms[0].elements["fireImpairForm.floorCode"].value.length <= 0) { 
       alert('Please select a floor.'); 
      }else { 
       var params="?bldCode="+document.forms[0].elements["fireImpairForm.bldCode"].value+"&floorCode="+document.forms[0].elements["fireImpairForm.floorCode"].value+"&campusCode="+sub+"&check="+"check"+"&facilityCode="+facilityCode; 
      } 
    } else { 
      var params="?campusCode="+sub+"&facilityCode="+facilityCode; 
    } 
    var page = urlVal + params; 
    //$('#dialogframe').attr('src', page);// yours would do this 
    // here I create a sample set of text to inject 
    var sample = '<div id="findem">Hi I am found</div>'; 

    var dialogBody = $($dialog.find('#dialogframe')[0].contentWindow.document.body); 
    // $('#dialogframe').attr('src', page);// yours would do this 
    // I do this for simplicity and demonstration 
    dialogBody.html("<div id='original'>First Text </div>"); 
    dialogBody.append(sample); 

    // add a click event to the dialog contents, you would do different things 

    dialogBody.on('click', '*', function() { 
    console.log("triggered !!"); 
    console.log(this.id + ":" + this.innerHTML); // id of element clicked 
    document.forms[0].elements["fireImpairForm.bldCode"]=document.forms[0].elements[this.id].value; 

    }); 

    $dialog.dialog('open'); 
} 


</script>

，这是HTML

<div style="display:none; visibility:hidden;"> 
    <div id="mydialog"> 
    <input type="hidden" id="bldCode" /> 
    </div> 
</div> 

    <a href="javascript:winOpenNewDlg('LookupLocation.htm','bld')">              
          <img src="image/search.gif" border="0" 
          alt="Click here to find Building"></a>

来源

2016-04-29 user2358826

'VAR页= urlVal +参数;'注意'params'是另一个函数内部声明，因此超出范围并且urlVal未定义 - 在关闭时读取。 –

对不起，我删除了一些注释掉的代码，并有一个额外的“{”。我编辑了代码并删除了额外的“{” – user2358826

是否可以发布您的呈现html？ –

好，而不是深入到你的细节，让我们从一个非常简单的例子有一些意见：见这里发挥它：https://jsfiddle.net/MarkSchultheiss/kkwpb5b7/

编辑：请注意我如何在对话框内容的代码中放置一个点击事件。这与你想要做的事情类似。

我把一个简单的SVG图标，你的是一个GIF（所以我们有点东西）。

标记（对于我的例子，你的略有不同）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<div class="data"> 
    <form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />&nbsp; 
    <a class='lookuplocation' data-url="LookupLocation.htm" ,data-type="bld"> 
    <img border="0" alt="Click here to find Building"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> 
     <circle cx="50" cy="50" r="25" stroke="black" stroke-width="5" fill="red" /> 
    </svg> 
    </a> 
</div> 
<div style="display:none; visibility:hidden;"> 
    <div id="mydialog"> 
    </div> 
</div>

现在看到我的 “隐藏” 对话框包装？让我们来使用，而不是一些行脚本，然后注入一些内容放到这个（你会使用src）

var $dialog ={}; 
$(document).ready(function()(
    $dialog = $('#mydialog'); 
    $dialog.append("<iframe id='dialogframe' style='border: 0px; width: 100%;height:100% '/>");; 
    $dialog.dialog({ 
     autoOpen: false, 
     modal: true, 
     width: "auto", 
     height: "auto", 
     title: "Buildings", 
     buttons: [{ 
     text: "Close Me", 
     click: function() { 
      $(this).dialog('close'); 
     } 
     }] 
    }); 
}); 

function winOpen(urlVal, type) { 
    var params = '?bldCode=howdy'; // put your stuff in here 
    var page = urlVal + params; 
    // $('#dialogframe').attr('src', page);// yours would do this 
    // here I create a sample set of text to inject 
    var sample = '<div id="findem">Hi I am found</div>'; 

    var dialogBody = $($dialog.find('#dialogframe')[0].contentWindow.document.body); 
    // $('#dialogframe').attr('src', page);// yours would do this 
    // I do this for simplicity and demonstration 
    dialogBody.html("<div id='original'>First Text </div>"); 
    dialogBody.append(sample); 

    // add a click event to the dialog contents, you would do different things 
    dialogBody.on('click', '*', function() { 
    console.log("triggered !!"); 
    console.log(this.id + ":" + this.innerHTML); // id of element clicked 
    }); 
    $dialog.dialog('open'); 
} 
// took this out of the markup because I don't like them there. 
$('.data').on('click', 'a.lookuplocation', function() { 
    winOpen($(this).data('url'), $(this).data('type')); 
});

来源

2016-04-29 18:21:37

感谢马克为您的代码。我玩这个，我需要帮助在dialog.on（点击..实现。在我的情况下，我有一个呈现HTML的单选按钮.id s将是row1，row2 row3等，第二个将包含值如果你粘贴的HTML我可以看到它的样子..同时，我需要关闭选择。 – user2358826

当我用嵌入式src运行时得到这个异常.EditFireImpair.htm？permitIk = 301 Uncaught TypeError ：无法读取属性'contentWindow'undefinedwinOpenDlg @ EditFireImpair.htm？permitIk = 301（匿名函数）@ VM6234：1.我在这一行得到错误.. var dialogBody = $（$ dialog.find（'＃dialogframe'）[ 0] .contentWindow.document.body）; – user2358826

基本上这就是'#dialogframe'）[0]'没有定义。您是否使用与'dialogframe'相同的标记作为ID？ –

如何捕获jQuery对话框与父母之间的交互

回答

相关问题