How to propagate the text field to the modal dialogue?

StackOverflow https://stackoverflow.com/questions/7845107

Question

I'm trying to 'add a link' functionality to my site. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.

However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!

<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>
Was it helpful?

Solution

There's a couple of little things preventing your script from working Arman.

The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.

The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.

Given this, you can leverage the Events that the model library presents to populate this for you.

If you put this all together, you get this : 

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

Then you just need to modify the content a bit, and you should be right to go!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top