SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 44 of 44
  1. #26
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    "Persistence is the path to perfection"

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

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

  4. #29
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go
    Attached Files Attached Files
    "Persistence is the path to perfection"

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    The changes that I made are:

    • 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


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

    Code:
    update_posts.php?photo[]=1&photo[]=3&photo[]=2&reorder=reorder+indexes
    The update posts page can then check for the reorder key, and process them. I'm echoing the SQL statements in this example:

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

    Code php:
    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),
                intval($id)
            );
            // perform query here
            // ...
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much, its 1am here so i will examine it all thoroughly tomorrow
    "Persistence is the path to perfection"

  7. #32
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's absolutely awesome thankyou Paul, I just have to work out what it all means now :P 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)
    "Persistence is the path to perfection"

  8. #33
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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?
    You may have to clarify about the problem being experienced, and the code that's involved.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

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

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

  11. #36
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG,
    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?

    THANKS

    Will
    "Persistence is the path to perfection"

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

  13. #38
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, thanks for your advice. I shall begin to explore these options. Have a gd day
    "Persistence is the path to perfection"

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

    Question

    Quote Originally Posted by paul_wilkins View Post

    Code:
    update_posts.php?photo[]=1&photo[]=3&photo[]=2&reorder=reorder+indexes
    I don't understand where you get reorder+indexes from? I only have a variable 'order' which holds the result of JQuery serialize?
    "Persistence is the path to perfection"

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

  16. #41
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    I don't understand where you get reorder+indexes from? I only have a variable 'order' which holds the result of JQuery serialize?
    That comes from you file attached to post #29, where the button is:

    Code html4strict:
    <input type='button' name='reorder' value='reorder indexes' id="reorder"/>

    Form submissions automatically replace spaces with plus signs, which are correctly reinterpreted when received at the other end.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #42
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    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?
    Using sortable, that reorders the placement of those elements within the DOM. When the form is submitted, the form elements are submitted in order according to their placement within the DOM. No serialized array needs to be created at all, because all of the information that's needed is already available from the fundamentals of how forms work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #43
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    532
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok that's cool. Thanks for the straightforward explanation. That should all work great.

    I have to mention again that the original method I used to do this does definitely display a sorting anomaly. This doesn't concern me any more as I will be doing it your way, from what your saying, using sortable I need just one array and not two.

    However, sortable serialize did not always submit the correct orders in the index[] array, I checked the php thoroughly and so did some more more experienced developers. This I know because, the script always executed what was in the url variable correctly. It was what serialize() was sending there that was the problem.

    Is it uncommon for JQuery to have bugs? Is it impossible that I may have inadvertently stumbled upon one?

    The original UI widget is lifted from a droppable photo manager. I know that draggable and sortable are supposed to share the same attributes and methods but I was thinking that maybe droppable and sortable have a conflict with ('serialize').?

    Have you ever come across any JQuery bugs yourself?
    "Persistence is the path to perfection"

  19. #44
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Is it uncommon for JQuery to have bugs? Is it impossible that I may have inadvertently stumbled upon one?
    Bugs are uncommon. More commonly, it's a problem with not understanding how things are supposed to work. Still, I'd be interested in taking a look at a page where it's possible to reproduce the sorting problems that you were having.
    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
  •