jquery attributes control and button click

Question

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

                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#popUp').html(result);
                    }
                });
                return false;
            });
        });
</script>
 <script type="text/javascript">
     $(function () {
         $('form').submit(function () {
             $("#popUp").dialog(
             {
                title: $(this).attr("data-dialog-title"),
                 minWidth: 500,




             );

         });
     });


    </script>

The above code gave a pop up box for button click in the insert page, but How can I control the attributes of the popup box such as resizable, modal:true,false, also how can I close this popup by a button click from another partial view called _error.

Did you look at the [jQuery UI Dialog documentation](http://jqueryui.com/demos/dialog/)? You seem to have already figured out how to set the `title` attribute... — nnnnnn, Jul 10 '12 at 10:47

score 1 · Answer 1 · answered Jul 10 '12 at 10:56

1

<script type="text/javascript">

 $(function () {
     $('form').submit(function () {
         $("#popUp").dialog(
         {
            title: $(this).attr("data-dialog-title"),
             minWidth: 500,
             modal: true/false,
             resizable: true/false,
             buttons: { "Ok": function() { $(this).dialog("close"); }
         );
     });
 });

</script>

answered Jul 10 '12 at 10:56

LorDex

2,591
1
20
32

after the dialog is closed I need to refresh the page what should I do? – Sanjay Maharjan Jul 11 '12 at 06:16

Mr. Mr. · Accepted Answer · 2012-07-10T11:10:56.223

This should work, as it did for me, enter this script in your page or create a test page so you can play with it a bit:

<script>
        $("#dialog-confirm").dialog({
            resizable: true,
            height: 340,
            width: 600,
            autoOpen: false,
            modal: true,

            buttons: {
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

</script>

Which should manipulate a div similar to this which should be in your page:

<div id="dialog-confirm" title="Confirm?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        Confirm.<br />
        <div class="preview">
            Message...

        </div>
        <br />Confirm?</p>
</div>

I located this using the dialog documentation at http://www.jquery.com

You can change the name of the button by replacing it with whatever you seem fit like so:

Cancel: function () {
    $(this).dialog("close");
}

becomes:

"New value here": function () {
    $(this).dialog("close");
});

after the dialog is closed I need to refresh page instantly.what should I do? — Sanjay Maharjan, Jul 11 '12 at 06:17
Why do you need to refresh the page? Or is there a part of the page that needs updating? If it is only a part of the page you could do a callback to update a small portion of the page rather than the entire page. — Mr. Mr., Jul 11 '12 at 07:37
Also, you need to mark this question as answered if you are satisfied with the answer, the new question should be posted as a new question rather than a comment here. — Mr. Mr., Jul 11 '12 at 12:30

jquery attributes control and button click

2 Answers2