AJAX avoid repeated code

Question

I'm using Symfony2.1 with Doctrine2.1

I'd like to use AJAX for many features on my site , editing a title , rate an article , create an entity on the fly , etc.

My question is simple :

Do I need to create a JQuery function for each functionnality , like this :

$('#specific-functionality').bind('click', function(e){

    var element = $(this);
    e.preventDefault();

    // the call
    $.ajax({
      url: element.attr('href'),
      cache: false,
      dataType: 'json',
      success: function(data){        

        // some custom stuff : remove a loader , show some value, change some css

      }
    });
  });

It sounds very heavy to me, so I was wondering if there's any framework on JS side, or a specific method I can use to avoid this. I was thinking about regrouping items by type of response (html_content , boolean, integer) but maybe something already exists to handle it nicely !

Sunny · Accepted Answer · 2012-11-02 17:17:42Z

From what I understand, you are asking for lighter version of JQuery ajax method. There are direct get/post methods instead of using ajax.

 $.get(element.attr('href'), {'id': '123'}, 
    function(data) { 
       alert(data); 
    } 
 );

To configure error function

$.get(element.attr('href'), {'id': '123'}, function(data) {alert(data);})
.error(function (XMLHttpRequest, textStatus, errorThrown) {
                        var msg = jQuery.parseJSON(XMLHttpRequest.responseText);
                        alert(msg.Message);
});

Also, you can pass callback function to do any synchronous operations like

function LoadData(cb)
{
    $.get(element.attr('href'), { 'test': test }, cb);
}

And call

LoadData(function(data) { 
alert(data);
otherstatements; 
});

For progress bar, you use JQuery ajaxStart and ajaxStop functions instead of manually hiding and showing it. Note, it gets fired for every JQuery AJAX operation on the page.

 $('#progress')
   .ajaxStart(function () {
   //disable the submit button
   $(this).show();
   })
   .ajaxStop(function () {
   //enable the button
   $(this).hide();
   });

Zeljko · Accepted Answer · 2012-11-02 19:17:38Z

0

Instead of $('#specific-functionality').bind('click', function(e){, try this:

$(".ajax").click(function(){

    var url = $(this).attr("href") ;
    var target = $(this).attr("data-target") ;
    if (target=="undefined"){
      alert("You forgot the target");
      return false ;
    }

    $.ajax(....

And in html

<a class="ajax" href="..." data-target="#some_id">click here </a>

I think it is the simplest solution. If you want some link to work via ajax, just give it class "ajax" and put data-target to where it should output results. All custom stuff could be placed in these data-something properties.

answered Nov 2, 2012 at 19:17

Zeljko

5,1886 gold badges39 silver badges46 bronze badges

1 Comment

Vincent Wasteels Over a year ago

Even better, thanks ! I'm looking at the vote system of StakOverflow, and it seems to be working with the same concept !

Collectives™ on Stack Overflow

AJAX avoid repeated code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related