Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

JS: Function not working

  • 22-04-2015 09:02AM
    #1
    Registered Users, Registered Users 2 Posts: 1,462 ✭✭✭


    For some weird reason my function isn't working and I was wondering what im missing, I'll try to explain.

    When you first load the website it needs to load a function, after this it will start loading into divs.

    Code in my div (Also tried: body onload or in the header)
    <script type="text/javascript">
    <?php  
    if(empty($write_page['1'])) { 
    ?>
    loadthisframe(home);
    <?php 
    }             
    else         
    { 
    ?>
    var <?php echo $write_page['1']; ?>;
    loadthisframe(<?php echo $write_page['1']; ?>);
    <?php
    } 
    ?>
    </script>
    

    So i stripped down the complete function to test:
    function loadthisframe(loadthisframe) {
        console.log("load page");
    }
    

    The code above will display something like:
    <script type="text/javascript">
    loadthisframe(home);
    </script>
    

    or
    <script type="text/javascript">
    var contact;
    loadthisframe(contact);
    </script>
    

    This is based on what page you are at,



    But it doesn't work, when I delete the "var <?php echo $write_page; ?>;"

    I get the following: "ReferenceError: home is not defined"

    The rest of the website works fine, its not that its waiting for jquery or so..



    When i click on a existing tab, which does the same (kinda), works fine.
    $('#tabhome').bind('click', function(event) {
    var home = "home";	
    loadpageframe(home);
    window.history.pushState("object or string", "Title", "/");
    });
    


    I also tried replacing loadthisframe with loadpageframe but there is where the problem started so i'm trying to strip down till i find the issue.






    Update 11:42, I updated the load code to:
    <script type="text/javascript">
    window.onload = function(){
    <?php  
    if(empty($write_page['1'])) { 
    ?>
    var home = "home";
    loadthisframe(home);
    <?php 
    } 			
    else 		
    { 
    ?>
    var <?php echo $write_page['1']; ?> = "<?php echo $write_page['1']; ?>";
    loadthisframe(<?php echo $write_page['1']; ?>);
    <?php
    } 
    ?>
    }
    </script>
    

    and the function to:
    function loadthisframe(paged) {
    	var framed = paged;
    	console.log("loading page "+framed);
    	console.log("starting injecting frame "+framed);
    	loadpageframe(framed);
    }
    



    console.log output:

    ReferenceError: loadpageframe is not defined main.data.js:174:1
    "loading page home" main.data.js:172:1
    "starting injecting framehome" main.data.js:173:1


    So I replaced 'loadpageframe' by 'loadpageframe' for testing, giving output: ReferenceError: loadpageframe is not defined




    this is my loadpageframe:

    function loadpageframe(loadframe) {
    	var paged = loadframe;
    	console.log("/html/"+paged+".php");
    	$.ajax({
            type: "GET",
            url: "/html/"+paged+".php",
            cache: false,
    		beforeSend: function() { 
    			$("#wait").css("display", "block");
    			$('#dataincontent').html("&nbsp;");  
    			if(paged == "videos") {
    			$("#tabblog").removeClass('ui-btn-active');
    			$("#tabprojects").removeClass('ui-btn-active');				
    			$("#tabvideos").addClass('ui-btn-active');
    			} else if(paged == "blog") {
    			$("#tabblog").addClass('ui-btn-active');
    			$("#tabprojects").removeClass('ui-btn-active');				
    			$("#tabvideos").removeClass('ui-btn-active');
    			} else if(paged == "projects") {
    			$("#tabblog").removeClass('ui-btn-active');
    			$("#tabprojects").addClass('ui-btn-active');				
    			$("#tabvideos").removeClass('ui-btn-active');
    			}
    			else
    			{
    			$("#tabblog").removeClass('ui-btn-active');
    			$("#tabprojects").removeClass('ui-btn-active');				
    			$("#tabvideos").removeClass('ui-btn-active');
    			}
    		},
            success: function (data) { 
    			$('#dataincontent').html(data); 
    		},
            error: function (data) { 
    			$('#contentdata').html("ERROR"); 
    		},
    		complete: function() { 
    			$("#wait").css("display", "none"); 
    			$("#dataincontent").css("display", "inline-block"); 
    		}
        });
    }
    



    FIXED!

    Moved the code to another .js file for some reason it doesn't accept to be after onload which ofc is logic -_-


Advertisement