Wednesday 9 July 2014

jQuery, the beautiful and the ugly

Sometimes, you can have too much of a good thing. I coded up an image gallery which had a whopping amount of jQuery in it, handling image uploads, adding them to a database, naming them, assigning them to web pages, enabling them as backgrounds.

Even with the "live" or "on" functionality of jQuery I was finding it tough to get a large number of images to pick up the functional click events and transfer those to internal status changes within the array of images which were being looped from the system folders as well as the database. It all got a little too much to handle.

I was faced with a dilemma, do I unpick all the jQuery code I had assembled to rationalise it (it WAS doing what I wanted to do it just wasn't updating internal flags or try something else?

In the end, it was clear that if I reloaded the page following the click event, the internal status flag was then being picked up and the change was visible. So instead of an asynchronous call to the status handler, why didn't I just reload the page?

Well, dear reader, that's what I did - I'm not proud but by heavens it saved me another 4 hours of coding time!

An example is here (snippet)


  $(".removefromgallery").live("click",function(){
     var imageref = $(this).attr("rel");
     var imagefile = $(this).attr("id");
     //alert('id = '+ imageref +', image name = '+imgname+', image file = '+imagefile); return false;
     {
    
       //return false;
       var dataString = 'img='+imagefile;
     //alert (dataString);return false;
    
         $.ajax({
         type: "GET",
         url: "remove.php",
         data: dataString,
         success: function(response) {
   location.reload(true);
        });
      }
  });


The location.reload(true) function simply reloads the current URL in it's entireity (complete with querystring values)

Sometimes, simple does cut it!