CODEWITHSUNDEEP
jquery
useranon
useranon

Reputation: 29514

Updating an jquery with the ajax post result

i am trying to convert prototype to jquery of what i did.

My prototype is

 $$(".user-link").each(function(el){
el.observe("mouseover", function(event) {
    _selectedLinkEl = el;
    _detailEl = event.element().next();
    _detailEl.show();
    _href=el.readAttribute('href').split("/")[2];

      new Ajax.Request('/users/user_detail/?name='+_href, {
    onSuccess: function(transport) {
        if (200 == transport.status)
            _detailEl.update(transport.responseText);
        }
                                    });

    _body.observe("mouseover", _bodyMouseOverFunction);
});
});

   var _bodyMouseOverFunction = function(event) {
if(event.element() != _selectedLinkEl &&
        event.element() != _detailEl &&
        !event.element().ancestors().include(_detailEl)) {
_detailEl.hide();
_body.stopObserving("mouseover", _bodyMouseOverFunction);
    }
 };

How to change the above to jquery ?

user-link is a class name that is present in many of the links. I am trying to perform a ajax request on mouse over this link.

EDIT:

I have tried as jQuery(document).ready(function(){

                 jQuery(".user-link").hover(function() {


                       jQuery(this).next().show();
           var href=jQuery(this).attr("href");

           href= href.split("/")[2];

       jQuery.post('http://localhost:3000/users/user_detail/?name='+href,
         function(data){
             alert("Data Loaded: " + data);

            }

           );


      }); //hover
  });// doc ready

I am getting the alert with the result of the ajax request . How to update an element with the result obtained ??

Upvotes: 0

Views: 151

Answers (1)

Paul Schreiber
Paul Schreiber

Reputation: 12589

Hopefully this will help get you started:

$(".user-link").mouseover(function(event) {
    _selectedLinkEl = this;
    _detailEl = event.target.next();
    _detailEl.show();
    _href=$(this).attr('href').split("/")[2];

    $.get('/users/user_detail/?name='+_href,
      function(data, textStatus, xhr) {
        if (200 == xhr.status) {
            _detailEl.text(textStatus);
        }
      }
    );

  $(_body).mouseover(_bodyMouseOverFunction);
}); // user-link

var _bodyMouseOverFunction = function(event) {
  if(event.target != _selectedLinkEl &&
      event.target != _detailEl &&
      $.inArray(_detailEl, event.target.parents() ) == -1) {
        _detailEl.hide();
        $(_body).unbind("mouseover", _bodyMouseOverFunction);
    }
 };

Upvotes: 1

Related Questions