jsfiddle not working for me

saturn100 Well-Known Member

Messages:: 465

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 111

#1

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

saturn100, Aug 9, 2015 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#2

Yup. You've loaded jquery-ui before jquery - that won't work. You need to load the jquery main library first.

PoPSiCLe, Aug 9, 2015 IP

saturn100 Well-Known Member

Messages:: 465

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 111

#3

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:

saturn100, Aug 10, 2015 IP

qwikad.com Illustrious Member Affiliate Manager

Messages:: 7,151

Likes Received:: 1,656

Best Answers:: 29

Trophy Points:: 475

#4

I guess you fixed it, because I do get a popup that asks: "Update Order Record Status? Yes / Cancel"

qwikad.com, Aug 10, 2015 IP

saturn100 Well-Known Member

Messages:: 465

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 111

#5

i did not do the JS fiddle
I am trying to copy it for a site I am working on

saturn100, Aug 10, 2015 IP

qwikad.com Illustrious Member Affiliate Manager

Messages:: 7,151

Likes Received:: 1,656

Best Answers:: 29

Trophy Points:: 475

#6

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

qwikad.com, Aug 10, 2015 IP

Log in or Sign up

Advertising (learn more)

jsfiddle not working for me

saturn100 Well-Known Member

PoPSiCLe Illustrious Member

saturn100 Well-Known Member

qwikad.com Illustrious Member Affiliate Manager

saturn100 Well-Known Member

qwikad.com Illustrious Member Affiliate Manager

Log in or Sign up

Advertising (learn more)

jsfiddle not working for me

saturn100 Well-Known Member

PoPSiCLe Illustrious Member

saturn100 Well-Known Member

qwikad.com Illustrious Member Affiliate Manager

saturn100 Well-Known Member

qwikad.com Illustrious Member Affiliate Manager

Useful Searches