How to resolve strange conflict between form post and ajax post?

Posted by Oliver Hyde on Stack Overflow See other posts from Stack Overflow or by Oliver Hyde
Published on 2012-09-15T03:00:00Z Indexed on 2012/09/15 3:37 UTC
Read the original article Hit count: 164

Filed under:
|
|
|
|

On the one page, I am trying to use ajax to edit existing values. I am doing this by using jQuery Inline Edit and posting away the new data, updating the record and returning with success.

This is working fine.

Next I have implemented the ability to add new records, to do this I have a form at the end of the table, which submits post data then redirects back to the original page.

Each of them work individually, but after I have used the form to add a new record, the inline editing stops to work. If I close the webpage and reopen it, it works fine again until I have used the form and it goes of the rails again.

I have tried a number of solutions, clearing session data, giving the form a separate name, redirecting to an alternative page (which does work, but is not ideal as I want the form to redirect back to the original location ).

Here is a sample of the view form data:

<?php foreach($week->incomes as $income):?>
    <tr>
        <td><?php echo $income->name;?></td>
        <td width="70" style="text-align:right;" class="editableSingle income id<?php echo $income->id;?>">$<?php echo $income->cost;?></td>
    </tr>
<?php endforeach;?>
    <?php echo form_open('budget/add/'.$week->id.'/income/index', 'class="form-vertical" id="add_income"'); ?>
    <tr>
        <td>
            <input type="text" name="name" class="input-small" placeholder="Name">
            <input type="text" name="cost" class="input-small" placeholder="Cost">
        </td>
        <td>

            <button type="submit" class="btn btn-small pull-right"><i class="icon-plus "></i></button>
        </td>
    </tr>
    <?php echo form_close(); ?>

This is the javascript initialisation code:

$(function(){
$.inlineEdit({
    income: 'budget/update_income/',
    expense: 'budget/update_expense/'
}, 
{
    animate: false,
    filterElementValue: function($o){

        if ($o.hasClass('income')) {
            return $o.html().match(/\$(.+)/)[1];
        }
        else if ($o.hasClass('expense')) {
            return $o.html().match(/\$(.+)/)[1];
        }
        else {
            return $o.html();
        }
    }, 
    afterSave: function(o){
        if (o.type == 'income') {
            $('.income.id' + o.id).prepend('$');
        }
        if (o.type == 'expense') {
            $('.expense.id' + o.id).prepend('$');
        }
    },
    colors: { error:'green' }
});
});

If I can provide any more information to clarify what I have attempted etc, let me know.

Temporary Fix

It seems I have come up with a work around, not ideal as I still am not sure what is causing the issue.

I have created a method called redirect.

public function redirect(){
    redirect('');
}

am now calling that after the form submit which has temporarily allows my multiple post submits to work.

© Stack Overflow or respective owner

Related posts about php

Related posts about JavaScript