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.

Is this code written in an external js file or as inline in the page itself? — rahul
– rahul, Commented Mar 22, 2011 at 6:57
Check your browser for Javascript errors and post them here. — Fareesh Vijayarangam
– Fareesh Vijayarangam, Commented Mar 22, 2011 at 7:00
this is written in an aspx file within a <script type="text/javascript"></script> tag. — Haxed
– Haxed, Commented Mar 22, 2011 at 8:26

jerone · Accepted Answer · 2011-03-22 07:11:44Z

1

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"
                }
            });
        });
    });
});

answered Mar 22, 2011 at 7:11

jerone

17.1k4 gold badges42 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil Hale · Accepted Answer · 2011-03-22 09:10:58Z

1

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.

answered Mar 22, 2011 at 9:10

Phil Hale

3,5012 gold badges38 silver badges50 bronze badges

Comments

Chowlett · Accepted Answer · 2011-03-22 09:16:23Z

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 divs 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".

edited Mar 22, 2011 at 9:16

answered Mar 22, 2011 at 7:02

Chowlett

47k21 gold badges119 silver badges153 bronze badges

6 Comments

cHao Over a year ago

It kinda looks like he wants to create a new div and put the stuff in it. But i've never seen it done quite that way before, and i'd be surprised if it worked, as i don't see it ever actually attached to the document.

Haxed Over a year ago

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

Haxed Over a year ago

Cant we use something like $('<div>')

Chowlett Over a year ago

@Haxed - Edited my answer. I'm not familiar with jQuery UI, but I think this is what you want.

Haxed Over a year ago

but if u chose $(<div>) you just dont need to specify an id. The benefit of this is in a large application you dont need to change the id all the time depending on the various ids in the partial views. I have posted the anwser.

|

Haxed · Accepted Answer · 2011-03-22 09:29:41Z

0

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;
    });

answered Mar 22, 2011 at 9:29

Haxed

2,93715 gold badges50 silver badges75 bronze badges

Collectives™ on Stack Overflow

What is wrong with my jquery code?

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related