Как распространять текстовое поле в модальном диалоге?

Я пытаюсь добавить функциональность ссылки на свой сайт. Для этого я использую Модальный плагин из Twitter Boostrap JS. На главной странице есть только поле "link" для заполнения, когда пользователь нажимает кнопку "добавить ссылку", модальный всплывает, и пользователь видит заполненную форму: ссылку, заголовок, теги. Однако я хочу, чтобы поле ссылки было предварительно заполнено значением с предыдущего шага. Это похоже на то, что происходит, когда вы сохраняете ссылку на delicious.com.

Однако проблема заключается в том, что когда я вставляю javascript внутри модального диалога, модальный диалог перестает работать. Любые идеи, как обойти эту проблему? Большое вам спасибо!

<html>
<head>
  <title>Example</title>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <!-- The Modal Dialog  -->
  <div id="modal-from-dom" class="modal hide fade">             
    <div class="modal-body">
        <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
                Peter

                <script type="text/javascript">
                    var linkURL = $('#linkURL').val();
                    //document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
                    document.write(linkURL);
                </script>


                <button type='submit' class='btn'>Add Link</button>
        </form>
    </div>
    </div>
  </div>
  <div class="container">
    <div class="wall-post">
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>

    </div>
  </div>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
</body>

Ответы

Ответ 1

Есть несколько мелочей, мешающих вашему script работать с Arman.

Во-первых, вам нужно загрузить сценарии jquery и bootstrap в заголовок. Браузер интерпретирует страницу по мере ее загрузки, а когда браузер набрасывает бит, который говорит $( "# linkURL" ), он не знает, что с ним делать.

Второй бит - вы можете знать только содержимое, которое пользователь ввел в поле LinkURL, когда они нажимают кнопку "Добавить ссылку". Таким образом, вы можете только реально заполнить модальный блок после этого.

Учитывая это, вы можете использовать События, которые предлагает библиотека модели, чтобы заполнить это для вас.

Если вы соедините все это, вы получите следующее:

<html>
    <head>
        <title>Example</title>
        <script src="scripts/jquery.min.js" type="text/javascript"></script>
        <script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
        <link rel="stylesheet" href="scripts/bootstrap.min.css">
        <link rel="stylesheet" href="main.css">

        <script type="text/javascript">

            $(document).ready(function(){
                $('#modal-from-dom').bind('show',function(){
                    $(".modal-body").html($("#linkURL").val());
                });
            });

        </script>
    </head>
    <body>
        <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">
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
    </body>
  </html>

Затем вам просто нужно немного изменить содержимое, и вы должны быть правы!