Usually you blog about something, putting your opinion over about something. Well today it's my turn to ask the questions! I have a number of jQuery questions and figured I'd leave them up here for either me to then find the answer or for someone who may know the answer to give me a few hints
This isn't a 'how do I do this'. What I have already works, but I'm sure it could work a lot more efficiently and a couple of questions linger in my mind as to how or even whether it's possible.
Update: I've got the first issue working thanks to Marc Grabanski (who has an excellent site and is a must read for any jQuery user!)
1. I need to create a function that resets several select lists. However the id of each select list is dynamically generated. What I have is a select list with a list of parents in and each has an ID. Then each parent has a child select list, and the child select list uses the parent ID to make it unique (with me so far?!). At present I use PHP to generate the function by looping through the parent IDs (retrieved from a database), which gives me:
- JavaScript function
-
- function resetLists() {
- $('#child1')[0].selectedIndex = 0;
- $('#child2')[0].selectedIndex = 0;
- $('#child3')[0].selectedIndex = 0;
- }
However, I'm sure there must be a way that I can just use jQuery to read through all of the option values of the parent list and get the 1, 2 and 3 from that and do the same above i.e have a function that pretty much says 'get each value from the parent list and for each value set the selectedIndex to 0 for the child + value list. I'm sure it's possible, but how, I don't know (yet).
2. This is one I've not actually got working yet. I'm working on an admin area and I've got the parents listed in a table. Then at the end is the option to remove the parent. However as each parent has one or more children, the children need to be moved to another parent. So when you click 'Remove' it gives a select list of the available parents to move the children to. You can select the new parent and then click Go. However at this point I don't want the form to actually submit and reload the page (which it's currently doing), I want the form to trigger a function which runs the PHP file to move the children, delete the parent and just remove the table row of the parent off the screen.
So far I've got it to run the function, however once the function runs the page refreshes. The only way I've got this function to run is by using the onsubmit attribute in the form tag. Now I know I could change the submit button to a standard button, but surely there's a way to prevent the form form submitting? I've tried putting return false; at the end of the function that's run, but that doesn't seem to work. I've tried putting the function in the action with javascript: at the start of it, but that really didn't work!
Update: Some code may help. This is what I have at present.
- Remove Function
-
- function exremtrade(id) {
- var newtrade = $('#trade_' + id).val();
- $.get("/admin/includes/remTrade.inc.php", {id: id, nt: newtrade}, function(data) {
- if (data) {
- $('#message').text('Trade details removed.').fadeIn();
- $('#row' + id).fadeOut();
- } else {
- $('#message').text('Error removing Trade details.').fadeIn();
- }
- });
- return false;
- }
I've then got a form that has the attribute onsubmit which runs
onsubmit="exremtrade(2)"
Where '2' is the ID of the trade to remove. The new trade ID is in the select list, also in the form. Now if I remove the form and just use a button and the select list, it works. But of course that isn't valid, and ideally the form should be there just in case the user doesn't have JavaScript (plus I'd like to understand why it's not working!). However, with the form in place, and the button as either a button or submit input, the function runs, works as it should, but then the form gets submitted which effectively refreshes the page and loses my update message.
That's my two questions so far. I'm currently reading jQuery in Action thanks to Si's recommendation, which is a great book, I'm just a slow reader! 2 months ago I didn't have a first clue about AJAX, and now I'm quite confident with the basics. My first AJAX enabled site has been live for almost a week and it's not collapsed! I'd just love to be able to improve it further