Fatal编程技术网
  • javascript/
  • Javascript 如何使用jQueryUI将结果应用到html页面？

Javascript 如何使用jQueryUI将结果应用到html页面？

javascript jquery jquery-ui

Javascript 如何使用jQueryUI将结果应用到html页面？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我想使用jQueryUI（对话框）自动创建一个隐藏的输入标记。它的执行是正确的。但结果不能应用于html页面 我设计了一个按钮来调用对话框，如下所示： <input id="btn" type="button" value="Click me" /> <div id="dialog-box" title="My dialog"> <span>Any text here...</span> </div> 我的脚本代码是： functio

我想使用jQueryUI（对话框）自动创建一个隐藏的输入标记。它的执行是正确的。但结果不能应用于html页面

我设计了一个按钮来调用对话框，如下所示：

<input id="btn" type="button" value="Click me" />
<div id="dialog-box" title="My dialog">
<span>Any text here...</span>
</div>
我的脚本代码是：

function myFunction()
    {
        $(".result").append("<input id=\"CategoryId\" type=\"hidden\" value=\"abc\" />");
        $("#dialog-box").dialog("close");        
    }

    $("#dialog-box").dialog({
        autoOpen: false,
        height: 100,
        width: 250,
        modal: true,
        buttons: {
            "Ok": myFunction,
            "Cancel": function () {
                $("#dialog-box").dialog("close");
            }
        },
        close: function () {
        }
    });
    $("#btn").click(function () {
        $("#dialog-box").dialog("open");
    });
我已将这些线条粘贴在顶部：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
你能告诉我为什么以及如何修理它吗？谢谢

您的代码没有任何问题，运行良好，并向
添加了一个隐藏的输入。结果

为什么看不到
隐藏输入
源代码？

浏览器无法向您显示动态添加的项目（JavaScript添加的项目），如果您想查看它，应该使用检查元素或firebug（Firefox）

让我给你看一张图片：

看到这个了吗

编辑：最好看看你在做什么，我建议你将“隐藏”改为“文本”，直到测试结束。现在，您可以看到单击对话框中的“确定”后的结果

这里我要做的只是一点测试，我想在对话框中单击“确定”时显示一个警报，显示隐藏输入值中的内容。我的意思是在
my_函数
（在此之前，将class
result
更改为id
result
）：

var theVal
函数myFunction（）
{
$（“.myresult”）.html（“”）；
$（“#对话框”）。对话框（“关闭”）；
val=$（“.myresult输入”）.val（）；
警报（theVal）；
}
您可以使用Ajax发送此变量，也可以通过表单发送。

您的代码没有任何问题，运行良好，并向
添加了一个隐藏的输入。

为什么看不到
隐藏输入
源代码？

浏览器无法向您显示动态添加的项目（JavaScript添加的项目），如果您想查看它，应该使用检查元素或firebug（Firefox）

让我给你看一张图片：

看到这个了吗

编辑：最好看看你在做什么，我建议你将“隐藏”改为“文本”，直到测试结束。现在，您可以看到单击对话框中的“确定”后的结果

这里我要做的只是一点测试，我想在对话框中单击“确定”时显示一个警报，显示隐藏输入值中的内容。我的意思是在
my_函数
（在此之前，将class
result
更改为id
result
）：

var theVal
函数myFunction（）
{
$（“.myresult”）.html（“”）；
$（“#对话框”）。对话框（“关闭”）；
val=$（“.myresult输入”）.val（）；
警报（theVal）；
}
您可以使用Ajax发送此变量，也可以通过表单发送。

尝试将结果类更改为id，而jquery中的类搜索将返回一个数组

  $("#result").append("<input id=\"CategoryId\" type=\"hidden\"       value=\"abc\" />");

$（“#结果”）。追加（“”）；
及

或者，如果它需要是一个类，并且是第一个结果类元素，则使用

  $(".result")[0].append("<input id=\"CategoryId\" type=\"hidden\"       value=\"abc\" />");

$（“.result”）[0]。追加（“”）；
尝试将结果类更改为id，jquery中的类搜索将返回一个数组

  $("#result").append("<input id=\"CategoryId\" type=\"hidden\"       value=\"abc\" />");

$（“#结果”）。追加（“”）；
及

或者，如果它需要是一个类，并且是第一个结果类元素，则使用

  $(".result")[0].append("<input id=\"CategoryId\" type=\"hidden\"       value=\"abc\" />");

