install jquery plugin shapeshift

Discussion in 'Programming' started by knish, Apr 29, 2014.

  1. #1
    how do I install shapeshift plugin from scratch. I am querying a list from sql table. Need to show it to users in this form (http://mcpants.github.io/jquery.shapeshift/), so they easily drag drop and i can do whatever operations needed. Point is I tried basic jquery to run and it worked but to make this run, it is going nowhere. I have

    1. made a html file like it said. Find attached.
    2. css. ( shapeshift.css ) ( renamed for upload purpose only )
    3. js file as given is linked in html header.

    Question is how do i flood container with my set of list.
    How do i get it running. What i get on screen is ( screen.jpg )

    What am I missing.

    Thanxs.
     

    Attached Files:

    knish, Apr 29, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Really? Just put the code up directly, in CODE-brackets (look at the button marked "insert" directly above the comment-textarea). Or, better yet, put it up somewhere where we can test whatever you're doing. Adding files is just a hassle, and not something I'm gonna bother with, at least.
     
    PoPSiCLe, Apr 30, 2014 IP
  3. stanleyhelps

    stanleyhelps Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #3
    Hey,

    next time, please use something like jsFiddle or use the code-function in this forum. But here's some troubleshooting:
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.shapeshift.min.js"></script>
        <script type="text/javascript" src="js/jquery.shapeshift.js"></script>
    
    HTML:
    First of all, your jQuery version is quite old. Use the latest stable release. The second thing, you included shapeshift two times. Only include it once. Third thing: Shapeshift makes things drag and drop. That means it uses jQuery UI. You have to include that one as well.
    So this is how your code should actually look like:
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.shapeshift.min.js"></script>
    
    HTML:
    Here's the thing running: http://jsfiddle.net/k89jT/
     
    stanleyhelps, Apr 30, 2014 IP