Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sugarcane Script Help

How can I run a script right at the end of a particular page loading. I'm aware of the "document.getElementById" but when I run it inside <script> tags nothing happens. Is there somewhere else I need to be putting this or is there another way to get this to run?

Comments

  • edited May 2015
    Sugarcane supports both prerender and postrender events.

    So if you want some Javascript to only be run when the Reader views a particular passage you would do something like the following.

    note: The passage this code is looking for is titled "Inventory" and my postrender function is named logging. You need to change both of these to whatever you need them to be.
    postrender.logging = function(a) {
    	if (this.title == "Inventory") {
    		console.log("The Reader is viewing the inventory passage.");
    	}
    };
    
  • I tried putting this in its own script file, but it throws an generic error when I try to run it.
    postrender.updateArena = function(a) 
    {
    	if (this.title == "TestArena") 
    	{
    		document.getElementById("l_name").innerHTML = "Bob";
    	}
    };
    

    There's a bunch more things I want to do in there, but I thought I'd start simple with just changing what something says.
  • edited May 2015
    The issue is that your input element l_name does not exist at the time your code is happening, as this test will show:
    postrender.updateArena = function(a) {
    	if (this.title == "TestArena") {
    		var inp = document.getElementById("l_name")
    		console.log("l_name before timeout: " + inp);
    
    		setTimeout(function(){
    			var inp = document.getElementById("l_name");
    			console.log("l_name during timeout: " + inp);
    		},100)
    	}
    };
    

    The console will show the following:
    "l_name before timeout: null"
    "l_name during timeout: [object HTMLInputElement]"
    
  • edited May 2015
    Hmm, maybe you can help me out here if I explain this a bit more. So the page I'm using this for is a battle screen (looks like a pokemon battle screen atm lol). So on each side there are a set of div and progress bars for each fighter (Right now there is a stamina bar, a health bar, a shield bar, and two div containing the names for both fighters).

    What I'm trying to do is load the page elements (the name div and the progress bars I mentioned) with the updated/correct values for each current fighter. Is there any advice you can offer to help me get this working? I'm a bit stumped at the moment...
  • These "set of div", did you create them as siblings of the #passages div or are they part of the passage contents currently being shown?

    eg.
    <div id="something1">Name and Bar</div>
    <div id="passages">.....</div>
    <div id="something2">Name and Bar</div>
    
    or
    
    <div id="passages">
    	<div id="passageStart">
    	.....
    		<div id="something1">Name and Bar</div>
    		.....
    		<div id="something2">Name and Bar</div>
    	....
    	</div>
    </div>
    
    Because if they are siblings then their contents should exist but if they are part of the passage contents then you will need to use setTimeout to delay the running of your update javascript until the passage has been rendered.
  • edited May 2015
    Both the prerender and postrender task functions are passed the incoming passage's render buffer element as their first parameter. You should simply leverage that and the querySelector() method, rather than using timing functions.

    For example:
    postrender["updateArena"] = function (content) {
    	if (this.title === "TestArena") {
    		content.querySelector("#l_name").innerHTML = "Bob";
    	}
    };
    
  • Both the prerender and postrender task functions are passed the incoming passage's render buffer element as their first parameter.
    Does that include elements added to the DOM outside of the #passages div?
    This is why I was asking @Eaturbrainz about his DOM structure.

  • edited May 2015
    No, just the rendering passage.

    There are three basic possibilities for what's going on here:
    1. The target element is created within the "#passages > .passage > .content" element (i.e. the rendered passage content element). The code I outlined previously will work in this case.
    2. The target element is created within the "#passages" element (i.e. it's a sibling of either the ".passage" or the ".passage > .content" elements). This is unlikely to be the case (I should hope anyway).
    3. The target element is created within the <body> element. Eaturbrainz original code should have worked in this case, assuming that the ID was correct and the error wasn't unrelated (since it didn't work, we can probably assume this is not the case).
    1 & 3 are easy to deal with, 2 is problematic since it's the worst of both worlds.
  • Both the prerender and postrender task functions are passed the incoming passage's render buffer element as their first parameter. You should simply leverage that and the querySelector() method, rather than using timing functions.

    For example:
    postrender["updateArena"] = function (content) {
    	if (this.title === "TestArena") {
    		content.querySelector("#l_name").innerHTML = "Bob";
    	}
    };
    

    Hey this worked for me. Thanks for your help guys. I'll report back here again if I run into any other issues.
Sign In or Register to comment.