CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Javascript moved to external file not working (http://www.codingforums.com/showthread.php?t=287566)

Catalin 02-13-2013 09:38 AM
Javascript moved to external file not working
 
I have a problem with a Javascript file. I am trying to move the file content to an external file. Even the path is OK (I believe) the file simply not working when is called from the external file. Here is the code:

Code:
<script type="text/javascript">
// function that writes the list order to a cookie
function saveOrder() {
    $(".column").each(function(index, value){
        var colid = value.id;
        var cookieName = "cookie-" + colid;
        // Get the order for this column.
        var order = $('#' + colid).sortable("toArray");
        // For each portlet in the column
        for ( var i = 0, n = order.length; i < n; i++ ) {
            // Determine if it is 'opened' or 'closed'
            var v = $('#' + order[i] ).find('.portlet-content').is(':visible');
            // Modify the array we're saving to indicate what's open and
            //  what's not.
            order[i] = order[i] + ":" + v;
        }
        $.cookie(cookieName, order, { path: "/", expiry: new Date(2012, 1, 1)});
    });
}

// function that restores the list order from a cookie
function restoreOrder() {
    $(".column").each(function(index, value) {
        var colid = value.id;
        var cookieName = "cookie-" + colid
        var cookie = $.cookie(cookieName);
        if ( cookie == null ) { return; }
        var IDs = cookie.split(",");
        for (var i = 0, n = IDs.length; i < n; i++ ) {
            var toks = IDs[i].split(":");
            if ( toks.length != 2 ) {
                continue;
            }
            var portletID = toks[0];
            var visible = toks[1]
            var portlet = $(".column")
                .find('#' + portletID)
                .appendTo($('#' + colid));
            if (visible === 'false') {
            }
        }
    });
}

// function that writes the list order to a cookie
// set the list selector
var setSelector = "ul.widgets";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;

// function that writes the list order to a cookie
function getOrder_s() {
        // save custom order to cookie
        $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}
 
// function that restores the list order from a cookie
function restoreOrder_s() {
        var list = $(setSelector);
        if (list == null) return
       
        // fetch the cookie value (saved order)
        var cookie = $.cookie(setCookieName);
        if (!cookie) return;
       
        // make array from saved order
        var IDs = cookie.split(",");
       
        // fetch current order
        var items = list.sortable("toArray");
       
        // make array from current order
        var rebuild = new Array();
        for ( var v=0, len=items.length; v<len; v++ ){
                rebuild[items[v]] = items[v];
        }
       
        for (var i = 0, n = IDs.length; i < n; i++) {
               
                // item id from saved order
                var itemID = IDs[i];
               
                if (itemID in rebuild) {
               
                        // select item id from current order
                        var item = rebuild[itemID];
                       
                        // select the item according to current order
                        var child = $("ul.widgets.ui-sortable").children("#" + item);
                       
                        // select the item according to the saved order
                        var savedOrd = $("ul.widgets.ui-sortable").children("#" + itemID);
                       
                        // remove all the items
                        child.remove();
                       
                        // add the items in turn according to saved order
                        // we need to filter here since the "ui-sortable"
                        // class is applied to all ul elements and we
                        // only want the very first!  You can modify this
                        // to support multiple lists - not tested!
                        $("ul.widgets.ui-sortable").filter(":first").append(savedOrd);
                }
        }
}

$(function() {


       
/* various widget actions */
$('.minimize').click(function() {
        $(this).parent('h3').next('.container').toggle();
});

$('.Sminimize').click(function() {
        $(this).parent('h2').next().toggle();
});

$('.Wminimize').click(function() {
        $(this).parent('h2').next().toggle();
});

$('.close').click(function() {
        $(this).parent('h3').parent('.cat-widget').fadeOut('slow');
        $.cookie($(this).parent('h3').parent('.cat-widget').attr('id'), 'closed', { path: '/', expires: 100 });
        return false;
});

$('.Sclose').click(function() {
        $(this).parent('h2').parent().fadeOut('slow');
        $.cookie($(this).parent('h2').parent('.box_a').attr('id'), 'closed', { path: '/', expires: 100 });
        return false;
});

$('.Wclose').click(function() {
        $(this).parent('h2').parent().fadeOut('slow');
        $.cookie($(this).parent('h2').parent('li').attr('id'), 'closed', { path: '/', expires: 100 });
        return false;
});

$('.cat-widget').each( function() {
        var cat_ID = $(this).attr('id');
        if ($.cookie(cat_ID) == 'closed') $(this).hide();
});

$('.box_a').each( function() {
        var box_ID = $(this).attr('id');
        if ($.cookie(box_ID) == 'closed') $(this).hide();
});

$('.widgets li').each (function() {
        var sidebar_ID = $(this).attr('id');
        if ($.cookie(sidebar_ID) == 'closed') $(this).hide();
});



// more stories
$('ul.more_stories li').css({'display': 'none'});
$("ul.more_stories").each(function(){
$(this).children('li').slice(0, <?php echo $comfy['moreitems']; ?>).show();
});

/* control visible stories */
$('.minus').click(function() {
$(this).parent().next('ul').children('li:visible:last').hide();
});

$('.plus').click(function() {
$(this).parent().next('ul').children('li:hidden:first').show();
});

// append top menu
$("#topnav ul:first").prepend('<li class="left"></li>');
$("#topnav ul:first").append('<li class="right"></li>');

// featured 1
$("span.overlay").fadeTo(1, 0.70);
$("ul.items").tabs(".pane", {
        effect: "fade",
        fadeInSpeed: 500,
        fadeOutSpeed: 500,
        rotate: true
}).slideshow({autoplay: true, interval: 4000, clickable: false});
       
// featured 2
$("ul.featuredposts").tabs(".featuredposts_content", {
        effect: "default",
        rotate: true
}).slideshow({autoplay: true, interval: 4000, clickable: false});

});
</script>

The path file is: <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/header.js"></script>

I've deleted <script type="text/javascript"> and </script> in the external file. I've deleted the comments too in the external file but is not working anymore.

What I am missing? :confused:

low tech 02-13-2013 10:11 AM
Hi

Code:
The path file is: <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/header.js"></script>
I would say first, right click and view source and see if the path is correct in the src

LT

Catalin 02-13-2013 12:53 PM
Yes, the file is visible when I look in the code. The path to file is correct.

WolfShade 02-13-2013 01:50 PM
If the ext file has <script> and </script>, remove them. The .js file extension tells the browser that it's javascript code.

Catalin 02-13-2013 02:37 PM
I've removed the unnecessary code (I hope everything). The code looks like this one in this moment:

Code:
function saveOrder() {
    $(".column").each(function(index, value){
        var colid = value.id;
        var cookieName = "cookie-" + colid;
        var order = $('#' + colid).sortable("toArray");
        for ( var i = 0, n = order.length; i < n; i++ ) {
            var v = $('#' + order[i] ).find('.portlet-content').is(':visible');
            order[i] = order[i] + ":" + v;
        }
        $.cookie(cookieName, order, { path: "/", expiry: new Date(2012, 1, 1)});
    });
}

function restoreOrder() {
    $(".column").each(function(index, value) {
        var colid = value.id;
        var cookieName = "cookie-" + colid
        var cookie = $.cookie(cookieName);
        if ( cookie == null ) { return; }
        var IDs = cookie.split(",");
        for (var i = 0, n = IDs.length; i < n; i++ ) {
            var toks = IDs[i].split(":");
            if ( toks.length != 2 ) {
                continue;
            }
            var portletID = toks[0];
            var visible = toks[1]
            var portlet = $(".column")
                .find('#' + portletID)
                .appendTo($('#' + colid));
            if (visible === 'false') {
            }
        }
    });
}

var setSelector = "ul.widgets";
var setCookieName = "listOrder";
var setCookieExpiry = 7;

function getOrder_s() {
        $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}
 
function restoreOrder_s() {
        var list = $(setSelector);
        if (list == null) return
       
        var cookie = $.cookie(setCookieName);
        if (!cookie) return;
       
        var IDs = cookie.split(",");
       
        var items = list.sortable("toArray");
       
        var rebuild = new Array();
        for ( var v=0, len=items.length; v<len; v++ ){
                rebuild[items[v]] = items[v];
        }
       
        for (var i = 0, n = IDs.length; i < n; i++) {
               
                var itemID = IDs[i];
               
                if (itemID in rebuild) {
               
                        var item = rebuild[itemID];
                       
                        var child = $("ul.widgets.ui-sortable").children("#" + item);
                       
                        var savedOrd = $("ul.widgets.ui-sortable").children("#" + itemID);
                       
                        child.remove();
                       
                        $("ul.widgets.ui-sortable").filter(":first").append(savedOrd);
                }
        }
}

$(function() {

$(".column").sortable({
        connectWith: ['.column'],
                cursor: 'move',
                handle: 'h3',
                opacity: 0.80,
                tolerance: 'pointer',
                items: '.cat-widget',
                revert: true,
        stop: function() { saveOrder(); }
});

restoreOrder();
       
$(".widgets").sortable({
                cursor: 'move',
                handle: 'h2',
                items: '.widget',
                opacity: 0.80,
                tolerance: 'pointer',
                revert: true,
                update: function() { getOrder_s(); }
});
       
restoreOrder_s();


$('.minimize').click(function() {
        $(this).parent('h3').next('.container').toggle();
});

$('.Sminimize').click(function() {
        $(this).parent('h2').next().toggle();
});

$('.Wminimize').click(function() {
        $(this).parent('h2').next().toggle();
});

$('.close').click(function() {
        $(this).parent('h3').parent('.cat-widget').fadeOut('slow');
        $.cookie($(this).parent('h3').parent('.cat-widget').attr('id'), 'closed', { path: '/', expires: 100 });
        return false;
});

$('.Sclose').click(function() {
        $(this).parent('h2').parent().fadeOut('slow');
        $.cookie($(this).parent('h2').parent('.box_a').attr('id'), 'closed', { path: '/', expires: 100 });
        return false;
});

$('.Wclose').click(function() {
        $(this).parent('h2').parent().fadeOut('slow');
        $.cookie($(this).parent('h2').parent('li').attr('id'), 'closed', { path: '/', expires: 100 });
        return false;
});

$('.cat-widget').each( function() {
        var cat_ID = $(this).attr('id');
        if ($.cookie(cat_ID) == 'closed') $(this).hide();
});

$('.box_a').each( function() {
        var box_ID = $(this).attr('id');
        if ($.cookie(box_ID) == 'closed') $(this).hide();
});

$('.widgets li').each (function() {
        var sidebar_ID = $(this).attr('id');
        if ($.cookie(sidebar_ID) == 'closed') $(this).hide();
});

$('.clearfield').each(function() {
    var default_value = this.value;
    $(this).css('color', '#666');
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            this.value = default_value;
        }
    });
});

