Iframe - Loading web page in from button

Must not reload full page

Page 1 of 1

6 Replies - 2306 Views - Last Post: 15 October 2009 - 12:19 PM

#1 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 311
  • Joined: 10-July 07

Iframe - Loading web page in from button

Posted 15 October 2009 - 08:50 AM

Hi,

I'm trying to get this a link to change the ocntent inside an Iframe. The first 2 examples work flawlessly, but when I hit the third and fourth one refresh the whole page and that's what I don't want.

I want it so that ONLY the iframe content changes and not that the whole page refreshes.

Can some see what I did wrong. Here's an online example.

<head>
<script type="text/javascript">
/* Free code from dyn-web.com */

// Two choices for loading new pages into the iframe 

// dom0 frames referencing 
function loadIframe(iframeName, url) {
	if ( window.frames[iframeName] ) {
		window.frames[iframeName].location = url;   
		return false;
	}
	return true;
}

// assign new url to iframe element's src property
function changeIframeSrc(id, url) {
	if (!document.getElementById) return;
	var el = document.getElementById(id);
	if (el && el.src) {
		el.src = url;
		return false;
	}
	return true;
}

</script>
</head>

<body>

  <ul>
	<li><a href="load1.html" onclick="return changeIframeSrc('ifrm', this.href)">Page 1</a> </li>
	<li><a href="load2.html" onclick="return changeIframeSrc('ifrm', this.href)">Page 2</a></li>
	<li><a href="http://www.oddsmaker.com" onclick="return changeIframeSrc('ifrm', this.href)">oddsmaker</a></li>
	<li><a href="http://www.oddsmaker.com/poker" onclick="return changeIframeSrc('ifrm', this.href)">oddsmaker poker</a></li>
  </ul>

</body>



Can anyone see why it's sometimes working fine and other times refeshing the whole page?

Thanks alot,
Brandon

Is This A Good Question/Topic? 0
  • +

Replies To: Iframe - Loading web page in from button

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 919
  • View blog
  • Posts: 6,442
  • Joined: 07-September 06

Re: Iframe - Loading web page in from button

Posted 15 October 2009 - 09:03 AM

I am thinking that the Javascript isn't working fast enough for the link (though I don't think that should really be doing anything like this in that case, I would assume instead that it would wait for the javascript to return before doing anything else).

One way you could get around this is by using Ajax and having your content stored in something like a DIV. That way you can just modify the content in that DIV through the Ajax return information and not worry about it.

Now, iframes are pretty archaic methods of changing a portion of a page (don't get me wrong, I have used them in the past, it is just that a lot of people seem to frown upon their use these days). One thing you could do to make it so you don't have to worry about using javascript for this is to include a target attribute in the links that has the same name as the iFrame does. That should point all clicks done by to those links directly to the frame instead of having a possibility of being transfered to the browser window as a whole.

If you don't want to worry about coming up with an ajax script on your own (and you choose to use it) I can upload a newer version of jBeta (my Javascript library) which has ajax capabilities built in (you could also use jQuery, but for obvious reasons I am partial to my library).
Was This Post Helpful? 0
  • +
  • -

#3 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Iframe - Loading web page in from button

Posted 15 October 2009 - 09:27 AM

It rather implies that the function is occasionally returning true, which will cause the link to trigger a page load as normal. I'm not able to recreate the error using the provided link though, what browser are you using when it breaks?
Was This Post Helpful? 0
  • +
  • -

#4 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 311
  • Joined: 10-July 07

Re: Iframe - Loading web page in from button

Posted 15 October 2009 - 09:32 AM

Thanks BetaWar,

That sounds like a good idea, I've never tried Ajax before, so maybe I'll like it, could you send me that example and I'll give it a shot.
Do you have to have Ajax installed on your server for it to work?

Thanks,
Brandon
Was This Post Helpful? 0
  • +
  • -

#5 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 311
  • Joined: 10-July 07

Re: Iframe - Loading web page in from button

Posted 15 October 2009 - 09:38 AM

Thanks theHat,

Does that mean I should do this make everything to false? like...
[code]<script type="text/javascript">
/* Free code from dyn-web.com */

// Two choices for loading new pages into the iframe

// domo frames referencing
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
return false;
}

// assign new url to iframe element's src property
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {
el.src = url;
return false;
}
return false;
}

</script>

I'm using the newest IE. You can download the example here if you'd like.

Thanks,
bmcc81
Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Iframe - Loading web page in from button

Posted 15 October 2009 - 09:47 AM

No, you shouldn't change those true returns. They're there so that if something is wrong your link will still open, but not in the iframe.

To be honest BetaWar is correct. IFrames are a bit nasty and should be avoided if possible in favour of more modern solutions.

If you really want to persit though, try putting an alert ahead of your return true. That should show you if the conditions are not being met.
Was This Post Helpful? 0
  • +
  • -

#7 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 919
  • View blog
  • Posts: 6,442
  • Joined: 07-September 06

Re: Iframe - Loading web page in from button

Posted 15 October 2009 - 12:19 PM

Here is the latest version of jBeta (developer's edition - so it isn't compressed, but it is at least readable)

http://reigninggames...ple_v1.0.1b.zip

And here is how to set up an ajax call:

<script type="text/javascript" src="jBeta_v1_0_1b.js"></script>
<script>
jBeta.ready(function(){
  var ajax = new $.Ajax(function(info){
	$("#content_id").setProperty("innerHTML", info);
  });
  $("a").addEventListener("onclick", function(){
	  ajax.call({'method': 'get', 'url': $(this).getProperty('href'), 'params': ''});
	  return false;
  });
});
</script>

... rest of document here...

<div id="content_id">
  This content will change whenever any link that was present when the file loaded initially is clicked. Any link loaded dynamically needs to have "onclick='ajax.call(...)'" attribute in it otherwise it will load normally, however you could also just add an event to your call back function for the Ajax object that add the event listener to all links on the page every time there is an update made to the page...
</div>


Hope that makes sense. There is a working example of the Ajax class in the zip folder I have uploaded there (just in case this one doesn't seem to work). Though it is surrounded by other examples as well, but it is named pretty well so I think you will be able to find it.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1