Question

I am using jquery that shows popup for input box. when the user inputs data and submits i redirected action to the same insert action so that the text field can be refreshed.at first pop up for input is shown but when i submit the popup shown previous remained as it is and new pop up for the input box is shown in which the input box is refreshed everytime i click insert.how can I close the previous popup and show only new one. and also please explain ways to empty the the textbox after user inputs data so that he can input next data.

jquery at my layout

 <script type="text/javascript">

            $.ajaxSetup({ cache: false });

            $(document).ready(function () {
                $(".openDialog").live("click", function (e) {
                    e.preventDefault();

                    $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        minWidth: 500,
                        minHeight: 100,
                        resizable: false,
                        close: function () { $(this).remove() },
                        modal: true
                    })

                    .load(this.href);
                });

                $(".close").live("click", function (e) {
                    e.preventDefault();
                    $(this).closest(".dialog").dialog("close");                    
                });
            });
    </script>
</head>

This shows popup when i click a button to get input box

below is my jquery in insert view

</script>
 <script type="text/javascript">
     $(function () {
         $('form').submit(function () {
                $("#popUp").dialog(
             {

                 title: $(this).attr("data-dialog-title"),
                 minWidth: 500,
                 resizable: false,

                 modal: true,

                 buttons: {
                     Close: function () {

                         $(this).dialog("close");

                     }
                 }



             }
             );

         });
     });


    </script>

this shows popup for the actions that is performed from this page. ie for error message and insert another user form. Hence the popup is generated from the layout view and again next popup from insert view.I am trying to close popup from layout view when the popup from insert view is generated or some way to clear the text field in insert view without showin second popup.What should i do.

Answer 1

This is the line you want in the code below. I put it inline with a comment to denote but I’ll put it here too for easy finding: $(this).find("input").val("");

    $('form').submit(function () {
            $("#popUp").dialog(
         {

             title: $(this).attr("data-dialog-title"),
             minWidth: 500,
             resizable: false,

             modal: true,

             buttons: {
                 Close: function () {
                     //This line below is what you need to clear the field
                     $(this).find("input").val("");
                     $(this).dialog("close");

                 }
             }



         }
         );

     });