#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    199
    Rep Power
    29

    Split out hash and last element in URL


    I need a javascript script to split off the text after the hashtag in the URL and then the text after the last slash.

    For example, say I have a URL:
    http://www.example.com/films/film-title#castcrew

    I need to generate two js variables, one with the value of "castcrew" and another with the value of "film-title".

    Here's my current code.
    Code:
    function loadAJAX(){
    var url=window.location.href;
    var parts=url.split("#");
    var pageCall=parts[1];
    if(pageCall==undefined){
    	pageCall="synopsis";
    }
    var filmCall=parts[0].split("/").pop();
    reqData(pageCall,filmCall);
    chng('nav'+pageCall);
    }
    This code triggers an AJAX call on page load. The reqData function is working but the chng function is not. The change function changes the background color of my tab.

    This is my chng function:
    Code:
    function chng(sel) {
        if(sel=="navsynopsis"){
        document.getElementById('navsynopsis').style.backgroundColor='#284757';
        document.getElementById('navcastcrew').style.backgroundColor='#183646';
        document.getElementById('navvideos').style.backgroundColor='#183646';
        document.getElementById('navextras').style.backgroundColor='#183646';
        }
    	else if(sel=="navcastcrew"){
    	document.getElementById('navsynopsis').style.backgroundColor='#183646';
    	document.getElementById('navcastcrew').style.backgroundColor='#284757';
    	document.getElementById('navvideos').style.backgroundColor='#183646';
    	document.getElementById('navextras').style.backgroundColor='#183646';
    	}
    	else if(sel=="navvideos"){
    	document.getElementById('navsynopsis').style.backgroundColor='#183646';
    	document.getElementById('navcastcrew').style.backgroundColor='#183646';
    	document.getElementById('navvideos').style.backgroundColor='#284757';
    	document.getElementById('navextras').style.backgroundColor='#183646';
    	}
    	else if(sel=="navextras"){
    	document.getElementById('navsynopsis').style.backgroundColor='#183646';
    	document.getElementById('navcastcrew').style.backgroundColor='#183646';
    	document.getElementById('navvideos').style.backgroundColor='#183646';
    	document.getElementById('navextras').style.backgroundColor='#284757';
    	}
    }
    This code is throwing an error of:
    Uncaught TypeError: Cannot read property 'style' of null on line 37.

    Line 37 is this:
    Code:
    else if(sel=="navcastcrew"){
    document.getElementById('navsynopsis').style.backgroundColor='#183646';
    My HTML document has a div with the ID of "navsynopsis", and a defined background in my CSS file.


    EDIT: The bizarre thing is this works if I abandon the window.onload=loadAJAX(); and just call the function via the HTML body onload attribute. Although I know this way is more obtrusive...
    Last edited by HDFilmMaker2112; August 5th, 2013 at 12:46 AM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    AJAX calls are typically asynchronous. In fact that's what the first "A" stands for. So your "chng" function is getting called at a time when those elements don't exist in the page. You'll need to assign "chng" as a callback for the request within your "reqData" function.

    By the way, it would be much better to use a class for the style change instead of using that unnecessarily long "chng" function.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    199
    Rep Power
    29
    Originally Posted by Kravvitz
    AJAX calls are typically asynchronous. In fact that's what the first "A" stands for. So your "chng" function is getting called at a time when those elements don't exist in the page. You'll need to assign "chng" as a callback for the request within your "reqData" function.

    By the way, it would be much better to use a class for the style change instead of using that unnecessarily long "chng" function.
    I do that how? I rarely use javascript so I honestly have no idea what I'm doing here:

    Code:
    function requestObj() {
    var xmlhttp;
    	if (window.XMLHttpRequest)
    	{// code for IE7+, Firefox, Chrome, Opera, Safari
    	xmlhttp=new XMLHttpRequest();
    	}
    	else
    	{// code for IE6, IE5
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
    return xmlhttp;
    }
    
    var request=requestObj();
    
    function reqData(filmDetailsAJAX,filmTitleAJAX){
        request.open('get','filmDetails.php?ajax&filmDetails='+filmDetailsAJAX+'&filmTitle='+filmTitleAJAX, true);
        request.onreadystatechange=handleRes;
        request.send(null);
    }
    
    function handleRes() {
        if(request.readyState == 4){
            var res=request.responseText;
            document.getElementById("filmsContent").innerHTML = res;
        }
    }
    
    function chng(sel) {
        if(sel=="navsynopsis"){
        document.getElementById('navsynopsis').style.backgroundColor='#284757';
        document.getElementById('navcastcrew').style.backgroundColor='#183646';
        document.getElementById('navvideos').style.backgroundColor='#183646';
        document.getElementById('navextras').style.backgroundColor='#183646';
        }
    	else if(sel=="navcastcrew"){
    	document.getElementById('navsynopsis').style.backgroundColor='#183646';
    	document.getElementById('navcastcrew').style.backgroundColor='#284757';
    	document.getElementById('navvideos').style.backgroundColor='#183646';
    	document.getElementById('navextras').style.backgroundColor='#183646';
    	}
    	else if(sel=="navvideos"){
    	document.getElementById('navsynopsis').style.backgroundColor='#183646';
    	document.getElementById('navcastcrew').style.backgroundColor='#183646';
    	document.getElementById('navvideos').style.backgroundColor='#284757';
    	document.getElementById('navextras').style.backgroundColor='#183646';
    	}
    	else if(sel=="navextras"){
    	document.getElementById('navsynopsis').style.backgroundColor='#183646';
    	document.getElementById('navcastcrew').style.backgroundColor='#183646';
    	document.getElementById('navvideos').style.backgroundColor='#183646';
    	document.getElementById('navextras').style.backgroundColor='#284757';
    	}
    }
    
    function loadAJAX(){
    var url=window.location.href;
    var parts=url.split("#");
    var pageCall=parts[1];
    if(pageCall==undefined){
    var pageCall="synopsis";
    }
    var filmCall=parts[0].split("/").pop();
    reqData(pageCall,filmCall);
    chng('nav'+pageCall);
    }
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Event handlers, which in this case is for onreadystatechange, are callback functions. So we make the following changes to call the "chng" function when the AJAX request completes:
    Code:
    function reqData(filmDetailsAJAX,filmTitleAJAX){
        request.open('get','filmDetails.php?ajax&filmDetails='+filmDetailsAJAX+'&filmTitle='+filmTitleAJAX, true);
        request.onreadystatechange=function(){ handleRes(filmDetailsAJAX); };
        request.send(null);
    }
    
    function handleRes(filmDetails) {
        if(request.readyState == 4){
            var res=request.responseText;
            document.getElementById("filmsContent").innerHTML = res;
            chng('nav'+filmDetails);
        }
    }
    
    function loadAJAX(){
    var url=window.location.href;
    var parts=url.split("#");
    var pageCall=parts[1];
    if(pageCall===undefined){
    var pageCall="synopsis";
    }
    var filmCall=parts[0].split("/").pop();
    reqData(pageCall,filmCall);
    // line moved to handleRes()
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    199
    Rep Power
    29
    Originally Posted by Kravvitz
    Event handlers, which in this case is for onreadystatechange, are callback functions. So we make the following changes to call the "chng" function when the AJAX request completes:
    Code:
    function reqData(filmDetailsAJAX,filmTitleAJAX){
        request.open('get','filmDetails.php?ajax&filmDetails='+filmDetailsAJAX+'&filmTitle='+filmTitleAJAX, true);
        request.onreadystatechange=function(){ handleRes(filmDetailsAJAX); };
        request.send(null);
    }
    
    function handleRes(filmDetails) {
        if(request.readyState == 4){
            var res=request.responseText;
            document.getElementById("filmsContent").innerHTML = res;
            chng('nav'+filmDetails);
        }
    }
    
    function loadAJAX(){
    var url=window.location.href;
    var parts=url.split("#");
    var pageCall=parts[1];
    if(pageCall===undefined){
    var pageCall="synopsis";
    }
    var filmCall=parts[0].split("/").pop();
    reqData(pageCall,filmCall);
    // line moved to handleRes()
    }
    Absolutely perfect. Thank You.


    It seems that I also had another issue that was generating the "Uncaught TypeError: Cannot read property 'style' of null" error. I was removing certain div elements via PHP. Say that if a particular AJAX tab had no data to return, I removed the tab with PHP, because it had no data to show, so why bother making the tab visible? As a result Javascript was flagging since it couldn't find the tab with that ID tag. I switched my method from removing the tab with PHP to hiding it with CSS.

    You can see what I mean here: http://www.kamentertainment.net/film...-for-christmas

    and here:
    http://www.kamentertainment.net/film...d-in-the-rough
    (This page has the "videos" and "synopsis" tabs removed)

    Just thought I'd mention this and show an example if anybody else ever has a similar issue.
    Last edited by HDFilmMaker2112; August 6th, 2013 at 03:35 AM.

IMN logo majestic logo threadwatch logo seochat tools logo