Login

04-27-2010, 06:34 AM

[eluser]sunnyd[/eluser]
HTML:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html &gt;

&lt;head&gt;

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;

    &lt;title&gt;Untitled Document&lt;/title&gt;

&lt;style&gt;

    #outerWrap { width:1004px; margin:auto; position:relative; background-color:#eee; border:1px solid #999; }

    #outerWrap:after { content:"."; display:block; visibility:hidden; clear:both; }

    h1 { font:italic normal 24px Georgia, Serif; text-align:center; margin:10px 0; }

    p { margin:0; font:12px Arial, Sans-serif; padding:0 10px; }

    #left { width:218px; float:left; }

    #images { margin:0; padding:0; float:left; width:786px; }

    #images li { list-style-type:none; float:left; cursor:move; margin:10px 10px 0 0; width:200px; height:200px; border:1px solid #999; }

    #images .vacant { border:3px dotted #66d164; width:200px; height:200px; background-color:#ffdead; }

    .success, .failure { margin:0 0 0 10px; padding:4px 0 4px 26px; position:absolute; bottom:18px; font-weight:bold; }

    .success { background:url('&lt;?php echo base_url() . APPPATH; ?&gt;assets/img/tick.png') no-repeat 0 1px; color:#12751c; }

    .failure { background:url('&lt;?php echo base_url() . APPPATH; ?&gt;assets/img/cross.png') no-repeat 0 0; color:#861b16; }

&lt;/style&gt;

&lt;body&gt;

<div id="outerWrap">

    <div id="left">

        <h1>Image Organiser</h1>

        <p>Re-order the images by dragging an image to a new location. Your changes will be saved automatically.</p>

    </div>

    <ul>

        <div id="images">

        &lt;?php foreach ($images as $image): ?&gt;

            <li id='&lt;?php echo $image->id; ?&gt;'><img >src; ?&gt;" alt="&lt;?php echo $image->src; ?&gt;" title="&lt;?php echo $image->src; ?&gt;"/></li>

        &lt;?php endforeach; ?&gt;

        </div>

    </ul>

</div>

[removed][removed]

[removed][removed]

[removed][removed]

[removed][removed]

[removed]

    $(function() {

        //make li sortable

        $("#images").sortable({

            placeholder: "vacant",

            update: function(e, ui) {

                    //create vars

                    var orderArray = [], wrap = {};

                    //reset 'saved' message

                    $(".success", $("#left")).remove();

                    //process each image

                    $("#images img").each(function(i) {

                    //build img object

                    var imgObj = {

                        "id": $(this).parent().attr("id").split("_")[1],

                        "order": i + 1

                    };

                    //add object to array

                    orderArray.push(imgObj);

                    });

                    //wrap in object

                    wrap.d = orderArray;

                    //pass to server

                    $.ajax({

                    type: "POST",

                    url: "images/updateOrder",

                    data: JSON.stringify(wrap),

                    contentType: "application/json; charset=utf-8",

                    success: function(data) {

                        alert(data);

                        if (data === "saved") {

                            $("<p>").text("New order saved!")

                                .addClass("success").appendTo("#left");

                        } else {

                            $("<p>").text("Save failed")

                                .addClass("failure").appendTo("#left");

                        }

                    }

                    });

                  }

              });

    });

[removed]

&lt;/body&gt;

&lt;/html&gt;

Can anyone tell me if my code is wrong somewhere here... cant seem to figure out why its just not saving the new order in the system.