CODEWITHSUNDEEP
javascriptjqueryx-editable
user1032531
user1032531

Reputation: 26311

Add confirm prompt before saving x-editiable

How do I add a confirm prompt before saving x-editiable (http://vitalets.github.io/x-editable/)? If the response to the confirm prompt is negative, the x-editable dialog should close and the value should not be updated.

I came up with this Fiddle, but the first solution is a little verbose and the second solution (based on x-editable prompt before updating the value) doesn't work.

Test 1<a href="javascript:void(0)" id="name1"></a>
<br>
Test 2<a href="javascript:void(0)" id="name2"></a>

$('#name1').on('shown', function(e, editable) {
    var button=$('input.myClass').parent().next().find('button.editable-submit');
    console.log(button,e,editable,this);
    button.click(function(){
        if(!confirm("Are you sure you wish to proceed?")){
            editable.hide();
            return false;
        }
    });
});

$('#name1').editable({inputclass:'myClass'});

$('#name2').editable({
    validate: function (x) {
        console.log(x,this);
        if(!confirm("Are you sure you wish to proceed?")){
            //Doesn't work
            return false;
        }
    }
});

Upvotes: 2

Views: 1835

Answers (1)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

The x-editable documentation says you need to return a string when the input is invalid. I have updated your fiddle with a working sample. 

$('#name2').editable({
    validate: function (x) {
        console.log(x,this);
        if(!confirm("Are you sure you wish to proceed?")){
            // Hide the editable
            $('#name2').editable('toggle');
            return "invalid";
        }
    }
});

Upvotes: 2

Related Questions