Jquery selector problem

Hey guys,

My jquery is as follows:


			 var $id = new Array();
			 $('#gallery li').children(':input').each( function() {
				$id = $('#gallery li').children(':input').val();
					console.log($id);
				});

The html I am trying to select from is:


<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li id="index_4" class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras</h5>
<img width="96" height="72" alt="The peaks of High Tatras" src="Images/1.png">
<a class="ui-icon ui-icon-zoomin" title="View larger image" href="Images/1.png">View larger</a>
<a class="ui-icon ui-icon-trash" title="Delete this image" href="link/to/trash/script/when/we/have/js/off">Delete image</a>
<input id="pic_id" type="hidden" value="1" name="photo">
</ul>

There are 4 li items as above and I want the value from each hidden input field. At the moment I am getting 4 identical values, 1, 1 ,1 and 1.

Does anyone know how to get them and what I am doing wrong. I really need them in an array. It’s probably simple but I’ve just been looking at it for too long :stuck_out_tongue:

thanks

In the function, the this keyword will refer to each of the individual elements. So use this instead.

You also want to add them to an array, so you can use Array.push() to achieve that.

$id.push(this.val());

Thanks Paul, u always have the answers :wink:
What time is it in New Zealand right now? I am in the UK and you seem to be online programming all hours! I have been at it since 8am too, trying to build myself a custom CMS system for client’s websites and doing the front-end with lots of UI widgets

Well right now I am 11 hours ahead of London time.

There’s a good reason why it seems that way :slight_smile:
I am also playing around with project euler though, which is a fun programming diversion.

That looks pretty heavy but I shall give it a try when I get a chance.
I have a very arty background, originally a musician, I changed profession an took an electronics degree back in 2006. Since then I have only worked as a web developer because I find it more interesting.

Its strange, even though I haven’t been doing programming all that long and am probably nowhere near someone like you (javascript guru :P), I find that the more I develop, I am actually becoming more mathematical if that makes sense? Guess it’s part of your brain that once you start using, sharpens. And I was already 30 when I changed so who says you can’t teach an old dog new tricks! :stuck_out_tongue: LOL

Thanks for all the help btw lots of people don’t seem to reply on here nowadays

Hey,

I can get the following to work:

		 $('#reorder').click(function( event){
			  var $id = new Array();
			   $('#gallery li').children(':input').each( function() {
				$id.push(this.value);
				console.log($id);
				});

Why doesn’t $id.push(this.val()) work as suggested above? When I log it to the console, it says:

this.val is not a function?

.val is a method that works only with jQuery objects.

In that each function, the this keyword is a direct reference to the element itself.
Use the native technique to get a form elements value, with this.value

Either that, or wrap (uselessly some might say) the this keyword in a jQuery object, to end up with $(this).val()

Ah ha!

Yes I have come across this before, I am so pleased that I am able to understand it now. It explains JavaScript’s refusal to do a lot of similar things.
thanks again !

To follow up, you could use the .map() method instead, which combines the returned values into an array for you.


$('#reorder').click(function( event){
    var $id = $('#gallery li').children(':input').map(function() {
        return this.value;
    });

Ah brilliant ok,

I will try that too :slight_smile:

I was going to say I have used serialize() before but that was when there was a form present, there isn’t in this instance so that isn’t an option. That is absolutely great as I’m sure you know it collects all form input results into an array. Great for lazy person like me :wink:

Now I am trying to send the array which I have from the inputs as a GETvariable,

I am confused as to the format this must take because I already have one array from sortable(‘serialize’) which returns with the format:

index=2&index=3&index=4&index=1

I have never even seen this before but I am now aware that this is the same as:

index[0]=2, index[1]=1, index[2]=3, index[3]=4

So i guess my question is how can I add to the code below to send order(the array above) together with id(our new array from the inputs) ?

window.location.href =‘update_posts.php?’+order;

You can append it on just as long as you separate things with an ampersand.

like this ? update_posts.php?order&id

Can’t get this to work, well I can’t get the both variables from my php script on the other end.

Something like that, but using the string concatenation techniques that you would normally use.

Got it thanks Paul,
its window.location.href =‘update_posts.php?’+order+‘&’+id;

unfortunately that sends what you would think is correct but the GET for the id array is still not set: the url is as below:

update_posts.php?index=2&index=3&index=4&index=1&1,2,3,4

That results in the following data being accessible from $_GET:


array
  'index' => 
    array
      0 => string '2' (length=1)
      1 => string '3' (length=1)
      2 => string '4' (length=1)
      3 => string '1' (length=1)
  '1,2,3,4' => string '' (length=0)

Yes that’s what I thought too, but id is supposed to be an array because of
$id.push(this.value) thats why I don’t expect it to be a string and even if it were just a string, the code I have on my php script to test is as below:

		if (isset($_GET['id'])){
		echo("Id set!");	
		}

Even when I send that string as a url variable as above, it doesn’t register. However, The array ‘order’ does register.

Work backwards on the problem. Start from how you want to access the data in PHP, then figure out how the data needs to be structured, and then finally organise the submitted data so that its matches that structure.

I could easily transfer this variable to the php script if it were in a form but with this part of the interface, I don’t want to have a form, I want to handle everything from one button - jquery click, get all of the current image indexes(sortable, ‘serialize’ - ‘order’) , get all of the id’s(hidden input fields) send them via GET to the script.

When it reaches the script I need to take all of the GET data make a db query which re-order’s the image indexes according to the previous user (sortable) order.

So thats what I need to accomplish, I have all of the pieces together except for the GET variable id.

maybe there is an easier way, I shall work backwards yes.