$（“.result”）[0]。追加（“”）；
我同意拉什的答案。。。您的代码看起来不错，不需要更改任何内容，要查看div result中的文本，请使用inspect元素而不是view source

这是我的密码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<input id="btn" type="button" value="Click me" />
<div id="dialog-box" title="My dialog">
    <span>Any text here...</span>
</div>

<div class="result"></div>

<script type="text/javascript">
    function myFunction()
    {   
        $(".result").html("<input id=\"CategoryId\" type=\"hidden\" value=\"abc\" />");
        $("#dialog-box").dialog("close");        
    }

    $("#dialog-box").dialog({
        autoOpen: false,
        height: 300,
        width: 250,
        modal: true,
        buttons: {
            "Ok": myFunction,
            "Cancel": function () {
                $("#dialog-box").dialog("close");
            }
        },
        close: function () {
        }
    });
    $("#btn").click(function () {
        $("#dialog-box").dialog("open");
    });
  </script>
</body>
</html>


这里有任何文字。。。
函数myFunction（）
{   
$（“.result”）.html（“”）；
$（“#对话框”）。对话框（“关闭”）；
}
$（“#对话框”）。对话框({
自动打开：错误，
身高：300，
宽度：250，
莫代尔：是的，
按钮：{
“Ok”：myFunction，
“取消”：函数（）{
$（“#对话框”）。对话框（“关闭”）；
}
},
关闭：函数（）{
}
});
$（“#btn”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
我同意拉什的答案。。。您的代码看起来不错，不需要更改任何内容，要查看div result中的文本，请使用inspect元素而不是view source

这是我的密码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<input id="btn" type="button" value="Click me" />
<div id="dialog-box" title="My dialog">
    <span>Any text here...</span>
</div>

<div class="result"></div>

<script type="text/javascript">
    function myFunction()
    {   
        $(".result").html("<input id=\"CategoryId\" type=\"hidden\" value=\"abc\" />");
        $("#dialog-box").dialog("close");        
    }

    $("#dialog-box").dialog({
        autoOpen: false,
        height: 300,
        width: 250,
        modal: true,
        buttons: {
            "Ok": myFunction,
            "Cancel": function () {
                $("#dialog-box").dialog("close");
            }
        },
        close: function () {
        }
    });
    $("#btn").click(function () {
        $("#dialog-box").dialog("open");
    });
  </script>
</body>
</html>


这里有任何文字。。。
函数myFunction（）
{   
$（“.result”）.html（“”）；
$（“#对话框”）。对话框（“关闭”）；
}
$（“#对话框”）。对话框({
自动打开：错误，
身高：300，
宽度：250，
莫代尔：是的，
按钮：{
“Ok”：myFunction，
“取消”：函数（）{
$（“#对话框”）。对话框（“关闭”）；
}
},
关闭：函数（）{
}
});
$（“#btn”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
如何检查它是否未添加？HTML源代码未更新，因为这是返回服务器的内容，不反映客户端所做的任何更改。若要检查它，请改为检查浏览器中的元素。也就是说，注意ID在文档ConetText上必须是唯一的，如果多次单击dialog
ok
按钮，您的逻辑可能会带来无效的HTML标记。如何检查未添加？HTML源代码未更新，因为这是返回服务器的内容，不反映客户端所做的任何更改。若要检查它，请改为检查浏览器中的元素。也就是说，注意ID在文档ConetText上必须是唯一的，如果多次单击dialog
ok
按钮，您的逻辑可能会带来无效的HTML标记。如何检查未添加？HTML源代码未更新，因为这是返回服务器的内容，不反映客户端所做的任何更改。若要检查它，请改为检查浏览器中的元素。也就是说，注意ID在文档上必须是唯一的 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<input id="btn" type="button" value="Click me" />
<div id="dialog-box" title="My dialog">
    <span>Any text here...</span>
</div>

<div class="result"></div>

<script type="text/javascript">
    function myFunction()
    {   
        $(".result").html("<input id=\"CategoryId\" type=\"hidden\" value=\"abc\" />");
        $("#dialog-box").dialog("close");        
    }

    $("#dialog-box").dialog({
        autoOpen: false,
        height: 300,
        width: 250,
        modal: true,
        buttons: {
            "Ok": myFunction,
            "Cancel": function () {
                $("#dialog-box").dialog("close");
            }
        },
        close: function () {
        }
    });
    $("#btn").click(function () {
        $("#dialog-box").dialog("open");
    });
  </script>
</body>
</html>