如何在模态对话框中显示URL和URL标题

我正在研究'添加链接'功能。为此，我使用了Twitter Boostrap JS中的模态插件。在主页上，只有"链接"字段需要填写，当用户点击"添加链接"按钮时，会弹出一个模式，用户会看到完整的表单，需要填写3个字段:链接、标题、标签。但是，我想要1)链接字段预填充上一步的值和2)标题字段预填充url的标题。

我可以分别做这两件事，但我不能两者都做。实际上，下面的代码预先填充了链接字段，使标题字段为空。如果我取消AJAX部分的注释并添加'onClick="sendRequest()'，那么代码将通过执行php脚本'savePostAjax.php'来在标题字段中添加前缀，该脚本给出了响应标题的url。但是，在这种情况下，链接字段没有被填充。我猜，Bootstrap事件以某种方式干扰了我编写的AJAX。我尝试过的一种方法是在JavaScript中获取url标题，但没有成功。如何解决在模态对话框中预先填写表单链接和标题的问题?谢谢!

<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">&times;</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>

它不起作用的原因是您包含了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);
    });
});

相关内容

最新更新

热门标签：