$('ul.more_stories li').css({'display': 'none'});
$("ul.more_stories").each(function(){
$(this).children('li').slice(0, <?php echo $comfy['moreitems']; ?>).show();
});

$('.minus').click(function() {
$(this).parent().next('ul').children('li:visible:last').hide();
});

$('.plus').click(function() {
$(this).parent().next('ul').children('li:hidden:first').show();
});

$("#topnav ul:first").prepend('<li class="left"></li>');
$("#topnav ul:first").append('<li class="right"></li>');

$("span.overlay").fadeTo(1, 0.70);
$("ul.items").tabs(".pane", {
        effect: "fade",
        fadeInSpeed: 500,
        fadeOutSpeed: 500,
        rotate: true
}).slideshow({autoplay: true, interval: 4000, clickable: false});
       
$("ul.featuredposts").tabs(".featuredposts_content", {
        effect: "default",
        rotate: true
}).slideshow({autoplay: true, interval: 4000, clickable: false});

});
I've solved the problem. In the Javascript code was a short .php code inserted. I've deleted the .php and now everything work fine. Thank you! :)

felgall 02-13-2013 08:57 PM
Quote:
Originally Posted by Catalin (Post 1313072)
I've solved the problem. In the Javascript code was a short .php code inserted. I've deleted the .php and now everything work fine
If you want to include some PHP code in an external JavaScript then give the file a PHP extension and use PHP to add a header to the file:

Use the following if you need to support IE8 and earlier

header('Content-type: text/javascript');

or the following to set the correct JavaScript MIME type if you only need to support browsers that understand JavaScript

header('Content-type: application/javascript');


All times are GMT +1. The time now is 02:18 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.