CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapx-editable
kramer65
kramer65

Reputation: 53853

How to trigger a new X-Editable to open from the success function of the present one?

I'm using the Bootstrap X-editable to let people do inline edits of their profile. One of the things that the user can edit, has an influence on another editable though. If editable A (a year) is set to the current year, the user is obliged to make a decision in editable B (a certain tax rate) as well.

So the editable options for the editable year are as follows:

$('#year').editable({
    pk: 1,
    success: function(response, newValue){
        if (newValue == 2014){
            $('#tax_rate').trigger('click');
        } else {
            $('#tax_rate').html(2);
        }
    }
});

EXAMPLE FIDDLE HERE

This behaves fine except for the year 2014, in which it does indeed post the correct value to the back-end, and subsequently indeed clicks/opens #tax_rate, but somehow, the click prevents the new year from being displayed correctly in #year. If I refresh the page, the year displays correctly again, but it's just when I try to trigger the other editable, that it doesn't display the year correctly after saving it. Just try opening the fiddle and changing the year to 2014 to see what I mean.

So does anybody know how I can both update the new year in the DOM and also click/open the tax_rate editable? All tips are welcome!

Upvotes: 2

Views: 1669

Answers (1)

vp_arth
vp_arth

Reputation: 14982

I advice you to async UI interact:

Like this:

$('#year').editable({
    pk: 1,
    success: function(response, newValue){
        if (newValue == 2014){
          setTimeout(function(){
             $('#tax_rate').trigger('click');
          }, 0); 
        } else {
            $('#tax_rate').html(2);
        }
    }
});

It should work correctly, I think

Add:
Also you can trigger click event vanillaJS framework using.
I think $.trigger cause the some UI update fault.
It's simple: 

document.getElementById('tax_rate')
  .dispatchEvent(new Event('click'));

Upvotes: 4

Related Questions