使用jquery的模态时,coldfusion绑定失败

时间:2013-11-04 11:45:36

标签: jquery coldfusion jquery-ui-dialog cfform

您好我有一个cfoutput循环查询,我使用动态变量来显示客户端的布局,每个工作正常,除了绑定只有在我不使用jquery的模态时才有效。

我的冷冻代码

<cfoutput query = "RSSelect.rs">
<div id="editar_#idu_programa_detalle#" title="Editar">
<table>
    <tr>
        <td align="right" valign="middle">Estado:</td>
        <td align="left" valign="middle">
            <cfselect 
                title="id_Estado" 
                selected="#RSSelect.RS.idu_estado_salida#" 
                id="idu_estado_salida_#idu_programa_detalle#" 
                name="idu_estado_salida_#idu_programa_detalle#" 
                query="RSEstados.RS" 
                display="nb_Estado" 
                value="id_Estado" 
                queryPosition="below" 
                style="width:200px" 
                required="yes" 
                message="El estado es requerido" 
            >
                <option value="0" >Seleccione estado  </option>
            </cfselect>&nbsp;&nbsp;
        </td>
        <td align="left" valign="middle">Ciudad:
            <cfselect 
                title="Seleccione ciudad" 
                selected="#RSSelect.RS.idu_ciudad_salida#" 
                name="idu_ciudad_salida_#idu_programa_detalle#" 
                id="idu_ciudad_salida_#idu_programa_detalle#" 
                bind="cfc:#Application.CfcPath#.solicitudes_cm_uo.obtenerCiudades({idu_estado_salida_#idu_programa_detalle#@change})" 
                bindonload="yes"  
                value="id_Ciudad" 
                display="nb_Ciudad" 
                queryPosition="below"  
                style="width:200px" 
                required="yes" 
                message="El campo ciudad no debe de quedar vacio"
            >
            </cfselect>
        </td>
    </tr>
</table>
</div>
</cfoutput>

和jquery代码

<link rel="stylesheet" href="../css/smoothness/jquery-ui.css" />
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/jquery-ui.js"></script>
    <cfoutput query = "RSSelect.rs">
        <script>
            $(function()
            {
                $( "##editar_#idu_programa_detalle#" ).dialog(
                {
                    modal:true,
                    autoOpen: false,
                    height:999,
                    width:999,
                    buttons:
                    {
                        "Editar": function()
                        {
                            alert('se edito correctamente');
                            $( this ).dialog( "close" );
                        },
                        "Cancelar": function()
                        {
                            alert('se cancelo correctamente');
                            $( this ).dialog( "close" );
                        }
                    }
                });
            });
        </script>
        </cfoutput>

我会帮助你。

我也尝试过使用showmodaldialog,但它只适用于IE

使用模态对话框的任何其他选项都可以。

2 个答案:

答案 0 :(得分:2)

好像你的jQuery代码包含在HTML文档的标题中。当然,您的CFML包含在HTML文档的正文中。使用jQuery时,您需要注意只有在DOM可用时才能访问它们。您可以通过将jQuery代码包装在$(document).ready()函数中来避免其中的一些问题。像这样......

<cfoutput query = "RSSelect.rs">
    <script>
        $(document).ready(function()
        {
            $( "##editar_#idu_programa_detalle#" ).dialog(
            {
                modal:true,
                autoOpen: false,
                height:999,
                width:999,
                buttons:
                {
                    "Editar": function()
                    {
                        alert('se edito correctamente');
                        $( this ).dialog( "close" );
                    },
                    "Cancelar": function()
                    {
                        alert('se cancelo correctamente');
                        $( this ).dialog( "close" );
                    }
                }
            });
        });
    </script>
</cfoutput>

Here is the documentation on the ready() function.


此问题已在问题

中得到纠正的初始问题

我不确定这是否是问题,但您的<div>代码未正确定位。开场<div>代码位于<cfoutput>区块内......

<cfoutput query = "RSSelect.rs">
<div id="editar_#idu_programa_detalle#" title="Editar">

但是结束标记在</cfoutput>之后,因此在循环之外......

</cfoutput>
</div>

结束</div>标记应该在 cfoutput块中,这样每个打开的div也会关闭...

</div>
</cfoutput>

答案 1 :(得分:0)

基本上是调用一个打开模态对话框的函数。

嗯,我认为我的编码太多,但这里是=)。

<script language="javascript">
function OpenPop(idu_programa,idu_programa_detalle)
{
    var x = false;
    //alert('algo');
    x = showModalDialog('pop_editar_detalle_supervision.cfm?idu_programa='+idu_programa+'&idu_programa_detalle='+idu_programa_detalle,'dialogHeight:1000px;dialogWidth:1000px;');
    if (typeof x == 'undefined')
    {
        alert('Edicion cancelada');
    }
    else
    {
        document.getElementById('idu_programa_detalle_pop').value = idu_programa_detalle
        document.getElementById('idu_estado_salida_pop').value = x[0];
        document.getElementById('idu_ciudad_salida_pop').value = x[1];
        document.getElementById('fec_salida_pop').value = x[2];
        document.getElementById('opc_meridiano_salida_pop').value = x[3];
        document.getElementById('fec_supervision_inicial_pop').value = x[4];
        document.getElementById('fec_supervision_final_pop').value = x[5];
        document.getElementById('opc_meridiano_supervision_inicio_pop').value = x[6];
        document.getElementById('form1').submit();
    }       
}
</script>

然后我返回数组上的值,然后我将值放在隐藏的输入上,在提交后调用它们

这是返回数组的模态javascript代码。

<script language="javascript">
function Editar()
{
    var valoresDevueltos = new Array();
    valoresDevueltos[0] = document.getElementById('idu_estado_salida').value;
    valoresDevueltos[1] = document.getElementById('idu_ciudad_salida').value;
    valoresDevueltos[2] = document.getElementById('fec_salida').value;
    if(document.getElementById('amSalida').checked)
    {
        valoresDevueltos[3] = document.getElementById('amSalida').value;
    }
    else
    {
        valoresDevueltos[3] = document.getElementById('pmSalida').value;
    }
    valoresDevueltos[4] = document.getElementById('fec_supervision_inicial').value;
    valoresDevueltos[5] = document.getElementById('fec_supervision_final').value;
    //Checking which radioButton is checked
    if(document.getElementById('amSupervision').checked)
    {
        valoresDevueltos[6] = document.getElementById('amSupervision').value;
    }
    else
    {
        valoresDevueltos[6] = document.getElementById('pmSupervision').value;
    }
    window.returnValue = valoresDevueltos;
    window.close();
}
</script>

希望很明显,如果不让我知道改善我的答案,谢谢你的耐心=)