Question

I have asked the first part of this question before, but with no answer to it though. I managed to bind one event to the form, but to one of the forms nothing seems to work.

So, this is one of the forms I’m dynamically echoing in the HTML:

$regex = '/^.*(\d{4,4})_(\d{2,2})_(\d{2,2}).*$/';
$replacement = '$3 / $2 / $1';
$val = preg_replace($regex,$replacement,$name);             

$formReplacement = 'backup-$3-$2-$1';
$formID = preg_replace($regex,$formReplacement,$name);

$form = array(
        '<form name="rollback-form" id="' . $formID . '" class="rollback-form" method="post" action="#">',
            '<fieldset class="rollback-fields">',
                '<fieldset class="display-rollback-wrapper">',
                    '<label for="display-rollback" class="display-rollback-label">Backup</label>',
                    '<input type="text" name="display-rollback" class="display-rollback" value="' . $val . '" autocomplete="off" readonly="readonly" />',
                    '<input type="hidden" name="rollback_id" value="' . $id . '" />',
                '</fieldset>',
                '<fieldset class="rollback-wrapper">',
                    '<button type="submit" name="rollback" class="rollback">Rollback</button>',
                '</fieldset>',
            '</fieldset>',
        '</form>',
        '<div  id="' . $formID . '-message-handling" class="message-handling" class="message-handling"></div>'
    );
$form = implode("", $form);
echo $form;

In the above case, $name = $id = 'logindb_backup_2012_02_02.sql'.

And I’m applying the following jQuery function to the echoed form:

$('form.rollback-form').on('click', 'button.rollback',function() {

    var rollback_id = $(this).find('[name="rollback_id"]').val();
    var form_id = $(this).attr('id');

    console.log(rollback_id);
    console.log(form_id);

    $('.secondary-actions #'+form_id+'-message-handling').fadeOut();
    $.ajax({
        type:       'POST',
        url:        'assets/class/login/actions/rollback.php',
        dataType:   'json',
        data: {
            rollback:   rollback_id
        },
        success:function(data) {
            if(data.error === true) {
                $('.secondary-actions #'+form_id+'-message-handling').text(data.message).fadeIn();
                console.log(data.message);
                setTimeout(function () {
                    $('.secondary-actions #'+form_id+'-message-handling').fadeOut();
                }, 3500);
            }
                else {
                    $('.secondary-actions #'+form_id+'-message-handling').text(data.message).fadeIn();
                    console.log(data.message);
                    setTimeout(function () {
                        $('.secondary-actions #'+form_id+'-message-handling').fadeOut();
                    }, 3500);
                }
        },
        error:function(XMLHttpRequest,textStatus,errorThrown) {
            $('.secondary-actions #'+form_id+'-message-handling').text('Error | Check PHP log for information').fadeIn();
            console.log('Error | Check PHP log for information');
            setTimeout(function () {
                $('.secondary-actions #'+form_id+'-message-handling').fadeOut();
            }, 3500);
        }
    });
    return false;
});

This one works perfectly, I mean the 'click' event, it doesn’t send me to another page which would be the action of the form, it’s handled by the jQuery handler attached to the click event.

But the problem above is :

var rollback_id = $(this).find('[name="rollback_id"]').val();
var form_id = $(this).attr('id');

console.log(rollback_id);
console.log(form_id);

These two above output in the console undefined, why is that ? It should be something like rollback_id = 'backup/logindb_backup_2012_02_02.sql' and form_id = 'backup-02-02-2012'.

And the second part of my problem which I mentioned right in the head it’s the click event, it doesn’t work as the one for the above form does, when I click on the buttons, either of them, it just sends me to another page, the action of the form page which is #.

So here is the other form:

$form = array(
        '<form name="backup-form" class="backup-form" method="post" action="#">',
            '<fieldset class="backup-fields">',
                '<fieldset class="display-wrapper">',
                    '<label for="display" class="display-label">Backups</label>',
                    '<input type="text" name="display" class="display" value="' . $this->backups(false,true) . '" autocomplete="off" readonly="readonly" />',
                '</fieldset>',
                '<fieldset class="action-wrapper">',
                    '<button type="submit" name="clean" class="clean">Clean All</button>',
                    '<button type="submit" name="create" class="create">Create</button>',
                '</fieldset>',
            '</fieldset>',
        '</form>',
        '<div class="message-handling" class="message-handling"></div>'
    );
$form = implode("", $form);
echo $form;

In the form above $this->backups(false,true) it’s just a number, it’s not relevant to my question.

And here is the jQuery event triggers I’m trying to bind:

$('form.backup-form').on('click', 'button.clean',function() {
    console.log('Clean Button Pressed');
});


$('form.backup-form').on('click', 'button.create',function() {
    console.log('Create Button Pressed');
});

But these two don’t work at all. And I have tried with .delegate, .click, .submit but those don’t work either. So what could be the problem with these two ?

Answer 1

Your code is this:

var rollback_id = $(this).find('[name="rollback_id"]').val();
var form_id = $(this).attr('id');

Now, what is $(this) in this context? It’s button.rollback. Not the form.

Do this instead:

var form = $(this).closest('form');
var rollback_id = form.find('[name="rollback_id"]').val();
var form_id = form.attr('id');