Javascript 如何在模式对话框中同时显示URL和URL标题？
我正在开发“添加链接”功能。为此，我使用了来自Twitter Boostrap JS的模态插件。在主页上，只有“链接”字段需要填写，当用户单击“添加链接”按钮时，会弹出一个模式，用户会看到完整的表单来填写3个字段：链接、标题、标签。但是，我希望1）链接字段预先填充上一步的值，2）标题字段预先填充url的标题 我可以分别做这两件事，但不能两者都做。事实上，下面的代码预先填充了链接字段，而标题字段为空。如果我取消对AJAX部分的注释并添加“onClick=”sendRequest（），然后代码通过执行php脚本“savePostAjax.php”对标题字段进行前缀填充，该脚本给出了与标题相呼应的url。但是，在这种情况下，链接字段没有被填充。我想，引导事件会以某种方式干扰我编写的AJAX。我尝试的一种方法是用JavaScript获取url标题，但不起作用。您如何解决这个问题在模式对话框中预先填写表单的链接和标题是否有问题？谢谢Javascript 如何在模式对话框中同时显示URL和URL标题？,javascript,html,jquery,twitter-bootstrap,Javascript,Html,Jquery,Twitter Bootstrap,我正在开发“添加链接”功能。为此，我使用了来自Twitter Boostrap JS的模态插件。在主页上，只有“链接”字段需要填写，当用户单击“添加链接”按钮时，会弹出一个模式，用户会看到完整的表单来填写3个字段：链接、标题、标签。但是，我希望1）链接字段预先填充上一步的值，2）标题字段预先填充url的标题 我可以分别做这两件事，但不能两者都做。事实上，下面的代码预先填充了链接字段，而标题字段为空。如果我取消对AJAX部分的注释并添加“onClick=”sendRequest（），然后代码通过执
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
<!-- AJAX
<script type="text/javascript" src="ajaxwebform/prototype.js"></script>
<script type="text/javascript">
function sendRequest() {
new Ajax.Request("savePostAjax.php",
{
method: 'post',
parameters: 'linkURL='+$F('linkURL'),
onComplete: showResponse
});
}
function showResponse(req){
$('show-title').value= req.responseText;
}
</script>
AJAX ENDS -->
<script type="text/javascript">
$(document).ready(function()
{
$('#modal-from-dom').bind('show',function()
{
$(".modal-body #wall-post").val($("#linkURL").val());
});
});
</script>
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Add Link</h3>
</div>
<div class="modal-body">
<!-- onsubmit='return false;' -->
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data' >
<div>
<input id='show-title' class='label-inline' name='title' type='text' size='100'>
</div>
<div>
<input id='wall-post' class='label-inline' name='linkURL' type='text' size='100'>
</div>
<div>
<input id='link-field' class='label-inline' name='topics' type='text' size='100' placeholder='topics'>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Add Link</a>
</div>
</div>
<!-- Enf of The Modal Dialog -->
<div class="container">
<div class="wall-post">
<input id='linkURL' class='label-inline' name='linkURL' type='text' size='100' autocomplete='off'>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
<!-- onClick="sendRequest()" -->
</div>
</div>
</body>
例子
$（文档）.ready（函数（）
{
$（“#来自dom的模态”）.bind（'show'，function（）
{
$（“.modal body#wall post”）.val（$（“#linkURL”）.val（））；
});
});
添加链接
添加链接
jQuery(document).ready(function($) {
function setTitle(url) {
$.post("savePostAjax.php", { linkURL: $('#linkURL').val() },
function(resp) {
$('show-title').val= resp;
});
};
$('#modal-from-dom').bind('show',function() {
var linkURL = $('#linkURL').val();
$('.modal-body #wall-post').val(linkURL);
setTitle(linkURL);
});
});
它不起作用的原因是因为您已经包括了prototype和jquery，它们都试图占用$。您可以通过在noConflict模式下使用jquery轻松解决这个问题，但我建议完全放弃prototype，因为在这种情况下使用两个库是没有意义的 我还没有实际运行它，但它应该是您所需要的。当然，在实际使用它之前，您需要添加一个小微调器，指示正在发出ajax请求，等等
jQuery(document).ready(function($) {
function setTitle(url) {
$.post("savePostAjax.php", { linkURL: $('#linkURL').val() },
function(resp) {
$('show-title').val= resp;
});
};
$('#modal-from-dom').bind('show',function() {
var linkURL = $('#linkURL').val();
$('.modal-body #wall-post').val(linkURL);
setTitle(linkURL);
});
});
为什么不使用jQuery来发送ajax请求呢？你可以用这种方式将sendRequest代码粘贴到“show”绑定中，这样你就少了一个库。谢谢你，Jerry！我实际上没有太多编写jQuery的经验，你能告诉我如何具体地将sendRequest代码粘贴到“show”绑定中吗？为什么不使用jQuery来发送ajax r还有equest？你可以用这种方式将sendRequest代码粘贴到“show”绑定中，这样你就少了一个库。谢谢你，Jerry！我实际上没有太多编写jQuery的经验，你能告诉我如何具体地将sendRequest代码粘贴到“show”绑定中吗？