Loading dialog

Topics: Administration, General
Feb 24, 2014 at 11:12 AM
I am not able to properly integrate dialog using jquery, please see the following link, some explain me how can i make it work inside my module. I added it to my page code but it doesnt work

http://jqueryui.com/dialog/#animated
Feb 25, 2014 at 9:46 AM
Feb 25, 2014 at 10:15 AM
Can you show some code for that particular page where you used dialog ?
Feb 26, 2014 at 7:53 AM
u shouldd login , creeate videeo, attachedd it to housee, then viee source codde for js
Feb 26, 2014 at 10:06 AM
I cant register. no error message.
Feb 26, 2014 at 8:22 PM
Hi,
Maybe you should provide more details about how do you integrated the plugin into your module.
Feb 27, 2014 at 11:46 AM
Edited Feb 27, 2014 at 12:42 PM
Ok i am able to work it out but when i click "Open Dialog" it brings up a dialog and also a post back to server method "Signup" why? Basically i am trying show course information in dialog for each course when user clicks on the button corresponding to it.

View


@{
    var signup = (SignupViewModel)Model;

    Style.Include("Common.css");
}
 
@{
    Style.Include("datetime.css");        
    Script.Require("jQuery").AtFoot();
    Script.Require("jQueryUI").AtFoot();
    Script.Require("jQueryUI_Core").AtFoot();
    Script.Require("jQueryUI_Widget").AtFoot();
    Style.Require("jQueryUI_Orchard").AtFoot();
    Script.Include("hint.js").AtFoot();
}


@Html.ValidationSummary()

@using (Html.BeginFormAntiForgeryPost(Url.Action("Signup", "SignupOrLogin", new { area = "Course" }))) {
        
<div id="wrapper">
        <form action="" method="post">
                    @foreach (var item in Model.Courses)
                    {                      
                        <table style="margin-left:10px;margin-top:5px">
                            <tr>
                                <td style="width:50px">
                                    <input type="checkbox" name="chkcourse@(item.Course.Id)" value="@item.Course.Name" />
                                </td>
                                <td style="width:5px">
                                </td>
                                <td style="width:300px">
                                    <label>@item.Course.Name</label>
                                    
                                </td>                                
                                <td>
                                    <label style="width:100px">($@item.Course.Fees)</label>
                                </td>
                                <td>
                                                                                                                              
                                    <button id="opener">Open Dialog</button>

                                </td>
                            </tr>
                        </table>                                                                
                    }
    </form>
</div>
}  

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
    });
    </script>
 
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
Feb 27, 2014 at 12:28 PM
u shouldd ddisablee normal form submit