What is wrong with my jquery code?
I have given my code below,
$(function() {
$("get-reservation-id").click(function() {
$(this).load("<%=Url.Action("GetReservation", "ModalPopup") %>",
funct开发者_JAVA技巧ion() {
$("<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.
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"
}
});
});
});
});
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.
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".
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;
});
精彩评论