ajax help..

@nooor83Mar 02.2006

hi guys,

im trying to do something with ajax….i have a page with three link..when i press the link i want the linked page to load without refreshing..only that much im trying to..anyone can help..

thanx alot for the help..

Noor

to post a comment

JavaScript

16 Comments(s) _↴

@phpnoviceMar 02.2006 — #You want the linked page to load where?

@jnosterMar 02.2006 — #I may be new to this forum but I've done what you are trying to do.

The best way I've found to do this is to use iframes(inline frames). Nobody likes <frames> but <iframes> are easier to work with. I have used them a lot in applications here at my work. Incorporate the iframe in your HTML like this...

<iframe id="myiframe" name="myiframe">

</iframe>

Then you can reference your iframe through your js like this...

var myiframe = document.getElementById('myiframe');

After that use the setAttribute to load the URL you want loaded...

myiframe.setAttribute("src","url");

When the iframe tag is written in HTML it has an attribute called 'src', or source. Using seAttribute in JS allows you to manipulate that attribute dynamically. Be sure to include at least an onClick event handler in your <a> tag that references this function. The above code should be written in a function like...

function changeContent(source){

var myiframe = document.getElementById('myiframe');

myiframe.setAttribute("src",source);//'source' here will be passed to the function through the onClick

}

while in your HTML you should have written in the link...

<a onClick="changeContent('http://www.mylink.com');">MyLink.com</a>

The above HTML should work. I may be wrong though. You may have to include an attribute that looks something like "href=#".

The only other part of this that you need to understand is that the iframe should be controlled using CSS. The iframe needs a size and a location, otherwise it will just show up where ever the browser thinks it should be. If you need help with that let me know.

One other minor technical thing... What you are trying to do is NOT Ajax. This would be conisdered DHTML. A lot of people have interpreted Ajax in a lot of different ways and are getting it confused with DHTML. All you are doing is using a simple code to fill a window. That iframe window will have a kind of reloading event, though your entire window will not have to reload. In this sense it's helpful. But Ajax means calling server side applications using XMLHTTPRequest. The server does work and then sends the result to the js code and then the js code on the client side displays it.

Sorry if my correction in terms is overdone, but there are a lot of people reading this that might get the wrong idea about Ajax.

@phpnoviceMar 02.2006 — #One other minor technical thing... What you are trying to do is NOT Ajax. This would be conisdered DHTML.[/QUOTE]
You're making an assumption. If he is using an [B]XMLHttpRequest[/B] request to fetch the page content,

then he [B][I][U]is[/U][/I][/B] using Ajax. ?

@jnosterMar 02.2006 — #yes... a bit more information would be helpful... LOL.

But, "a page with three link" doesn't sound like an XMLHTTPRequest.

@A1ien51Mar 02.2006 — #Just a grain of salt:

But doing this will break the logic of search engines and also fail when a person does not have Ajax (XHR) or has JavaScript off.

Look at any Ajax tutorial online and it will show you that all you have to do is make a request and set the innerHTML of an element with the responseText. Now a safer bet is to use an iframe in this case wince you really are not getting any benefit from the XHR object with just displaying another page.

Eric

@nooor83authorMar 03.2006 — #thanx alot guys for the help,,

i think that i will use iframes..i really got ajax wrong thanx jnoster for the explanation...but i dunno if this will work for ths site,,not yet completed but take a look.. www.easwath.tk will iframe be ok to such sites ??

i was trying so hard to hide the iframe..lol but i coudn't see the above site..i want to change the contents thats below the menu except the footer...is there is a way to that or not..

im trying with javascript..

[CODE]<input type="button" onClick="document.getElementById('iframe1').scrolling='no' ;" value="hide">[/CODE]

[CODE]<input type="button" onClick="document.getElementById('iframe1').frame.Border='0' ;" value="hide">[/CODE]

[CODE]<input type="button" onClick="document.getElementById('iframe1').Border='0' ;" value="hide">[/CODE]

but none of the above works ??

thanx guys for the help..

