Question

I am rewriting a helper class which was originally built on top of Scriptaculous. I am moving to jQuery – however, I am stuck on a couple of lines, that I need help with (see below): Note: the javascript code is interpersed with php variables (the sigils being a dead give away)

Statement 1

'new Insertion.Before(\'' . $updateContainer . '\', new Element(\'div\', {\'id\': \'' . $updateContainer . '_loading\', \'class\': \'' . $spinnerClass .'\'})); $(\'' . $updateContainer . '_loading\').innerHTML="<h4>Loading ...</h4>";',

Statement 2

'$(\'' . $updateContainer . '_loading\').remove();'

Answer 1

I’ll assume that the $updateContainer is ID of the HTML element that contains the loading message.

Then, I’d write the Statement 1 like this:

$statement1 = sprintf('$(\'#%1$s\').html(\'<div id="%1$s_loading" class="%2$s"><h4>Loading</h4></div>\');', $updateContainer, $spinnerClass);

And the second statement is:

$statement2 = sprintf('$(\'#%s_loading\').remove();', $updateContainer);

If you have a lot of AJAX communication and need the ‘Loading’ often, it might be better to hide() it so you can just show() it later instead of creating the HTML again.

Statement1 would be uset to create the loading element, Statement2 with hide() instead of remove() to hide it and Statement3 with show() instead of hide() to show it again.