Pass Ajax POST variable to JQuery UI dialog

Question

Below is an Ajax POST variable I use to return some information to an ASP MVC3 View. However, I cannot get the .dialg() pop-up function to work. Right now you click on the icon that calls GetProgramDetails(pgmname), and nothing happens. First time using Ajax, so any suggestions would be appreciated. Thx!

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
    function GetProgramDetails(pgmname) {

        var request = $.ajax({
            type: 'POST',
            url: '/BatchPrograms/PopDetails',
            data: { programName: pgmname },
            dataType: 'html'
        });

        request.done(function (data) {
            $('#data').dialog();
        });
</script>

EDIT

I've updated the request.done function to include a simple alert to see if the code was being called. After stepping through with Chrome's debugger, I saw that the code inside was completely skipped over.

    request.done(function (data) {
    alert("HERE!");
        $('#programExplanation').html(data);
    });

SECOND EDIT

Here is the controller code the ajax is returning a value from:

    [HttpPost]
    public string PopDetails(string programName)
    {
        BatchPrograms batchprograms = db.BatchPrograms.Find(programName);
        if (batchprograms == null) return string.Empty;
        StringBuilder s = new StringBuilder();
        s.Append(batchprograms.ProgramName + " - " + batchprograms.ShortDescription);
        s.Append("<br />Job Names: " + batchprograms.PrdJobName + ", " + batchprograms.QuaJobName );
        s.Append("<br /> " + batchprograms.Description);
        return s.ToString();
    }

try my new post. it will try to open a dialog using the data js variable you got back. and cross your fingers! — Dave Alperovich
– Dave Alperovich, Commented Feb 19, 2013 at 17:15
Should that new block of code replace the var request = or the request.done, or be appended to either? — NealR
– NealR, Commented Feb 19, 2013 at 17:47
awesome, thx. Looks like this is more along the right path, however now it says Uncaught ReferenceError: data is not defined — NealR
– NealR, Commented Feb 19, 2013 at 17:58
one last thing. i made mistake again. check code. if this dont work, im out of ideas — Dave Alperovich
– Dave Alperovich, Commented Feb 19, 2013 at 18:08

Brocco · Accepted Answer · 2013-02-13 19:35:01Z

2

You need to use the success method to handle the callback, like so:

var request = $.ajax({
        type: 'POST',
        url: '/BatchPrograms/PopDetails',
        data: { programName: pgmname },
        dataType: 'html'
    }).success(function(data){ $('#data').dialog()} );

This will launch the dialog for you, but if you want to get the response data to work with it, you can have GetProgramDetails take a second parameter which is a callback for after the data is loaded like so:

function GetProgramDetails(pgmname, callback) {

    var request = $.ajax({
        type: 'POST',
        url: '/BatchPrograms/PopDetails',
        data: { programName: pgmname },
        dataType: 'html'
    }).success(callback);
}

This way after the response is received you can handle what to do with the data in your implementation of the callback, in this case it seems like you will be setting data in the dialog and launching the dialog.

answered Feb 13, 2013 at 19:35

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

3 Comments

Brocco Over a year ago

You are correct (I had never used the done function). But by adding the callback to the outer function it will allow him to better handle the response for the likely scenario of showing the data in the dialog.

NealR Over a year ago

Using the .success(callback) method you suggested, I tried to simply add this line of code to the GetProgramDetails() function: $('#callback').dialog();, which did not work. What is the syntax to use callback after the Ajax call?

Brocco Over a year ago

You can pass a function into the method by assigning the function to a variable... var handleCallback = function(data){ /* do stuff here */ }; then pass handleCallback into your GetProgramDetails function as the callback parameter.

Collectives™ on Stack Overflow

Pass Ajax POST variable to JQuery UI dialog

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related