Welcome Guest, Not a member yet? Register   Sign In
Performance Question: jQuery Modal Dialog
#1

[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">

$(document).ready(function() {
var targetUrl = $('#confirm_link').attr("href");
$('#confirm_link').click(function() {
  $dialog.dialog('open');
  // prevent the default action, e.g., following a link
  return false;
});

var $dialog = $('<div></div>')
.html('Wollen Sie den Einsatz wirklich löschen?')
  .dialog({
   autoOpen: false,
   title: 'Einsatz löschen',
   width: '600px',
   modal: true,
   buttons: {
    "Löschen": function() {
             [removed].href = targetUrl
    },
    "Zurück": function() {
     $( this ).dialog( "close" );
    }
   }
  });

});
</.script>

Link-List:
Code:
&lt;? foreach($einsatz as $item) { ?&gt;  
<tr bgcolor="&lt;?=$item['rowColor']?&gt;">
<td>&lt;?=$item['einsatzID']?&gt;</td>
<td class="button">&lt;?=$item['lfdNr']?&gt;</td>
<td>&lt;?=$item['datum']?&gt;</td>
<td>&lt;?=$item['einsatzName']?&gt;</td>
&lt;? if($item['online']==1) { ?&gt;
<td class="button"><a href="&lt;?=base_url('admin/content/statusEinsatz/'.$item['einsatzID'].'/1/'.$item['year'])?&gt;" class="button_mini"><span class='button_online_small'></span></a></td>
&lt;? } else { ?&gt;
<td class="button"><a href="&lt;?=base_url('admin/content/statusEinsatz/'.$item['einsatzID'].'/0/'.$item['year'])?&gt;" class="button_mini"><span class='button_offline_small'></span></a></td>
&lt;? } ?&gt;
<td class="button"><a href="&lt;?=base_url('admin/content/editEinsatz/'.$item['einsatzID'])?&gt;" class="button_mini"><span class='button_edit_small'></span></a></td>
<td class="button"><a href="&lt;?=base_url('admin/content/imgEinsatz/'.$item['einsatzID'])?&gt;" class="button_mini"><span class='button_image_edit_small'></span></a></td>
<td class="button"><a id="confirm_link" href="&lt;?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?&gt;" class="button_mini"><span class='button_delete_small'></span></a></td>
</tr>

&lt;? } ?&gt;

Rendered Code (3 example rows)
Code:
<tr bgcolor="#E1E1E1">
<td>2057</td>
<td class="button">134</td>
<td>10.08.2012</td>
<td>Test</td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/statusEinsatz/2057/0/2012" class="button_mini"><span class='button_offline_small'></span></a></td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/editEinsatz/2057" class="button_mini"><span class='button_edit_small'></span></a></td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/imgEinsatz/2057" class="button_mini"><span class='button_image_edit_small'></span></a></td>
<td class="button"><a id="confirm_link" href="http://feuerwehr.sarbas.net/admin/content/deleteEinsatz/2057" class="button_mini"><span class='button_delete_small'></span></a></td>
</tr>

  
<tr bgcolor="#FFFFFF">
<td>2054</td>
<td class="button">133</td>
<td>05.08.2012</td>
<td>Defekter Sterilisator</td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/statusEinsatz/2054/1/2012" class="button_mini"><span class='button_online_small'></span></a></td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/editEinsatz/2054" class="button_mini"><span class='button_edit_small'></span></a></td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/imgEinsatz/2054" class="button_mini"><span class='button_image_edit_small'></span></a></td>
<td class="button"><a id="confirm_link" href="http://feuerwehr.sarbas.net/admin/content/deleteEinsatz/2054" class="button_mini"><span class='button_delete_small'></span></a></td>
</tr>

  
<tr bgcolor="#E1E1E1">
<td>381</td>
<td class="button">132</td>
<td>04.08.2012</td>
<td>Feuer im Gebäude, Menschenleben in Gefahr</td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/statusEinsatz/381/1/2012" class="button_mini"><span class='button_online_small'></span></a></td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/editEinsatz/381" class="button_mini"><span class='button_edit_small'></span></a></td>
<td class="button"><a href="http://feuerwehr.sarbas.net/admin/content/imgEinsatz/381" class="button_mini"><span class='button_image_edit_small'></span></a></td>
<td class="button"><a id="confirm_link" href="http://feuerwehr.sarbas.net/admin/content/deleteEinsatz/381" class="button_mini"><span class='button_delete_small'></span></a></td>
</tr>

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
#2

[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">

$(document).ready(function() {

$('a.confirm_link').click(function() {
var targetUrl = $(this).attr("href");
var ID = $(this).attr("id");
  $dialog.dialog('open');
  // prevent the default action, e.g., following a link
  return false;
});

var $dialog = $('<div></div>')
.html('Wollen Sie den Einsatz wirklich löschen?')
  .dialog({
   autoOpen: false,
   title: 'Einsatz löschen',
   width: '600px',
   modal: true,
   buttons: {
    "Löschen": function() {
             [removed].href = targetUrl
    },
    "Zurück": function() {
     $( this ).dialog( "close" );
    }
   }
  });

});
</.script>

Also don't select a specific ID. Select an element and grab it's ID how i've done above.
#3

[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()
$('a.confirm_link_2').click(function()
...
Because as you said id should be unique...


KR
Habib
#4

[eluser]kingmaoam[/eluser]
So now I have this code:

Code:
<.script type="text/javascript">

$(document).ready(function() {

$('a.button_mini').click(function() {
    
var ID = $(this).attr("id");
var targetUrl = ' ';

switch(ID) {
&lt;? foreach($einsatz as $item) { ?&gt;
case "confirm_link_&lt;?=$item["einsatzID"]?&gt;": targetUrl = "&lt;?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?&gt;"; break;
&lt;? } ?&gt;
}

  $dialog.dialog('open');
  // prevent the default action, e.g., following a link
  return false;
});

var $dialog = $('<div></div>')
.html('Wollen Sie den Einsatz wirklich löschen?')
  .dialog({
   autoOpen: false,
   title: 'Einsatz löschen',
   width: '600px',
   modal: true,
   buttons: {
    "Löschen": function() {
             w.indow.l.ocation.href = targetUrl
    },
    "Zurück": function() {
     $( this ).dialog( "close" );
    }
   }
  });

});
</.script>

The a tag is as followed
Code:
<a id="confirm_link_&lt;?=$item['einsatzID']?&gt;" href="&lt;?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?&gt;" class="button_mini"><span class='button_delete_small'></span></a>
Rendered it is f.e. confirm_link_2062

On outputting ID via d.ocument.write it is confirm_link_2062 but my javascript console says targetUrl is not defined...

#5

[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()
$('a.confirm_link_2').click(function()
...
Because as you said id should be unique...


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");
var targetUrl = ' '; // you didn't specify a targetUrl

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");
var targetUrl = '&lt;?=base_url('admin/content/deleteEinsatz/');?&gt;'+ID;

Which will give you something like .. www.example.com/admin/content/deleteEinsatz/88202

Also I hope all this js is inline?
#6

[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 :-)
#7

[eluser]kingmaoam[/eluser]
Hi,
I finally got it working with:

Code:
<.script>
$(document).ready(function() {

$('a.button_mini').click(function(e) {
    
var ID = $(this).attr("id");
var targetUrl = ' ';

switch(ID) {
&lt;? foreach($einsatz as $item) { ?&gt;
case "confirm_link_&lt;?=$item["einsatzID"]?&gt;": targetUrl = "&lt;?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?&gt;";
             var $dialog = $('<div></div>')
              .html('Wollen Sie den Einsatz wirklich löschen?')
               .dialog({
                autoOpen: false,
                title: 'Einsatz löschen',
                width: '600px',
                modal: true,
                buttons: {
                 "Löschen": function() {
                          [removed].href = targetUrl;
                 },
                 "Zurück": function() {
                  $( this ).dialog( "close" );
                 }
                }
               });
             $dialog.dialog('open'); return false;
             break;
&lt;? } ?&gt;
}
});



});
</.script>

having the links in a foreach to the the ids like confirm_link_N
Code:
<td class="button"><a id="confirm_link_&lt;?=$item['einsatzID']?&gt;" href="&lt;?=base_url('admin/content/deleteEinsatz/'.$item['einsatzID'])?&gt;" class="button_mini"><span class='button_delete_small'></span></a></td>

Thanks for the help!
KR
Habib




Theme © iAndrew 2016 - Forum software by © MyBB