CODEWITHSUNDEEP
javascriptjqueryjsfiddle
Dave
Dave

Reputation: 2601

How can I adapt code from a JSFiddle to work in a browser?

I modified an existing JSFiddle and forked it. I am trying to translate this code to a .cshtml in an MVC application. I have read questions similar to this, which suggest the problem is happening because people aren't using Onload or $document.ready(). I don't believe that to be the case in my situation.

The head of my document looks like this: 

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" />
    <link rel="stylesheet" href="~/CSS/slider.css" />

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    @*<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>*@

The CSS is an external file and looks likes this:

.slide {
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    background: red;
}
.slide-back {
    position:absolute;
    height:100%;
 }

The Javascript code for the $document.ready() is as follows. 

    <script>
    $(document).ready(function () {


        var doUpdate = function (event, ui) {
            alert('doUpdate1'); //This fires. 

            $('#slide1 .slide-back').remove();
            $($('#slide1 a').get().reverse()).each(function (i) {
                var bg = '#fff';
                if (i == 1) {
                    bg = '#00f';
                } else if (i == 2) {
                    bg = '#0f0';
                } else if (i == 3) {
                    bg = '#f00';
                } else if (i == 4) {
                    bg = '#0ff';
                }

                $('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));

            });
        };

        $('#slide1').slider({
            slide: doUpdate,
            change: doUpdate,
            min: 0,
            max: 1000,
            values: [200, 500, 800]
        });

        doUpdate();
    });
</script>

I have tried putting this code in the both head and body parts of the page. Each time the page loads, the alert is fired, however when the scrollbar shows up, it is a normal gray color with only one knob on the slider. In the JSFiddle, there are three knobs on a colorful slider.

I thought I might have been missing a reference to JQueryUI, so I added this to to my head.

<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>

That just makes things worse. When I have that there, I get a blank page with no errors in the console. I don't know what else I would need. Can anyone tell me where I am going wrong?

The JSFiddle can be found Here.

Upvotes: 0

Views: 155

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42304

There's nothing special about a JSFiddle; if you are not getting the same results, it means that something is different. This is usually due to incompatibilities between different versions of the various plugins. You can find out which specific versions of plugins they're using by checking the 'Network' tab of the F12 Developer Tools.

For example, the JSFiddle uses version 1.4.4 of jQuery:

http://code.jquery.com/jquery-1.4.4.min.js

Whereas you use 1.11.3 (in additon to loading jQuery Mobile 1.4.5):

https://code.jquery.com/jquery-1.11.3.min.js
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js

The JSFiddle does indeed use jQuery UI as well
(which is 1.8.5, the same version as you, albeit from a different source):

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js

Removing your jQuery mobile reference, and switching to jQuery 1.4.4 will probably solve your problem.

Hope this helps! :)

Upvotes: 3

theGleep
theGleep

Reputation: 1187

Before running the fiddle, open your developer tools (F12) and change to the network tab ... when you run the fiddle, a bunch of files will be downloaded. You will probably want to add those files to your HTML. At least some of them.

Upvotes: 0

Related Questions