Search code examples
jqueryjeditable

jquery function not working if alert is commented out


I am running a post function, then after the function is over. I am running another function. Problem is the second function does not work, if I do not have an alert message in the function, it does not run...

jquery function is:

function applyeditable(){
    //alert('trying to apply editable class...');

$(".edit_mystatus").editable('/cgi-bin/my_cgi_script.pl', {
event       : 'dblclick',       //or dblclick
data        : " {'A':'Active','C':'Completed','D':'Deleted'}",
type        : 'select',
submit      : 'Ok',
indicator   : '<img src="http://my_website/images/indicator.gif">',
placeholder : 'Double Click to Edit',
tooltip     : 'Double Click to edit...',
style       : 'display: inline',
name        : 'name',
id          : 'id',
callback    : function(value, settings) {
                // console.log(this);
                // console.log('returned value= '+value+' we have to now disable rest of form if Completed or Deleted');
                // console.log(settings);
                }
});
$(".edit_mynotes").editable('/cgi-bin/my_cgi_script.pl', {
    event       : 'dblclick',       //or dblclick
    type        : 'textarea',
    rows        : 10,
    cols        : 100,
    cancel      : 'Cancel',
    submit      : 'Save',
    indicator   : '<img src="http://my_website/images/indicator.gif">',
    placeholder : 'Double Click to enter text',
    tooltip     : 'Double Click to edit...',
    style       : 'display: inline',
    name        : 'name',
    id          : 'id'
});
$(".ajaxfileupload").editable('/cgi-bin/my_cgi_script.pl', {
    type        : 'ajaxupload',
    submit      : 'Upload',
    cancel      : 'Cancel',
    indicator   : '<img src="http://my_website/images/indicator.gif">',
    tooltip     : "Double Click to upload...",
    style       : 'display: inline',
    name        : 'filename',
    id          : 'id'
});

$(".checkclass").click(function() {
    var $this = $(this);
    // $this will contain a reference to the checkbox
    var chkboxval = $this.val();
    if ($this.is(':checked')) {
        alert('the checkbox was checked val='+chkboxval);
    } else {
        alert('the checkbox was UNchecked val='+chkboxval);
    }
});
}

html is:

<input type="checkbox" class="checkclass" value="1_0">
<input type="checkbox" class="checkclass" value="1_1">
<input type="checkbox" class="checkclass" value="1_2">

...


Solution

  • the function applyeditable has to be called from the innermost 'on success' event of the calling function. that will take care of async nature of things.

    for example:

    callingfunction(abc){ ... ...

    $.get(data, function(myfile) {
    $("#someid").html(myfile);
    applyeditable()     //this call runs after above is success (100% execution)
    });
    

    ... }