What is wrong with my jquery code?

Question

I have given my code below,

        $(function() {
        $("get-reservation-id").click(function() {
            $(this).load("<%=Url.Action("GetReservation", "ModalPopup") %>", 
            function() {
                $("<div>").dialogr({
                    autoOpen: false,
                    width: 700,
                    title: 'Car Rental Application',
                    modal: true,
                    overlay: {
                        opacity: 0.5,
                        background: "black"
                    }
                });
            });
        });
    });

This code does not produce a jquery ui dialog pop up.

get-reservation-id : is the is given to an image placed within an anchor tag

GetReservation : is the partial view

ModalPopop : is the name of the controller(Where I have an action that returns GetReservation View)

Any Idea Why this does not work. On the other hand I Have written some code which does work. See Below

Working code:

$("#vehicle-search-id").click(function() {
        $("#vehicle-search-id").load("/ModalPopup/VehicleSearch", 
            function() {
                $("#vehicle-search").dialogr({ 
                    width: 700, 
                    modal: false, 
                    title: 'Car Rental Application'
                });
        });
    });

The reason why I chose to not use this is because I wanted to use <%=Url.Action("GetReservation", "ModalPopup") %> instead of /ModalPopup/VehicleSearch and wanted to use a more common $("<div>").dialogr({ than $("#vehicle-search").dialogr({

Many Thanks

My Aim

I want to create a pop up using a Jquery dialog and put a partial view in it.

Answer 1

Your jQuery selectors are of the wrong form. Use $("#get-reservation-id") to select the element with that id, and $("div") to select all div tags.

I also suspect you don't want to select all div s in your 5th line, but I don't know what you do want to select, so can't really make any suggestions. I suggest you have a look at the jQuery Selectors documentation.

Edit: I think I see what you're doing. You're grabbing the HTML response from Url.Action("GetReservation", "ModalPopup") and want to display a modal dialog with contents taken from the (presumably only) div in that response.

In that case, you do want $("div") on your line 5. Remember that jQuery selectors work like CSS selectors - $('div') selects all div elements, $('#foo') selects the element with id "foo", and $('.bar') selects all elements with a class of "bar".

Answer 2

I think you want this:

$(function() {
    $("get-reservation-id").click(function() {
        var that = $(this);
        that.load('<%=Url.Action("GetReservation", "ModalPopup") %>', 
        function() {
            that.dialog({
                autoOpen: false,
                width: 700,
                title: 'BMS Car Rental Application',
                modal: true,
                overlay: {
                    opacity: 0.5,
                    background: "black"
                }
            });
        });
    });
});

Answer 3

I've noticed you've got the autoOpen option set to false in your first example. So the first code snippet in your question would create a jQuery dialog, but won't open it. I would suggest either setting autoOpen to true (which is default) or including a line of code to open the dialog elsewhere.

Answer 4

Here is the rectified code

$(function() {

        $("#get-reservation-id").click(function() {

            $("<div>").dialogr({
                title: 'Title',
                minHeight: 400,
                minWidth: 600,
                width: 800,
                height: 600,
                modal: true,
                open: function() {
                $(this).load('<%= Url.Action("GetReservation", "ModalPopup") %>');
                },
                buttons: {
                    "Ok": function() { $(this).dialogr("close"); },
                    "Cancel": function() { $(this).dialogr("close"); }
                }
            });
        });

        return false;
    });