Netflix-style Item Re-Order/Sort works on JSFiddle but not on Local PC

JavaScript
1

A great solution I got from http://stackoverflow.com/questions/5685583/sortable-list-ability-to-re-order-each-item-by-inputting-rank
doesn’t work locally when running the HTML, CSS, and JQuery files…

Know why?

Here’s the working solution - http://jsfiddle.net/pMcmL/6/.

My adaptation…

HTML:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
     <title>Promorpheus PROTOTYPE Experiments | Users</title>

	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="reorder.js" ></script> \\\\ local JavaScript

	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="reorder-original.css" media="screen" />

  </head>

  <body>
    <ul id="sortable">
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 1</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 2</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 3</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 4</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 5</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 6</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 7</li>
    </ul>
  </body>

</html>

Then, the Solution specifies:

CSS:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css

+

li {
    margin: 1px;
    width: 130px;
    padding:2px;
    vertical-align:middle;
}

li span {
  color: gray;
  font-size: 1.1em;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
  height:100%;
}

input[type="text"] {
    width: 32px;
    margin-right: 5px;
    border: 1px solid lightgray;
    color: blue;
    text-align: center;
}

…and JavaScript:


sort_ul = $('#sortable');
itemsCount = $('#sortable li').length;

function updateIndexes(){
    $('li input').each(function(i){
              $(this).val(i+1);
          });
}

updateIndexes();

sort_ul.sortable({handle:'span',
                  stop:function(event,ui){ updateIndexes(); }
});

$('li input').keyup(function(event) {
  if(event.keyCode == '13'){
    event.preventDefault();

    order = parseInt($(this).val());

    li = $(this).parent();
    if(order>=1 && order <= itemsCount){

        li.effect('drop', function(){
            li.detach();

            if(order == itemsCount)
                sort_ul.append(li);
            else
                li.insertBefore($('#sortable li:eq('+(order-1)+')'));

            updateIndexes();
            li.effect('slide');
        });
    }else{
        li.effect('highlight');
    }
  }
});

Any thoughts?

Thanks,
Barry

2

Hi,

The problem is these two lines:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

for them to work locally you need to add a “http:” to the front of the src attribute:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

HTH

3

You make sense - however, I appended the “http:” and it’s still not working. Arg…

Any other thoughts?? Barry

4

No problem. I’m sure it’ll be something simple.
What happens when you check your browser’s error console?

Here’s how.

If that doesn’t help, could you go to the page where it’s not working, view the source code (usually right click > view source) and then copy and paste the entire source code here.

5

Here goes… [and thanks!]

AFAICSee, nothing appears in Console but the pure HTML.

VIEW SOURCE:

HERE’s the way it should look and DOES work in JSFiddle:

…and what the defunct result looks like in the browser…
{I have tweaked the CSS, so my item “spans” are stretched - THAT is how I want the CSS, but the JS is not doing its part to allow auto-numbering and actively moving the items as the JSFiddle shows, above.}

Anything, anything? ;^}

Barry

6

From what I can see of the first screen shot you haven’t included any of the additional JavaScript code necessary to make this work.

sort_ul = $('#sortable');
itemsCount = $('#sortable li').length;

function updateIndexes(){
    $('li input').each(function(i){
              $(this).val(i+1);
          });
}

updateIndexes();

sort_ul.sortable({handle:'span',
                  stop:function(event,ui){ updateIndexes(); }
});

$('li input').keyup(function(event) {
  if(event.keyCode == '13'){
    event.preventDefault();

    order = parseInt($(this).val());

    li = $(this).parent();
    if(order>=1 && order <= itemsCount){

        li.effect('drop', function(){
            li.detach();

            if(order == itemsCount)
                sort_ul.append(li);
            else
                li.insertBefore($('#sortable li:eq('+(order-1)+')'));

            updateIndexes();
            li.effect('slide');
        });
    }else{
        li.effect('highlight');
    }
  }
});
7

The JS code you mention below is in “reorder,js” - I have the reference at the.top of my HTML file… How can I get my HTML file to “see” it?

Barry

8

My Fault - Somehow when I was Copying/Pasting the Source I reached into an old version of the file…

The ACTUAL Source is -

Any clearer?

I DO wonder if my Desktop environment is accessing the JS file?

Barry

9

Again - I’m trying to get all files to run from my local [Desktop] machine. (Except the Google-hosted ones.)

I imagine the problem has something to do with this…

Am I getting warm?! ;^}

Barry

10

Not sure.

My next idea would be that you are trying to reference elements on the page with your JavaScript before they exist in the DOM.

Try moving your JavaScripts to the bottom of your page, just before your closing body tag.
Like so:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Promorpheus PROTOTYPE Experiments | Users</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="reorder-original.css" media="screen" />
  </head>

  <body>
    <ul id="sortable">
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 1</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 2</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 3</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 4</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 5</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 6</li>
      <li class="ui-state-default"><span>&#x21C5;</span><input type="text"/>Item 7</li>
    </ul>
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="reorder.js" ></script>
  </body>
</html>

If that doesn’t help, then the path to reorder.js is wrong.