Performance Question: jQuery Modal Dialog |
[eluser]kingmaoam[/eluser]
Hi, now that I got jQuery working with my site I have the next question. I am currently designing the backend of my page. I have a list of databaseentries, each with a link to delete the entry. Now I had the idea to use modal dialog to have a window popup asking the user if he really wants to delete the entry. First approach to this was to have following code. jQuery Code Code: <.script type="text/javascript"> Link-List: Code: <? foreach($einsatz as $item) { ?> Rendered Code (3 example rows) Code: <tr bgcolor="#E1E1E1"> The dialog window is only working for the first entry... seems not to get more then one id='confirm_link'... Now my idea would be to dynamically generate the jQuery Code and id attributes with something like id='confirm_link_'.$entryID but I think this could be very inperformant in large lists having a lot of jQuery Code generated and rendered... Is there a better, more performant approach I could use? KR Habib
[eluser]Samus[/eluser]
[quote author="kingmaoam" date="1345470101"]Hi, The dialog window is only working for the first entry... seems not to get more then one id='confirm_link'... Now my idea would be to dynamically generate the jQuery Code and id attributes with something like id='confirm_link_'.$entryID but I think this could be very inperformant in large lists having a lot of jQuery Code generated and rendered... Is there a better, more performant approach I could use? KR Habib[/quote] #1 because it's an 'ID'. Meaning it should only be able to be identified by one element, so jquery will pick either the first matching ID or the last (not too sure). You're going about it in the right way and I don't think there will be any performance issues. Only thing i'd suggest is you place your code all within your click() event to ensure that code is actually only being run when someone actually goes to click to delete. e.g Code: <.script type="text/javascript"> Also don't select a specific ID. Select an element and grab it's ID how i've done above.
[eluser]kingmaoam[/eluser]
ok I will try this. One more question... You wrote $('a.confirm_link').click(function() should this then be Code: $('a.confirm_link_1').click(function() KR Habib
[eluser]kingmaoam[/eluser]
So now I have this code: Code: <.script type="text/javascript"> The a tag is as followed Code: <a id="confirm_link_<?=$item['einsatzID']?>" href="<?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?>" class="button_mini"><span class='button_delete_small'></span></a> On outputting ID via d.ocument.write it is confirm_link_2062 but my javascript console says targetUrl is not defined...
[eluser]Samus[/eluser]
[quote author="kingmaoam" date="1345473795"]ok I will try this. One more question... You wrote $('a.confirm_link').click(function() should this then be Code: $('a.confirm_link_1').click(function() KR Habib[/quote] No don't specify any ID at all in your jquery if there are multiple options, you're just going to fill the file up unnecessarily data when you can just detect the ID on the go. Code: var ID = $(this).attr("id"); If you want to create the target url based on the ID of the 'a' element, you'd do something like this.. Code: var ID = $(this).attr("id"); Which will give you something like .. www.example.com/admin/content/deleteEinsatz/88202 Also I hope all this js is inline?
[eluser]kingmaoam[/eluser]
Hey I tried to Set the targeturl in the Switch Block as in the Code above. The line you quoted is just to initialize the var Of course the Code is inline :-)
[eluser]kingmaoam[/eluser]
Hi, I finally got it working with: Code: <.script> having the links in a foreach to the the ids like confirm_link_N Code: <td class="button"><a id="confirm_link_<?=$item['einsatzID']?>" href="<?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?>" class="button_mini"><span class='button_delete_small'></span></a></td> Thanks for the help! KR Habib |
Welcome Guest, Not a member yet? Register Sign In |