Question

I want to create a JavaScript/jQuery/jQuery UI drop-down select for element ordering in my CMS application. I have been using a form with a select element that posts when the select element changes, but I need to apply this functionality to form elements, and trying to nest forms creates all kinds of problems.

I was thinking that I could add an element like this in each element, and then build some sort of control from it:

<div class="order"
        data-action="[url to POST to]"
        data-return="[url to redirect to after POST]"
        data-max="[maximum order value, min assumed to be 1]">
    [value of current order]
</div>

I’ve done some searching, but haven’t found anything that resembles what I am looking for.

---

UPDATE

I have found this jQuery SelectBox plugin that looks nice, but it still requires the form elements to be in the source.

Starting with this markup:

<div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
    1
</div>

I would expect the JavaScript to make something like this:

<div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
    1
</div>
<ol class="orderSelect">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ol>

Using JavaScript/CSS to make it behave like a select element, making a POST request when another value is selected. I’m not looking for an AJAX solution.

I don’t expect a full solution, but a pointer in the right direction.

Answer 1

haha, it takes a long time for my code to build at work, so don’t worry about the length of my last idea! So, i’m imagining a page full of all kinds of your blocks, with different values:

    <div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
     1
     </div>

and you want these blocks to trigger JS to create ‘something’ like this:

<ol class="orderSelect">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ol>

allright, the code below will point you in the correct direction on how to make the ‘ol’ blocks that you want.

    <script>
    $(document).ready(function(){
    //only clone() these un-attached elements, or var re-use may go out the window
      var masterContainerObj = $("<ol class='orderSelect'></ol>");
      var masterContainerItemObj = $("<li></li>");
    //get all your div objects that have the data we want
      $(".order").each(function(index, elem){
        var newContainer = masterContainerObj.clone();
        var max = $(this).attr("data-max");
        for( var i = 1; i <=max; i++){
          var item = masterContainerItemObj.clone();
          item.text(i);
          if(i == $(this).text()){
            item.addClass("selected");
          }
/* add your data for this select item here, or, attach it to the newContainer, i leave that to you*/
          newContainer.append(item);
        }
        $(this).after(newContainer);
      });
    });
    </script>