One web page features the use of ajax for editing existing values. This is achieved by utilizing jQuery Inline Edit to post new data, update records, and return with success.
The process works well initially.
Subsequently, I implemented the functionality to add new records. A form at the end of the table collects post data and redirects back to the original page upon submission.
While these functions work individually, after adding a new record using the form, the inline editing feature ceases to function correctly. The issue persists until I refresh the webpage. Solutions attempted include clearing session data, giving the form a distinct name, and redirecting to an alternative page (which does work but is not ideal as redirection back to the original location is preferred).
A snippet of the view form data is provided below:
<?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;?gt;
<?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(); ?>
Below is the javascript initialization 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 additional information is needed to clarify previous attempts, feel free to inquire.
Temporary Resolution
A temporary workaround has been devised to address the issue, although the root cause remains unclear. A method named redirect has been created:
public function redirect(){
redirect('');
}
Post submitting the form now calls this method, temporarily resolving multiple post submit issues.