Javascript on Laïla Atrmouh

Prototype Cheat Sheet

Fri, 13 May 2016 20:37:49 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

I had to deal with Prototype while working with Magento. Here’s a little cheat sheet of some very simple stuff I had to do.

Make an Ajax Request with parameters

new Ajax.Request(url, {
                   method:'get',
                   params : { data1 : 'myParam' }
                   onSuccess: function(xhr){
                    console.log(xhr.responseText); 
                    var json = JSON.parse(transport.responseText);
                    }
});

Change value of an input

$('ID OF THE ELEMENT').setValue('The new value');

Change data within a span tag

$('ID OF THE ELEMENT').update('Your new data');

How to add a new stock option in Woocommerce

Tue, 22 Mar 2016 18:53:53 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

Sometimes, clients can come up with some pretty creative ways to handle their inventory … It was the case for me with a customer who was using WooCommerce.

I had to add a third option but the stock options was not customizable. I ended up deleting the native dropdown of stock options and I implemented a custom field.

Look for a word in a group of div using only jQuery

Tue, 22 Mar 2016 18:44:23 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

For an old project, I had to implement a search tool in a static page. No option for me to use any server side language, I had to implement that search tool using Javascript / jQuery.

The following function’s purpose is to :

Search amongst a group of divs that have the class qa-faqs if a word is present in the content
Exclude stop-words in french and in english from the query entered by the user
List of words to exclude is in the var words_to_exclude
Order the divs by data-relevance (times the searched word appears in each div)

Please note that the following function uses the awesome plugin jQuery.highlight

Convert an image into a base64 string Javascript

Sun, 22 Dec 2013 23:26:54 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

Here is a little function I did to convert an image into a base64 string (JavaScript only): http://pastebin.com/Dfb8TR4g

Parsing errors JSON

Tue, 25 Jun 2013 23:26:03 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

Parsing JSON with the jQuery method $.parseJSON can be tricky to debug, specially when you’re using a mobile device.

Here is a list of errors I encoutered, and the reason why they were raised.

Unexpected token u The method tries to parse a undefined variable

Unexpected token o The method tries to parse [Object object]

Best ways to debug Javascript

Mon, 18 Mar 2013 23:20:37 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

I was looking for an equivalent of PHP’s print_r to debug Javascript Objects and I found this very cool method:

JSON.stringify(whatever_obj);

How about you ? How do you debug objects in Javascript ?

Passing arguments in an event handler Javascript

Tue, 26 Feb 2013 23:19:15 +0000

👴 Careful You’re reading an old article ! Some links might be broken and content may be outdated

I had this problem while working on Leaflet but I think it can be generalized to the issue of passing parameters to an event handler in Javascript. With the « bind » method of jQuery, you can pass parameters by using the data property of event (the object sent when an event is triggered) :