Hi I am trying to get this jsfiddle to work on my site http://jsfiddle.net/wv6fchmv/2/ I have copied over the HTML and CSS The Js script on the page I have put into an external file called main.js and I have I believe linked the other external files and jquery My head section looks like this <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="mainjs.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"> </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> </script> <link href="maincss.css" rel="stylesheet" type="text/css" /> </head> HTML: It is however not working any ideas on what I am doing wrong
Yup. You've loaded jquery-ui before jquery - that won't work. You need to load the jquery main library first.
Hey thanks for your help The elements are now dragable but I am not been prompted to save them As I said before I have the JS written in the fiddle saved as main.js I have also tried placing it in the body but no luck Is there some where particularly I need to put it Here is my head section again but I have tried to move around the different files <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"> </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"></script> <script type="text/javascript" src="mainjs.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"> </script> <script type="text/javascript" src="mainjs.js"></script> <link href="maincss.css" rel="stylesheet" type="text/css" /> </head> HTML:
Gotcha! I believe you were copying the wrong thing. This one is working: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <style type="text/css"> .column { width: 170px; /*float: left;*/ padding-bottom: 100px; margin: 3px; padding: 5px; border-left: 2px lightgray solid; vertical-align: top;} .box { margin: 0 1em 1em 0; } .box-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } .box-header .ui-icon { float: right; } .box-content { padding: 0.4em; } .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder * { visibility: hidden; } /* Confirmation Dialog Popup Window (For Deletions and other similar items that require a user approval to proceed) */ #confirmOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; /*background:url('http://demo.tutorialzine.com/2010/12/better-confirm-box-jquery-css3/jquery.confirm/ie.png');*/ background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2); background-color: #000; background-color: rgba(0, 0, 0, 0.5); z-index: 5100; } #confirmBox{ background: #FFF; width:460px; position:fixed; left:50%; top:50%; margin:-130px 0 0 -230px; border: 1px solid rgba(33, 33, 33, 0.6); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; } #confirmBox h1, #confirmBox p{ font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif; padding: 18px 25px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); color:#666; } #confirmBox h1{ letter-spacing:0.3px; padding: 18px 25px 18px 25px; color:#888; } #confirmBox p{ background:none; font-size:16px; line-height:1.4; padding-top: 0px; } #confirmButtons{ padding:15px 0 25px; text-align:center; } #confirmBox .button, #confirmBox .save-button{ display:inline-block; background: #0E8DCE; color:white; position:relative; height: 33px; font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif; margin-right: 15px; padding: 0 35px 0 40px; text-decoration:none; border:none; } #confirmBox .button:last-child{ margin-right:0;} #confirmBox .button span{ position:absolute; top:0; right:-5px; background: #0E8DCE; width:5px; height:33px } #confirmBox .blue{ background-position:left top;text-shadow:1px 1px 0 #5889a2;} #confirmBox .blue span{ background-position:-195px 0;} #confirmBox .blue:hover{ background-position:left bottom;} #confirmBox .blue:hover span{ background-position:-195px bottom;} #confirmBox .gray{ background-position:-200px top;text-shadow:1px 1px 0 #707070;} #confirmBox .gray span{ background-position:-395px 0;} #confirmBox .gray:hover{ background-position:-200px bottom;} #confirmBox .gray:hover span{ background-position:-395px bottom;} </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ /* * jQuery Confirmation Dialog Popup/Modal Window for Deletion approvals and other * similar user actions that require user approval. This is to replace the browsers * default Dialog confirmation windows. * http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/ */ (function($) { $.confirm = function(params) { if ($('#confirmOverlay').length) { // A confirm is already shown on the page: return false; } var buttonHTML = ''; $.each(params.buttons, function(name, obj) { // Generating the markup for the buttons: buttonHTML += '<a href="#" class="button ' + obj['class'] + '">' + name + '</a>'; if (!obj.action) { obj.action = function() {}; } }); var markup = ['<div id="confirmOverlay">', '<div id="confirmBox">', '<h1>', params.title, '</h1>', '<p>', params.message, '</p>', '<div id="confirmButtons">', buttonHTML, '</div></div></div>'].join(''); $(markup).hide().appendTo('body').fadeIn(); var buttons = $('#confirmBox .button'), i = 0; $.each(params.buttons, function(name, obj) { buttons.eq(i++).click(function() { // Calling the action attribute when a // click occurs, and hiding the confirm. obj.action(); $.confirm.hide(); return false; }); }); } $.confirm.hide = function() { $('#confirmOverlay').fadeOut(function() { $(this).remove(); }); } })(jQuery); $(function() { $(".column").sortable({ connectWith: ".column" }); // Event fired when order cards has been moved to a new column $(".column").on("sortreceive", function(event, ui){ var newStatusColumnName = $(this).data('status-name'); // Show a confirmation Dialog to save new order status or reject and move order back t previous column $.confirm({ 'title': 'Update Order Record Status?', 'message': 'You are about to update this orders Status to : ' + newStatusColumnName + '. <br />Do you wish to Continue?', 'buttons': { 'Yes, Update Order Status': { 'class': 'blue', 'action': function() { // make AJAX request to update order record status } }, 'Cancel': { 'class': 'gray', 'action': function() { // need to move the order card back to its previous status column somehow! $(ui.sender).sortable('cancel'); } } } }); }); }); });//]]> </script> </head> <body> <table border="0" width="100%" class="zebra-striped"> <tbody><tr style="font-weight:bold;text-align:center;font-size: 20px;"><td>Pending Validation</td><td>Pending Acceptance</td><td>Drafting Stage 1</td><td>Drafting Stage 2</td><td>Backing</td><td>Pumping</td><td>Shipping</td></tr><tr><td class="column ui-sortable" data-status-name="Pending Validation"> <div class="box ui-sortable-handle ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="alert-message warning"> <a href="#" data-order-id="5417" data-url="/orders/orderboards/order/5417" data-target="#myModal" class="btn btn-default openmodal">Open Order Modal</a><br> <div>Order ID: 5417</div> <div>Date Created: 2015-06-20 01:38:06</div> <div>Date Modified: 2015-06-20 01:38:06</div> <div>some order data here</div> </div> </div> <div class="box ui-sortable-handle ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="alert-message warning"> <a href="#" data-order-id="5415" data-url="/orders/orderboards/order/5415" data-target="#myModal" class="btn btn-default openmodal">Open Order Modal</a><br> <div>Order ID: 5415</div> <div>Date Created: 2015-06-19 18:53:22</div> <div>Date Modified: 2015-06-19 18:53:22</div> <div>some order data here</div> </div> </div> <div class="box ui-sortable-handle ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="alert-message warning"> <a href="#" data-order-id="0" data-url="/orders/orderboards/order/0" data-target="#myModal" class="btn btn-default openmodal">Open Order Modal</a><br> <div>Order ID: 0</div> <div>Date Created: 0000-00-00 00:00:00</div> <div>Date Modified: 0000-00-00 00:00:00</div> <div>some order data here</div> </div> </div></td><td class="column ui-sortable" data-status-name="Pending Acceptance"></td><td class="column ui-sortable" data-status-name="Drafting Stage 1"><div class="box ui-sortable-handle ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="alert-message warning"> <a href="#" data-order-id="5416" data-url="/orders/orderboards/order/5416" data-target="#myModal" class="btn btn-default openmodal">Open Order Modal</a><br> <div>Order ID: 5416</div> <div>Date Created: 2015-06-19 21:11:42</div> <div>Date Modified: 2015-06-19 21:11:42</div> <div>some order data here</div> </div> </div></td><td class="column ui-sortable" data-status-name="Drafting Stage 2"></td><td class="column ui-sortable" data-status-name="Backing"><div class="box ui-sortable-handle ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> <div class="alert-message warning"> <a href="#" data-order-id="5418" data-url="/orders/orderboards/order/5418" data-target="#myModal" class="btn btn-default openmodal">Open Order Modal</a><br> <div>Order ID: 5418</div> <div>Date Created: 2015-06-20 17:05:30</div> <div>Date Modified: 2015-06-20 17:05:30</div> <div>some order data here</div> </div> </div></td><td class="column ui-sortable" data-status-name="Pumping"></td><td class="column ui-sortable" data-status-name="Shipping"></td></tr></tbody></table> </body> </html> Code (markup):