SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    A great solution I got from http://stackoverflow.com/questions/5...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:

    Code:
    <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.../jquery-ui.css

    +

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

    Code:
    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,878
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The problem is these two lines:

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

    Code:
    <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. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Below tried - Still not working

    You make sense - however, I appended the "http:" and it's still not working. Arg....

    Any other thoughts?? Barry


    Quote Originally Posted by Pullo View Post
    Hi,

    The problem is these two lines:

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

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

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,878
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here goes.... [and thanks!]

    AFAICSee, nothing appears in Console but the pure HTML.

    VIEW SOURCE:

    debugSource.png

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

    properlyRunningScreenshot_2.png

    ...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.}

    debugResort_screenshot.png

    Anything, anything? ;^}

    Barry

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,878
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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.

    Code 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');
        }
      }    
    });

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by Pullo View Post
    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.

    Code 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');
        }
      }    
    });

  8. #8
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Fault - Somehow when I was Copying/Pasting the Source I reached into an old version of the file....

    The ACTUAL Source is -

    debugSource.png

    Any clearer?

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

    Barry

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,878
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by polyphonic7 View Post
    I imagine the problem has something to do with this.... Am I getting warm?! ;^}
    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:

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


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
  •