jQuery Dynamic JQuery UI dialogs

[deafdigit]

Alright so I've seen something like this question around, but I can't really figure out how to make it right...

With a php-loop I'm building a table. Each row of this table represents a question and contains a cell with a link which is supposed to open a JQuery UI-dialog with a standard form in it allowing the user to answer that question.

Now here's the tricky bit. When the user has answered the question the answer need to be submitted to a MySQL-db and it needs the question's id so as to map the two together.

My idea so far is to give the form a <input type='hidden' name='id'> element and make the value-attribute contain the id of the question. However, I can't figure out how to get the id into this input-element.

I can of course put the question's id into the link's id-attribute like this:

PHP Code:

<a href='javascript:void(e);' id='1'>Answer</a> 


... but I don't know how to get it into the form's hidden input field.

Can somebody please help me with this?


Thank you in advance,

// deafdigit

[DanInMa]

how are you submitting each question? via ajax? if so lets see the code for that.

oh also, ID's should never start with a numeric value

[deafdigit]

Well the question thing was just an example. Let's keep it simple.

I want this link

PHP Code:

<a href='javascript:void(e);' id='a1'>Link</a> 


to open a dialog containing a form with this hidden element

PHP Code:

<input type='hidden' name='id' value='a1' /> 


Each link is generated with a php-loop. Let's say like this:

PHP Code:

<?php
for($i=0; $i<10; $i++)
{
?>
    <a href='javascript:void(e);' id='a<?php echo $i; ?>'>Link</a>
<?php
}
?>

... or something to that effect. Now, of course I could just include a

PHP Code:

<div id='a<?php echo $i; ?>'></div>

in the php-loop and then use that as the target for the dialog, but that just seems kind of a brute-force-sort-of-not-very-pretty way to do it.

So I was wondering if there is any way to just make one <div> with the <input type='hidden'>-element in it and then pass the ID-attribute of the clicked link to that.

I don't know if I'm making any sense

[DanInMa]

give all the links the same class, say myclass

with jquery:

$('.myclass').on('click', function(){
$('body').remove("#tempdiv");
$('body').append("<div id='tempdiv'><form><input type='hidden' name='id' value='"+this.id"' /></form>")
 $( "#tempdiv" ).dialog();

});

then use jquery to take over the form submission using .submit() and on a successful submittal, use

$('#tempdiv').dialog('close')

[deafdigit]

Took me a little while to get this tested properly but is exactly what I needed.

Thanks a lot DanInMa.

Merry Christmas.