Validate a value changed with Jeditable

I'm not quite good at javascript and ajax, so I ask you for help. I use Symfony2 and Twig and I have a field which I change with jediable but its value should be unique. So I check this in the controller action, but I can't succeed in making the app to act normally. I tried a lot of things and the closest to the result I want is this:

   if (count($same) == 0) {
            // add to database
        } else { 
                $response = new Response();
                $response->setContent('<div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">OK</button>
            <strong>This value is already used!</strong> Please choose another.
        </div>');
                $response->send();

which outputs this nice error:

enter image description here

but when I click OK, the jeditable pluging is still working, and the whole error becomes editable, so the value of the input field contains all the HTML set in $response->setContent()enter image description here

Because the the whole block

        <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">OK</button>
            <strong>This value is already used!</strong> Please choose another.
        </div>

is in the div with the class '.edit' when I click it, it becomes editable and contains this whole block. What I want is when the user clicks on the alert generated in the controller to return to input field from jeditable with a value as the original name of the category before he started to edit or with empty value.

This is my .js file but it doesn't make the input field empty (but it prints wokring) :(

$(document).ready(function(){

     $('.edit').editable(path, {
         cancel    : 'Cancel',
         submit    : 'Save',
         tooltip   : 'Click to edit'
     });

     $('.bla').on('click','.alert', function(){        
         console.log('working');    
         $("input[type=text]").hmtl('');
     });
});

HTML

<span class="right-spacer"><strong id="{{cat.id}}"class="edit bla">{{ cat.name }}</strong>

Any ideas for solution?

Answers:

Answer

If I understand, your popup error is created dynamically when someone click on the button "Save" with an invalid value, this means that the pop-up does not exists at the $(document).ready time. This is why this part:

$('.alert').on('click', function(){
    $("input[type=text]").val('');
});

Will never be executed. If you want this function to work, you will need to use delegation, as you use Jquery this will be pretty easy.

Instead of $('.alert').on('click', function(){

You will have to use something like $('body').on('click','.alert', function(){

Where body is an element that is a parent of .alert, for exemple if you know your pop-up will be created inside a div with the id of first_div(Something like <div id="first_div">) You would put instead $('#first_div').on('click','.alert', function(){

This means that the div will listen to the click events inside him, so the closer he is to the pop-up the more efficient it is.

Answer

I think this was missing,

if (count($same) == 0) {
    // add to database
    // clear the content on form. 
    //$("input[type=text]").html('');//it should be html not **hmtl**
}

Try and reply if not done..

This should do..

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.