Open jQuery dialog with a parameter

Question

I have an MVC view from which I want to popup a jQuery dialog. In the dialog, I want to render a view, but the controller action requires a parameter. Here's what I have:

$(document).ready(function () {
            $dialog = $('<div></div>')
            .dialog({
            open: function(event, ui) {
                $(this).load("@Url.Action("Edit", "Agenda", new {id = ???})"); //Line to fix
            },
            autoOpen: false
        });

And further down, I have this code calling the dialog. Note that the id I want to pass to the controller action is calEvent.id

$('#calendar').fullCalendar({
    eventClick: function (calEvent, jsEvent, view) {
        $dialog.dialog('open');
    }
});

So the question is: How can I adapt my code to pass calEvent to the id parameter?

Ben Hildebrand · Accepted Answer · 2013-02-20 14:13:09Z

6

jQuery provides a method which store data for you, no need to use a dummy attribute or to find workaround to your problem.

use the .data() method on the jquery dialog object to bind any data you want to your dialog when calling it, and the same method within the open() function to read it out:

$('#calendar').fullCalendar({
eventClick: function (calEvent, jsEvent, view) {
    $dialog.data('id', calEvent.id).dialog('open');
}
});

and

$(document).ready(function () {
        $dialog = $('<div></div>')
        .dialog({
        open: function(event, ui) {
            url = "@Url.Action("Edit", "Agenda", new {id = "XXX"})";
            url.replace( "XXX", $(this).data('id') );
            $(this).load(url);
        },
        autoOpen: false
    });

edited Feb 20, 2013 at 14:13

answered Feb 20, 2013 at 14:08

Ben Hildebrand

1042 bronze badges

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

1 Comment

Ben Hildebrand Over a year ago

Sorry I did not notice that you render the Url server-side. You would have to replace a part in the pre-rendered URL. I edited the code accordingly.

Darin Dimitrov · Accepted Answer · 2013-02-20 13:52:26Z

2

Your question is not very clear. If the parameter you want to pass to your controller is a javascript variable you could use the following:

open: function(event, ui) {
    var url = '@Url.Action("Edit", "Agenda")';
    $(this).load(url, { id: someJavascriptVariable });
}

Take a look at the documentation of the .load() method. The second argument allows you to pass additional parameters for the AJAX request.

answered Feb 20, 2013 at 13:52

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Comments

Khalid · Accepted Answer · 2013-02-20 18:17:20Z

0

Simply, It should work as

$(document).ready(function () {
        $dialog = $('<div></div>')
        .dialog({
        open: function(event, ui) {
            $(this).load("@Url.Action("Edit", "Agenda", new {id = '<%= calEvent.id %>'})"); //Line to fix
        },
        autoOpen: false
    });

answered Feb 20, 2013 at 18:17

Khalid

1944 bronze badges

Collectives™ on Stack Overflow

Open jQuery dialog with a parameter

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related