SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 44
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Jquery selector problem

    Hey guys,

    My jquery is as follows:

    Code:
    			 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:

    Code:
    <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 :P

    thanks
    "Persistence is the path to perfection"

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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());
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, u always have the answers
    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
    "Persistence is the path to perfection"

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Thanks Paul, u always have the answers
    What time is it in New Zealand right now?
    Well right now I am 11 hours ahead of London time.

    Quote Originally Posted by silversurfer5150 View Post
    I am in the UK and you seem to be online programming all hours!
    There's a good reason why it seems that way
    I am also playing around with project euler though, which is a fun programming diversion.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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! :P LOL

    Thanks for all the help btw lots of people don't seem to reply on here nowadays
    "Persistence is the path to perfection"

  6. #6
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hey,

    I can get the following to work:

    Code:
    		 $('#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?
    "Persistence is the path to perfection"

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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()
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !
    "Persistence is the path to perfection"

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    To follow up, you could use the .map() method instead, which combines the returned values into an array for you.

    Code javascript:
    $('#reorder').click(function( event){
        var $id = $('#gallery li').children(':input').map(function() {
            return this.value;
        });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah brilliant ok,

    I will try that too

    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
    "Persistence is the path to perfection"

  11. #11
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    "Persistence is the path to perfection"

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can append it on just as long as you separate things with an ampersand.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "Persistence is the path to perfection"

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    like this ? update_posts.php?order&id
    Something like that, but using the string concatenation techniques that you would normally use.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it thanks Paul,
    its window.location.href ='update_posts.php?'+order+'&'+id;
    "Persistence is the path to perfection"

  16. #16
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    "Persistence is the path to perfection"

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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:

    Code:
    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)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "Persistence is the path to perfection"

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "Persistence is the path to perfection"

  21. #21
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I still don't understand is that if 'id' is an array which is should be as I have declared it as one and have used push() to fill it up, how can it have become a string when I append it as a GET variable?

    Am I missing some magic method for transforming local arrays ready for GET?
    "Persistence is the path to perfection"

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    What I still don't understand is that if 'id' is an array which is should be as I have declared it as one and have used push() to fill it up, how can it have become a string when I append it as a GET variable?

    Am I missing some magic method for transforming local arrays ready for GET?
    What you are seeing there is JavaScripts string representation of an array. If you need it to be in a PHP-specific format, you will need to create the key-value pairs especially yourself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I see so I guess that with the other array, sortble('serialize') has hidden this from me?

    I should be able to do that, Let me try
    "Persistence is the path to perfection"

  24. #24
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [SOLVED ]Ok!! Finally

    The url is built up as follows:
    Code:
     $('#reorder').click(function( event){
    	var order = $('#gallery').sortable('serialize');
    	var id = new Array();
    	
    //Select all input id's	
       $('#gallery li').children(':input').each( function() {
    	id.push(this.value);
    	});
    	var sizeofid = id.length;
    	var idString ="";			
    	for(i=0;i<sizeofid;i++)
    	{
    	idString += "id[]="+id[i]+"&";
    	}
    	
     //redirect and send GET arrays containing id/index
    	window.location.href ='update_posts.php?'+order+'&'+idString;
     });
    "Persistence is the path to perfection"

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I am puzzled about the whole id part of what you're doing, because it seems that you might be duplicating the information that's sent through.

    With the initial information that was being submitted:
    update_posts.php?index[]=2&index[]=3&index[]=4&index[]=1

    Isn't the sort order already available in the data? 2, 3, 4 and then 1?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •