12/18/13

Jquery sparkline does not work when loading remote HTML content

To speed the load time for a page on my site I use jquery to load a remote page that contains usage statistics and a usage chart.

By allowing the primary page to load first - and then loading the stats content separately I was able to dramatically reduce the primary page load time - improving user experience.

The page's initial design loaded the stats content in line and displayed one of the elements using sparkline.js:
class="sparkline" data-values="1,2,3"

The problem was that when I loaded this content using:

The sparkline js wasn't applying to the remotely loaded content. The solution was to fire the sparkline JS again after the content was loaded:
By applying the sparkline js function after successful load, the sparkline appeared just fine on the HTML loaded sparkline data.
Happy coding.

12/16/13

Using jquery form with TinyMCE - form content does not submit

After struggling mightily with this problem I finally found the solution courtesy of Jerome Jaglale. TinyMCE is creating (behind the scenes) an iFrame to actually contain the human visible HTML rendered content. Unfortunately the form when submitted via JQuery Form sees on 'real' textarea - making it impossible to submit the HTML friendly user visible content. The solution was simply to add this line just after the form is assigned:

// bind form using 'ajaxForm'

$('form.form-horizontal').ajaxForm(options); 

//now update the 'real textarea' with the TinyMCE rendered content
$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

Worked like a charm! Original Post: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form