Как отобразить как URL, так и заголовок URL в модальном диалоге? - PullRequest
Новая
       2

Как отобразить как URL, так и заголовок URL в модальном диалоге?

1 голос
/ 24 октября 2011

Я работаю над функцией добавления ссылки. Для этого я использую модальный плагин от Twitter Boostrap JS. На главной странице есть только поле «ссылка» для заполнения, когда пользователь нажимает кнопку «добавить ссылку», появляется модальное окно, и пользователь видит полную форму для заполнения 3 полей: ссылка, заголовок, теги. Тем не менее, я хочу, чтобы 1) поле ссылки было предварительно заполнено значением из предыдущего шага И 2) поле заголовка предварительно заполнено заголовком URL.

Я могу сделать каждый из них по отдельности, но я не могу сделать оба. Фактически, код ниже предварительно заполняет поле ссылки, оставляя поле заголовка пустым. Если я раскомментирую часть AJAX и добавлю 'onClick = "sendRequest ()', то код заполняет поле заголовка, выполняя скрипт php 'savePostAjax.php', который задает URL, повторяет заголовок. Однако в этом случае поле ссылки Я не думаю, что события Bootstrap каким-то образом влияют на AJAX, который я написал. Один из подходов, которые я попробовал, - получить заголовок URL-адреса в JavaScript, не сработал. Как бы вы решили проблему с предварительным заполнением ОБА ссылки и заголовка? формы в модальном диалоге? Спасибо! 

<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>

1 Ответ

1 голос
/ 24 октября 2011

Причина, по которой это не работает, в том, что вы включили прототип и jquery, оба из которых пытаются занять $. Вы можете легко обойти это, используя jQuery в режиме noConflict, но я бы порекомендовал полностью отказаться от прототипа, поскольку в такой ситуации не имеет смысла использовать две библиотеки.

Я на самом деле не запускал это, но это должно быть то, что вам нужно. Конечно, перед тем, как использовать его, вы захотите добавить небольшой счетчик, указывающий, что выполняется запрос 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);
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...