Question

I’m using jQuery UI’s sortable and I want the by the user sorted list to be saved to the URL as a parameter, so that when the user clicks the link ‘Save’ the url should contain this information.

Everything works except that the href attribute isn’t updated when the user clicks at the link.

My question is how this can be accomplished and if it’s not possible, if there is another way (except ajax/json which doesn’t fit my solution) to pass the string (or an array which I could create instead to the new page)?

$('#listElements').sortable({
    update: function(event, ui) {

        var order = '';
        var i = 0;

        $('.listObject li').each(function (e) {
            if (i != 0) {
                order += '%';
            }
            order += $(this).attr('id');
            i +=1;
        });

        var url = $('#newOrder').attr("href");
        url += "&listOrder=" + order;

        $('#newOrder').val(url);
    }
});

<div id='listContainer'>
    <div id='listElements'>
        <ul>
            <li>Element 1</li>
            <li>Element 2</li>
        </ul>
    </div>
    <div id='listUsers'>
        <h3>Collaborators</h3>
        <p>Mr Oizo</p>
        <p>Cookie Monster</p>
    </div>
    <div id='listInfo'>
        <h3>List info</h3>
        <strong>List creator: Mr Nice</strong><br/>
        <strong>Creation date: 2012/12/12 </strong><br/>
    </div>
   <a href='index.php?type=list&action=saveNewListOrder&listId=$listId' id='newOrder'>Save</a><br/>
</div>

Note: Server side I’m using php.

Answer 1

This line is bad:

$('#newOrder').val(url);

replace with:

$('#newOrder').attr('href',url);