Change Script via Button Press on Blog

theert · 08-13-2012, 12:32 AM

Greetings!

I have two scripts that loads RSS feeds.

ScriptThisWeek

Code:

<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>

ScriptNextWeek

Code:

<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistnextweek%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>

Ideally, I would like to have two buttons at the top of a page. Upon clicking ButtonThisWeek, ScriptThisWeek will load below on the page. Upon clicking ButtonNextWeek, ScriptNextWeek will load below on the page. However, only one script will load at a time and replace the previously loaded one.

I'm a bit out of my experience when it comes to user interactions. Any help would greatly be appreciated.

To complicate matters, I'm restricted by what BlogSpot will allow.

Thanks!

Old Pedant · 08-13-2012, 01:34 AM

There's probably one simple answer: Allow both feeds to load, but have your two buttons only control which one is VISIBLE.

Since I have no idea what BlogSpot allows/supports, this may be the lowest possible "impact" on the page.

So something like this:

Code:

<input type="button" value="This Week" 
 onclick="document.getElementById('DIVNEXTWEEK').style.display='none';
          document.getElementById('DIVTHISWEEK').style.display='block';"/>
<input type="button" value="Next Week" 
 onclick="document.getElementById('DIVTHISWEEK').style.display='none';
          document.getElementById('DIVNEXTWEEK').style.display='block';"/>
<div id="DIVTHISWEEK" style="display: none;">
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
</script>
</div>
<div id="DIVNEXTWEEK" style="display: none;">
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
</div>

It's a bit hacky, but it just might work.

theert · 08-13-2012, 02:22 AM

That worked out great. Thank you very much.

I had made a slight error in the second script that I had to fix (in the script you gave me and the original post). Totally my fault. I had accidentally pasted the first script a second time.

There is only one thing I can ask of you. Is there a way to make the first script load by default?

Old Pedant · 08-13-2012, 02:24 AM

Of course.

Just remove the style="display: none;" from the first <div>.

theert · 08-13-2012, 02:46 AM

Thank you so very much! Using your framework, I've expanded on the code to include a third button. You've helped me out greatly and I've learned a very good way of handling JavaScript.

You can look at the final product here:
http://paladintag.blogspot.com/p/comics.html

Code:

<input type="button" value="This Week" 
 onclick="document.getElementById('DIVTHISWEEK').style.display='block';
          document.getElementById('DIVNEXTWEEK').style.display='none';
          document.getElementById('DIVBEYONDWEEK').style.display='none';"/>
<input type="button" value="Next Week" 
 onclick="document.getElementById('DIVTHISWEEK').style.display='none';
          document.getElementById('DIVNEXTWEEK').style.display='block';
          document.getElementById('DIVBEYONDWEEK').style.display='none';"/>
<input type="button" value="Beyond" 
 onclick="document.getElementById('DIVTHISWEEK').style.display='none';
          document.getElementById('DIVNEXTWEEK').style.display='none';
          document.getElementById('DIVBEYONDWEEK').style.display='block';"/>
<div id="DIVTHISWEEK">
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
</div>
<div id="DIVNEXTWEEK" style="display: none;">
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistnextweek%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
</div>
<div id="DIVBEYONDWEEK" style="display: none;">
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistbeyondnextweek%3Fformat%3Dxml&chan=y&num=7&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
</div>

<noscript>
<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=y">View RSS feed</a>
</noscript>
<noscript>
<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=y">View RSS feed</a>
</noscript>
<noscript>
<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistbeyondnextweek%3Fformat%3Dxml&chan=y&num=7&utf=y&html=y">View RSS feed</a>
</noscript>

Old Pedant · 08-13-2012, 05:37 AM

Well, actually this is *NOT* a good way of handling JavaScript. Because using this code *ALL* those feeds have to run every time somebody hits the page, even if the person is only interested in one of them.

There are surely much better ways to do this.

But I have no idea what kind of insertions BlogSpot allows/disallows, so this was just a scheme that I thought would work in most any situation if JavaScript is allowed, at all.