This may or may not help you, but often in situations like this what I
do is use .closest() to get the id that I need for the edited record,
like this:
<ul id="forms">
<li id="r_123" class="record">your form gets injected here</li>
<li id="r_456" class="record">your form gets injected here</li>
</ul>
assuming each form has it's own submit button, you could use event
delegation to handle the click and get the record id:
$('#forms').click(function(){ // create click handler at UL level
var $this = $(this);
if( $this.is('submit') ){ // check to see if a submit button was clicked
var recordId = $this.closest('.record')[0].id.split('_')[1], //
get the recordId
data = $this.closest('form').serialize();
// do some stuff with your recordId and serialized data
return false; // to prevent the submit from actually submitting,
assuming you're handling the submit via ajax
}
});
Maybe that'll give you some ideas. If you can, use a 'button' instead of
a 'submit' button type and remove the return false; from the example.
- Jack
Dave Maharaj :: WidePixels.com wrote:
I have sets of records on a page each has an edit link, clicking the link
loads an edit form into the record the user wants to edit, so a user can
click edit beside every link creating an unknown number of forms on the
page.
<li id="r_123" >user records "edit" </li>
<li id="r_456" >user records "edit" </li>
<li id="r_789" >user records "edit" </li>
Each form loaded into the reords li has its own unique id so submitting the
form is fine my problem is that its only submitting to the record / form
that opens last. So if the user clickes edit, edit , edit for each of the
example records above its only submitting to the last record.
I know where the problem is, I just don't now how to fix it. When the user
clicks "edit" the js gets the variable from the newly loaded form_id and
that gets passed in the uRec(form_id); saying to edit this "form" so as
soon as the user clicks edit again the first form_id is gone and replaced
with the newly opened form. Any ideas where I am going wrong here? I cant
change the idea to have only 1 form at a time open setup. If I could add a
bind sumbit to the script to grab the form_id of what was just submitted
then run the function i think that would do the trick. Pretty new at this
and not sure where I would go about adding the bind submit. Something like:
var form_id = '#<?php echo $form_id ?>';
$(form_id).bind("submit", uRec(form_id) { return false; }????
My script onthe page with all the records is :
<script type="text/javascript">
var form_id = '#<?php echo $form_id ?>';
uRec(form_id);
</script>
My external js:
function uRec(selector){
var $form = $(selector);
$form.submit( function() {
var data = $(form_id).serialize();
var form_url = $(form_id).attr('action');
var form_target = form_url.substr(1).replace( new RegExp( "/" ,"g"), "_" );
var update_target = (form_target.replace("_edit", ""));
$.blockUI({ message: null});
$form.ajaxSubmit({
type: "post",
url: form_url +'/',
data: data,
dataType: 'json',
success: function(response){
if (response.status === true)
{
$.unblockUI();
$('#' +
update_target).html(response.html).slideToggle('slow').highlightFade({speed:
2000});
$('#' + form_target).slideToggle('slow');
} else {
$.unblockUI();
$('#' + form_target).html(response.html);
}
}
});
return false;
});
};
Dave
