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

Question

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.

Answer 1

please try and see by replacing the jquery sign.
$ should be replaced by jQuery then it will create new instance to work fine

Answer 2

I heard somewhere that jquery wont work if you put the form inside the table tag.
It need to be outside the table as in:
<form>
<table>
...
</table>
</form>
jQuery does not bring the contents of a form element if inside a table element on an ajax load
After testing it, i've discover that it is partialy true, (aka un-reliable)... It's the reason why i stopped using tables.