Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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?

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    838
    Thanks
    172
    Thanked 90 Times in 90 Posts
    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
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, the file is visible when I look in the code. The path to file is correct.

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    If the ext file has <script> and </script>, remove them. The .js file extension tells the browser that it's javascript code.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by Catalin; 02-13-2013 at 02:55 PM. Reason: Solved

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by Catalin View Post
    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');
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •