jQuery Fixes

Thu, 4 September, 2008 – 9:02 pm

Last month (doesn't time fly!) I wrote about improving my jQuery, whereby I wanted to just improve the code I'd been using on this project I've been working on for 3 months now. I'm all for more efficient code, and of course as with most programming languages, the more you use it, the more you learn, and the more efficient and improved your code becomes.

With thanks to Sam Hampton-Smith and Marc Grabankski (who is the developer of the UI Datepicker, a fantastic jQuery popup calendar), I managed to get my questions answered, learning plenty in the process! I said I'd write up what I actually did so that it's maybe of use to others (as I couldn't find a complete answer online anywhere).

Resetting Select Lists

My first problem was that I had a main select list and then each option had an ID as the value, for each ID there was a child select list. So you've got parents and their children. However I didn't know how many parents there were, and used PHP to create a long list to reset each child select list. Marc's code was spot on except because of the way I had my code it was failing. See, the first option in the parents select list was blank, and by sending a blank value to the JavaScript function it collapsed as it expected a value other than zero. Once I sussed this I altered Marc's code to cope with this and finally got the following working:

Reset Select List Function

1. $('#parentid option').each(function(i,option) {
2. var child_id = $(option).val();
3. if (child_id != 0) {
4. $('#child'+child_id)[0].selectedIndex = 0;
5. }
6. });

As you can see on line 3 I've got it checking whether the value of the option is empty, and providing it isn't it then runs the all important code. It's such a simple thing, but it took me a couple of hours of finally realising that was the problem!

Removing Records

My other problem was that I had a table of say regions, and within each region a number of postcodes are assigned to it. I wanted to allow them to remove a region but rather than just deleting the region and postcodes, to allow them to select the new region to put the postcodes into. Sounds straightforward enough, except I had an onsubmit(X) attribute in the form tag so that would trigger the function to do the work, the X would be the region to remove. That all worked except once you submitted the form it would do the work but then refresh the page, which meant the message to say 'The record has been removed' wouldn't display. (At this point I'll mention that I know I could have done it with standard HTML and PHP but I wanted to put my new jQuery knowledge to good use and do it how WordPress does theirs!).

Thing is, my code was pretty much fine. To prevent a form from submitting, or a link from actually activating, you use return false;. That was there, so it was a bit confusing (and frustrating) as to why it wasn't working! Eventually I worked out that the event attributes (onsubmit, onchange etc) were the cause of the problem. The function didn't return false, despite being told to. So I had to pull the code into the jQuery document ready function and use a jQuery method to trigger it (submit(), change() etc). Okay, that bit was fine but as I was using the same function for every form (one per record) then I needed to know which record I was trying to remove, and also ensure the function ran on any form (all of which have unique IDs). So I finally came up with the HTML markup of:

Form Markup

1. <form action="#" class="manareas" id="managearea_1" method="post">
2. <label for="area_1">Move postcodes to:</label>
3. <select name="area_1" id="area_1">
4. <option value="">Remove All Postcodes</option>
5. <option value="2">Area 2</option>
6. <option value="3">Area 3</option>
7. etc…
8. </select>

Here the number 1 at the end of the form ID and select ID changes depending on the ID of the area, this will give the form a unique id, same goes for the select list. So, say you've got 10 records, each with their own form similar to the above, each has a record ID in the id. Then when you want to remove a record you select your option from the list and it triggers the remove function in jQuery, however we obviously don't want a function for every record, so by adding the class 'manareas' we can use that to trigger the function and every form has that on it. However, then we need to work out which record we're dealing with, so we get this from the form id, and then we're back on track i.e.

Remove Record Function

1. $("form.manareas").submit(function() {
2. var id = $(this).attr('id');
3. var id = id.split('_');
4. var id = id[1];
5. var newarea = $('#area_' + id).val();
6.  
7. if (newarea != 0) {
8. var conf = confirm("Do you really want to permanently delete this Area?");
9. } else {
10. var conf = confirm("Do you really want to permanently delete this Area and all the Postcodes in it?");
11. }
12.  
13. if (conf) {
14. $.get("/admin/includes/remArea.inc.php", {id: id, na: newarea}, function(data) {
15. if (data) {
16. var cnt = $('tr#row' + newarea + ' td.njb').text();
17. var cnt = (cnt-0) + (data-1);
18. $('tr#row' + newarea + ' td.cnt').text(cnt);
19. $('#message').text('Area removed.').fadeIn();
20. $('#row' + id).fadeOut();
21. } else {
22. $('#message').text('Error removing Area.').fadeIn();
23. }
24. });
25. }
26. return false;
27. });

So to explain the code. First the function is run when a form with a class of mantrades is submitted (line 1). Then we get the value of the id attribute (line 2), and split it (equivalent of PHP explode) using the underscore, to get the record number, which we then use to get the value selected in the form (line 4). Lines 7-11 just put up a confirmation box depending on which option is selected, just in case a clever client selects it and submits the form without thinking! Finally, if the user has confirmed yes to removing the area, the function that was originally written is executed, sending the ID and other information to the PHP script and making any changes, removing the row from the table etc. if successful. Then on line 26 we have the return false which of course stops the form from actually submitting the browser and refreshing the page.

So that's how I solved those two problems. It may not be the cleanest solution (the first is, the second can probably be improved), but it solved my issue which is what I needed

• Bookmark this page at:
• Del.icio.us -
• StumbleUpon -
• Spurl