Regards,

Noor

@phpnoviceMar 03.2006 — #I'm not sure what you're after, but... Try changing this:

<input type="button" onClick="document.getElementById('iframe1').Border='0' ;" value="hide">

to this:

<input type="button" onClick="document.getElementById('iframe1').style.border='0' ;" value="hide">

Though, personally, I would give the IFRAME a NAME attribute and reference it this way:

<input type="button" onClick="self.frames['frameName'].style.border='0' ;" value="hide">

@nooor83authorMar 03.2006 — #still it doest work !!

this is the code i have ?

[CODE]<html>
 <head>
 <style>
 
  body
  {
   margin-top:0;
   margin-left:0;
  }
 </style>
 
 </head>
 
 <body>
 
 <iframe src="test.html" name="iframe1" id="iframe1" height="400" width="750"></iframe>
 <form action="#" method="get">
 <input type="button" onClick="document.getElementById('iframe1').scrollbar='no' ;" value="hide">
 </form>
 </body>
 
 </html>[/CODE]

thanx guys

@phpnoviceMar 03.2006 — #You keep trying to use properties of the IFRAME that do not exist. Change to using the IFRAME's STYLE object and you'll have more success.

@nooor83authorMar 03.2006 — #You keep trying to use properties of the IFRAME that do not exist. Change to using the IFRAME's STYLE object and you'll have more success.[/QUOTE]

iframe does have this property..see the link below

[URL=http://javascriptref.com/reference/object.cfm?key=90]Here[/URL]

but why it doesn't work ??

@jnosterMar 03.2006 — #To change contents inside an iframe you have to set its attribute. Use...

[code=php]var myURL = "http://webSiteIWantToGoTo.com";
 var myIframe = document.getElementById('myIframeIdName');
 myIframe.setAttribute('src',myURL);[/code]

If I'm understanding your questions then that should help.

About hiding the iframe...

There are a couple of ways of doing it. One is to set it's pixel size to 1x1. Another is to use CSS to set it's Z-Index. I haven't taken the time to look into what you are trying to do in hiding it.

I hope this helps.

@jnosterMar 03.2006 — #I've looked into some of the properties of the iframe...

I agree with phpnovice. I don't see that propery anywhere. They only way I know of hiding an iframe is through manipulation of CSS or set it's size to 1 px.

Also... I edited my earlier post because of a mistake. Please take note. (It's not url, but src).

@jnosterMar 03.2006 — #OK...

Sorry for all the posts guys.

I think I see what you're trying to do.

try this...

[code=php]onClick="document.getElementById('myframeId').style.height='1';document.getElementByI('myframeId').style.width='1';"[/code]

Try putting that in your <input>. It should work to hide the iframe. Perhaps phpnovice can see any mistakes I'm making here. I'm still a novice at this.

Also, why are you trying to hide it? what about closing it altogether? Just a thought.

@phpnoviceMar 03.2006 — #iframe does have this property..[/QUOTE]
There can be a difference between an HTML attribute and a DHTML property -- and in how they are referenced.

Furthermore, I don't see, at that link, either of these properties you tried to use:
[CODE]<input type="button" onClick="document.getElementById('iframe1').Border='0' ;" value="hide">[/CODE][/QUOTE]

[CODE]<input type="button" onClick="document.getElementById('iframe1').scrollbar='no' ;" value="hide">
 [/CODE]

[/QUOTE]

@Wisest_GuyMar 03.2006 — #This should work:

document.getElementById('iframe').[B]b[/B]order = 0;

and

document.getElementById('iframe').scrollbar[B]s[/B] = "no";

@phpnoviceMar 03.2006 — #Though, personally, I would give the IFRAME a NAME attribute and reference it this way:[/QUOTE]
self.frames['frameName']...

Also in #JavaScript _↴

Check for only numbers What is this?Delaying a url to show image change

Success!

Help @nooor83 spread the word by sharing this article on Twitter...

Tweet This

ajax help..

16 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

ajax help..

16 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #JavaScript _↴