Using Ajax With jQuery

Question

I want to show a dialog which gets its content from server dynamically using ajax. If I use this

$('a.key').click(function(){
          var resp = 'grk';
          $dialog.html(resp);
          $dialog.dialog('open');
          return false;
      });

everything is perfect. When I click the link it shows me the dialog box. But If I try to do what I want which is to call ajax to fill the dialog content. It just does not work. I am very new to jquery please help.

This is the code that I use to call ajax and it does not work.

$('a.key').click(function(){
          var resp = 'grk';
          resp = $.ajax({
               type: "GET",
               url: "/cms/getdata",
               success: function(msg){
             }).responseText;

          $dialog.html(resp);
          $dialog.dialog('open');
          return false;
      });

Thank you..

What exactly is .responseText at the end of your .ajax call in the non-working code? You also have some brace-parenthesis mis-matches I would look in to first before you get too far debugging. — Brad Christie
– Brad Christie, Commented Feb 8, 2011 at 15:32
I had to look it up myself. It is supported; you'll have to search for it to see it in use: api.jquery.com/jQuery.ajax — Mathachew
– Mathachew, Commented Feb 8, 2011 at 15:34

Yuriy Vikulov · Accepted Answer · 2011-02-08 15:42:49Z

2

try

$('a.key').click(function(){
      var resp = 'grk';
      resp = $.ajax({
           type: "GET",
           url: "/cms/getdata",
           dataType: "html",
           success: function(msg){
            $dialog.html(msg);
            $dialog.dialog('open');
            }
           }).responseText;


      return false;
  });

edited Feb 8, 2011 at 15:42

answered Feb 8, 2011 at 15:34

Yuriy Vikulov

2,5095 gold badges26 silver badges32 bronze badges

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

3 Comments

gurkan Over a year ago

Thank you for your quick answer but it doesn't work. I think i am doing something wrong.

Yuriy Vikulov Over a year ago

check also dataType, also you can do alert(msg); before $dialog.html(msg); to check the result of return

Mathachew Over a year ago

It's missing a closing } for $.ajax. The } in }).responseText is the closing bracket for the success function.

igorw · Accepted Answer · 2011-02-08 15:49:30Z

1

Due to the asynchronous and non-blocking nature of JavaScript you must provide a callback which is executed once the ajax response has arrived. You can also use the jQuery.get shortcut.

$('a.key').click(function() {
    $.get("/cms/getdata", function(data) {
        $dialog.html(data);
        $dialog.dialog('open');
    });

    return false;
});

answered Feb 8, 2011 at 15:49

igorw

28.4k6 gold badges82 silver badges92 bronze badges

Comments

Mathachew · Accepted Answer · 2011-02-08 15:35:18Z

0

What's happening is the $dialog actions are occurring while the ajax request is still occurring. What you want to do is encapsulate the commands after the response is returned.

Doh! Yuriy beat me to it.

answered Feb 8, 2011 at 15:35

Mathachew

2,0242 gold badges18 silver badges31 bronze badges

Collectives™ on Stack Overflow

Using Ajax With jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest