Jquery selector problem

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.

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

[SOLVED ]Ok!! Finally

The url is built up as follows:

 $('#reorder').click(function( event){
	var order = $('#gallery').sortable('serialize');
	var id = new Array();
//Select all input id's	
   $('#gallery li').children(':input').each( function() {
	var sizeofid = id.length;
	var idString ="";			
	idString += "id[]="+id[i]+"&";
 //redirect and send GET arrays containing id/index
	window.location.href ='update_posts.php?'+order+'&'+idString;

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:

Isn’t the sort order already available in the data? 2, 3, 4 and then 1?

Apologies, should have made it clearer, the sort order is from sortable(‘serialize’) but the id’s which are in the hidden input fields are the actual table row id’s which I take from MYSQL so that when I have this new order (from sortable) I can then update the DB indexes in relation to the row id’s. SO what I am doing with the array ‘id’ is preserving the id’s from previous page for use after refresh (location.href)

The naming conventions are much more strongly defined in the server side scripts, its just because you can’t see that script. Thanks again :wink:

I’m glad that the solution works for you.

Ordinarily though, don’t the hidden form fields get automatically submitted in a usable manner when the form is submitted?
If there was a test version of your page, I’m sure that easier to understand solutions could be put together for you.

Ok cool thanks Paul, I shall get one live to show you tomorrow as I am testing on localhost atm. Would really appreciate it as there is always a proper way for me to learn to do things.

Here you go :wink:

The changes that I made are:

[list][]removed the scripting code for reorderimage indexes, and the sortchange event
]make the reorder button a submit button instead
[]change the “photo” names to “photo[]”
]wrap a form around the media uploads and reorder button[/list]

With those changes to the page, the reorder indexes button submits the following page:


The update posts page can then check for the reorder key, and process them. I’m echoing the SQL statements in this example:

if (isset($_GET['reorder'])) {
    foreach ($_GET['photo'] as $key => $id) {
        echo '<p>UPDATE pix SET pic_index ="' . ($key + 1) . '" WHERE id = "' . $id . '"</p>';

whereas in reality, you might use something like this instead:

if (isset($_GET['reorder'])) {
    $args = array(
        'photo' => array(
            'filter' => FILTER_VALIDATE_INT, 
            'flags' => FILTER_REQUIRE_ARRAY
    $filteredGet = filter_input_array(INPUT_GET, $args);
    // connect to database
    // ...
    // and then
    foreach ($filteredGet['photo'] as $key => $id) {
        $sql = sprintf('UPDATE pix SET pic_index = %d WHERE id = %d',
            intval($key + 1),
        // perform query here
        // ...

Thank you so much, its 1am here so i will examine it all thoroughly tomorrow :slight_smile:

That’s absolutely awesome thankyou Paul, I just have to work out what it all means now :stuck_out_tongue: Great learning for me tho. I will definitley be going with your code as it is far more efficient.

I have to ask as it’s really bugging me, what was wrong with the original image reorder code, I showed to a few other PHP developers and they all said that it should have worked, they suggested that it was a problem with JQuery, is there anything that you can see?

thanks again

Silversurfer (Will)

You may have to clarify about the problem being experienced, and the code that’s involved.

Hi Paul,
Sorry to bother you over this again, Basically, the old script is still live atm:

Jake News

Basically try and reorder them in the following order:
123 then 132 both work fine then try 312 notice how the index goes out of bounds. Weird, really annoying puzzle.

312 is with 3 at the top left, 1 to its right, and the 2 below the 3? I’m having trouble achieving that index out of bound error.

Its such a stupid thing for me to think! I didn’t pay enough attention to the CSS, thought they we’re alll set to float:left with only the bottom one displaying block for lack of room in the div setting it to the next line! That’s probably not whats happening. Apologies for taking up so much of your time but at least I have more efficient code now and all of these new things to learn from your code.

I can retain a small amount of satisfaction in knowing that I did actually solve the puzzle eventually.

Thanks Paul, its a real benefit to have such experience.

I must also ask you another question.

Today, I was offered a new developer job, a really good one and it will be primarily JS and CSS. Only thing is, it is working on an app for IPTV to be run on a stripped down system- basically like a satellite box.

This means that I cannot use my old friend JQuery and that I must now revert back to more traditional JS. So my question is:

What is your advice for an approach for getting back to basics with JS?. Are there any good sites or books that spring to mind to help me improve and what approach to you take to compensate for losing the luxury of JQuery cross-browser compatibility?



If you’re after micro libraries to achieve certain specialised tasks, you could look at microjs.com

Something else that could be useful though is to be able to make use of more modern javascript techniques. There are techniques beyond the standard version 1.3 of javascript that make programming so much easier. The trouble is, if it’s a satellite box you may be stuck with 1.3. If so though, all is not lost. There’s augment.js from which you can pick and choose the parts of extra functionality that you may require.

So far as the cross-compatibility issues are concerned, you will need to get more in to testing across a wide range of platforms. If you use something like jsUnit to automate your tests, that can help to remove much of the tedium of testing, so that you can then modify your code without fearing that it might break on something else.

I see, thanks for your advice. I shall begin to explore these options. Have a gd day :slight_smile:

I don’t understand where you get reorder+indexes from? I only have a variable ‘order’ which holds the result of JQuery serialize?

Does your code work on the premise that:

when you alter the original order with sortable you create the serialized array but you do not affect the form submitted DOM positions?

so that if you send the original DOM positions (photo) together with reorder (presumably the result of sortable ‘serialize’) then you can apply the new reorder indices to the photos?

Could you please clarify this for me , I appreciate your patience. Don’t worry I haven’t been trying to do this the whole time but it has frustrated me so I have left it for a while. I am still unsure of whether my old version was working, no one else on the forums has been able to fix it.

I have never used sortable before so I am guessing its an intricacy of this UI effect that I don’t know about.