javascript - Can't use divs from success function in AJAX - Stack Overflow

admin管理员组

文章数量:1431918

I don't know why this won't work for me.

  }).success(function(data){
    if(data.status == 'success'){
            // $("#useravatar").empty();

                for(i = 0;i < data.id.length; i++){
            $("#useravatar").prepend('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>');
            var dropDiv = $('#av'+data.id[i]);  // Code from here dont work. No error. tried alert(data.id[i]); and is fine.

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

            }

            }

});

If I use this code alone:

  var dropDiv = $('#useravatar');  

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

will work with that div.

My question is why the first divs are not working? How can I make it to let a div drop down with animation?

EDIT:

I have tried all above code in same file like that: but it didn't work also (the second function is not called or is not doing anything).

 function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../users/process.php",
       data: {getchatuser: "getchatuser"},
       cache: false,
       dataType: 'json',
       async: false
    }).success(function (dat) {
          if (dat.status == 'success') {
              //$("#useravatar").empty();
                 for (i = 0; i < dat.id.length; i++) {
                   $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar">' + dat.avatar[i] + '</div>');


                dropdivs(dat.id[i]);

        }
    }

  });
  }

 function dropdivs(idDiv) {
       // alert(idDiv); ----------> just to try this and it works got 112
     dropDiv = $('#av' + idDiv);
     dropDiv.css({
                 left: 130,
                  top: -190,
              opacity: 0,
              display: 'inline'
         }).animate({
                 left: 5,
                  top: 10,
              opacity: 1
     }, 7000, 'easeOutBounce');
  }

I don't know why this won't work for me.

  }).success(function(data){
    if(data.status == 'success'){
            // $("#useravatar").empty();

                for(i = 0;i < data.id.length; i++){
            $("#useravatar").prepend('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>');
            var dropDiv = $('#av'+data.id[i]);  // Code from here dont work. No error. tried alert(data.id[i]); and is fine.

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

            }

            }

});

If I use this code alone:

  var dropDiv = $('#useravatar');  

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

will work with that div.

My question is why the first divs are not working? How can I make it to let a div drop down with animation?

EDIT:

I have tried all above code in same file like that: but it didn't work also (the second function is not called or is not doing anything).

 function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../users/process.php",
       data: {getchatuser: "getchatuser"},
       cache: false,
       dataType: 'json',
       async: false
    }).success(function (dat) {
          if (dat.status == 'success') {
              //$("#useravatar").empty();
                 for (i = 0; i < dat.id.length; i++) {
                   $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar">' + dat.avatar[i] + '</div>');


                dropdivs(dat.id[i]);

        }
    }

  });
  }

 function dropdivs(idDiv) {
       // alert(idDiv); ----------> just to try this and it works got 112
     dropDiv = $('#av' + idDiv);
     dropDiv.css({
                 left: 130,
                  top: -190,
              opacity: 0,
              display: 'inline'
         }).animate({
                 left: 5,
                  top: 10,
              opacity: 1
     }, 7000, 'easeOutBounce');
  }

• javascript
• jquery
• ajax

Share Improve this question Follow edited Jul 16, 2016 at 20:56 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Apr 5, 2014 at 21:11 echo_Meecho_Me 37.2k55 gold badges6161 silver badges8181 bronze badges 10

• What is the structure of data? Did you check to see if it made it past the first if statement after the ajax success? – David Nguyen Commented Apr 8, 2014 at 21:42
• success works fine i have checked it and made alert with data returned. the structure of this data: {getchatuser: "getchatuser"} ? its just a string. – echo_Me Commented Apr 8, 2014 at 21:46
• It works for me.. Have you tried using the context with your selector? Like dropDiv = $('#av' + idDiv, $('#useravatar')); – Yes Barry Commented Apr 8, 2014 at 22:29
• Are you adding more than one element with the same id? That would likely bee an issue. – Ja͢ck Commented Apr 9, 2014 at 2:23
• 2 Please post the result of console.log(data.id) and console.log(data.avatar) – LeGEC Commented Apr 11, 2014 at 7:54

 |  Show 5 more ments

6 Answers 6

Sorted by: Reset to default 2 +25

• demo http://jsfiddle/5fKJf/4/
  • updated the code to show the bounce effect as suggested by bdrx
  • updated code to use object, + fancy avatar ;)

    var dat = {
        id: [1, 2, 3, 4],
        avatar: ['https://cdn2.iconfinder./data/icons/male-users-2/512/1-32.png',
            'https://cdn2.iconfinder./data/icons/male-users-2/512/14-32.png',
            'https://cdn2.iconfinder./data/icons/male-users-2/512/8-32.png',
            'https://cdn2.iconfinder./data/icons/male-users-2/512/2-32.png']
    };

    for (i = 0; i < dat.id.length; i++) {
        $("#useravatar").prepend($('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>').css({
            left: 130,
            top: -190,
            opacity: 0
        }).delay(i * 50).animate({
            left: 5,
            top: 0,
            opacity: 1
        }, 1500, 'easeOutBounce', function () {

        }));
    }

Try this:

var dropDiv = $('<div id="av' + data.id[i] + '" class="avatar">' + data.avatar[i] + '</div>');
$("#useravatar").prepend(dropDiv);

There is no need to use jQuery selector to find an element you created earlier. Code above should be a little faster solution.

This portion of the piece from original post may be issue

// `dat` may be `dat` (`data`) `response` from `request`,
// if `dat` does not have `status` property, i.e.g., `dat.status`,
// within `dat` ( `json` `object` ? ),
// `if` `condition` may return `false`,
// not continue to  pieces inside `if`'s `{}`
.success(function (dat) {
          if (dat.status == 'success') { }
})

Try this (pattern)

function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../users/process.php",
       data: {getchatuser: "getchatuser"},
       cache: false,
       dataType: 'json',
       async: false
    })
    .done(function(data, textStatus, jqxhr) {
             // `data` : `data` returned, ( `json` `object` ? )
             // `textStatus`, `string`, i.e.g., `success`
             // `jqxhr`, `object` 
             // if `textStatus` === `success`
          if ( textStatus === "success" ) {
             // `console.log()` `dat`, `textStatus`, `jqxhr`
             // returned from `request`
              console.log(data, textStatus, jqxhr);
             // below pieces not addressed, 
             // adjust, continue, based on `response`

             // $("#useravatar").empty();
             //    for (i = 0; i < data.id.length; i++) {
             //      $("#useravatar").prepend('<div id="av' + data.id[i] + '" class="avatar">' + data.avatar[i] + '</div>');   
             //   dropdivs(data.id[i]);
             //    };                         
          };    
     });
  };
getchatuser()

jsfiddle http://jsfiddle/guest271314/nqe44/

See http://api.jquery./jQuery.ajax/

How can i make it to let a div drop down with animation?

I recreated your example into a jsFiddle to test the scenario.

http://jsfiddle/ywYyR/6/

(Press RUN again after opening for first time)

function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../echo/json/",
       data: {
           json: '{"id":[3,4],"avatar":["https://cdn2.iconfinder./data/icons/male-users-2/512/8-32.png","https://cdn2.iconfinder./data/icons/male-users-2/512/2-32.png"], "status" : "success"}',
        delay: 1
       },
       cache: false,
       dataType: 'json',
       async : false,
       success: function (dat, textStatus) {
          console.log(dat);
          if (dat.status == 'success') {
              //$("#useravatar").empty();
                 for (i = 0; i < dat.id.length; i++) {
                   $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>');


                   dropdivs(dat.id[i]);

                  }
           }
       },
        error: function(jqXHR,textStatus,errorThrown){
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
 }

This fiddle does the following:

• in the start there are 2 users.
• make an ajax call.
• after ajax call finishes with success, the data contains 2 new users.
• add the 2 users to the HTML and animate them.

What I remend double checking is that:

• the #useravatar div exists when your request is returning.
• the .avatar class has a position value other than static.
• you have included the easing jQuery library so that easeOutBounce is available.

Instead of prepending the element then selecting it you can simply use prependTo() and do both in one line:

var dropDiv = $('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>').prependTo("#useravatar");

Did you try delegate event for the dynamic div ?

https://api.jquery./delegate/

本文标签： javascriptCan39t use divs from success function in AJAXStack Overflow