Loading content into div and page refresh

@zinkarNov 01.2010

Hi. I’m a total beginner JS (used html/css in the past a bit)

I’ve been ordered to prepare a simple website and I’ve found the following on some website to load some content into a div without reloading everything on the page.

[code=html]<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script> <script language=”javascript”> function Load(div, link) { $(div).load(link); } </script>

<a href=”#” onclick=”Load(‘#page-content’,’project.htm’);”>About the Project</a>[/code]

It works and loads project.htm into div id=page-content.

The problem is that it adds just the hash to the main html (default.html) in the website url. When I hit F5 I go back to the main page as even though the content of some div’s is different, the url is still just default.html.

I dont have time to start learning JS from scratch as it’s just to be done and forgotten. Could you help me out with this?

When I click a link it should load some content into a div and alter the url so when someone refreshes the page or shares a link with someone he can see what he is meant to not the main page.

Thanks in advance.

to post a comment

JavaScript

17 Comments(s) _↴

@KorNov 01.2010 — #You are such a beginner that you have not sensed that you are using a JavaScript [I]library[/I], (JQuery), not a native JavaScript code. You are not supposed to use a library unless you have learned the language itself.

JavaScript is a client-side language. It can not write/store data (with some exceptions: cookies or over HTM5). What you see as "loading" is a virtual process, not a physical one. When the session changes (F5), all the JavaScript changes are gone. There are some solutions, most of them at a server-side level. Depending on many factors, there might be solutions at a client-side level, but most of them are limited.

I dont have time to start learning JS from scratch
[/quote]
If so, forget about that. You can not be a doctor if you don't have time to study Medicine. Even riding a bicycle needs some time to start learning how to.

Before anything else, you [I]should learn[/I] JavaScript. Otherwise you will not be able to understand what's going on, within a native code or within a library code.

@zinkarauthorNov 01.2010 — #I don't want to become and expert. If I see a code I will figure it out, but I don't have time to write it on my own. Probably someone could at least guide me into right direction on how to obtain this.

You don't have to learn how to make bricks in order to build a wall.

@KorNov 01.2010 — #
You don't have to learn how to make bricks in order to build a wall.[/QUOTE]
No, but you have [I]to learn how to build a wall[/I]. It seems like you don't understand that there are many professions in this World which require some preliminary learning and training process. Programming is one of them.

Regarding your problem: you can not solved it at your present level of knowledge. Hire a professional, if you have no time or you don't want to learn programming languages.

@zinkarauthorNov 01.2010 — #I'm sorry but you're full of ...

I get it, there's no simple answer/solution to my problem.

But the rest of your fancy talk is just useless and boring.

I will figure it out eventually without in depth knowledge of javascript.

I just hoped somebody had same issue and received some kind of help.

@KorNov 01.2010 — #I'm sorry but you're full of ...

But the rest of your fancy talk is just useless and boring.
[/quote]
Beware your inappropriate style. Consider it as a first warning.

I get it, there's no simple answer/solution to my problem.

I just hoped somebody had same issue and received some kind of help.[/QUOTE]

OK.Here you are

[B]1. client-side[/B]:

You can do it by storing data at a local level. For that either you may use cookies (but cookies are limited to a certain amount of data):

http://www.quirksmode.org/js/cookies.html

or you may use HTML5 facilities (but this not yet a crossbrowser solution)

http://html5tutorial.net/tutorials/working-with-html5-localstorage.html

[B]2. client-side+server-side[/B]:

You need Data Base (could be MySQL), AJAX and a server-side application code (could be PHP)

MySQL:

http://www.mysql.com/

AJAX:

http://www.w3schools.com/ajax/default.asp

PHP:

http://www.php.net/

All these solutions means good knowledge of programming. Maybe now you can sense that programming is not a job to be done by a perfect amateurs.

@aj_nscNov 01.2010 — #While I respect Kor's post, I don't think you need everything that was suggested.

What you need to do is, every time you load content through you load function - add a hash tag to your url that's specific for that page. For instance:

<i>
 </i>&lt;a href="#project.htm"  onclick="Load('#page-content','project.htm');"&gt;About the Project&lt;/a&gt;

Then, every time you load up a page, check to see if the URL has a hashtag like:

<i>
 </i>if(window.location.hash) {
 Load('#page-content',window.location.hash.substr(1));
 }

There's quite a few more steps you'd need to do for security purposes, but I'm sure you can figure out enough to get by.

P.S. Not to stand up for people who don't need standing up for, but seriously friend, take a look at your post count and Kor's (highly respected) post count, don't be an ass.

@KorNov 01.2010 — #I think cookies could be a good solution, but to store only the arguments ('#page-content','project.htm'), I guess OP has several links on its document, which might call the function with different arguments, depending the user's choice. A cookie can store those values

onload -> check if a cookie exists -> if not, do nothing -> if yes, launch the function Load() using as arguments the values stored in the cookie

Same process for HTML5 local storage

@aj_nscNov 01.2010 — #The reason for my solution is users like to send links to each other. When somebody sends http://www.example.com/#page-content to another user, then there won't be any cookies on the second user's machine so the link they were sent won't 'work'.

It's not a theoretical thing either, for myself. I recently built this application on top of a wordpress system simply because a client was dead set on having music play the whole time a user was on their site......yes, stupid I know....but because it was built on top of a wordpress system afterwards, everything degraded beautifully for SEO and Javascript disabled browsers....well, except for the music......moron.

@zinkarauthorNov 01.2010 — #aj_nsc - thanks for the tips.

It's always the easiest way just to answer that it is complicated and not achievable for beginners - no matter if this is programming or other field.

@KorNov 01.2010 — #[B]aj_nsc[/B], I think you did not understand what a JQuery [B]load()[/B] custom method does. It perform an AJAX request and writes the response somewhere on the document. Let's take the OP.s statement:

<i>
 </i>$([I][COLOR="Blue"]div[/COLOR][/I]).load([I][COLOR="Blue"]link[/COLOR][/I])

That means: performs an AJAX request (by default is POST) to the url=[I][color=blue]link[/color][/I] and writes the answer (the content, this case, of the document at that address) into the [I][COLOR="Blue"]div[/COLOR][/I], as innerHTML (well, after filtering some tags like HTML, TITLE, HEAD...)

There is no [B]hash[/B] within this process... ? That "#page-content" points to the DIV with the id="page-content". The document is not reloaded.

Nor [B]zinkar[/B] has understood. As he knows nothing about JavaScript (nor about programming languages, in general) maybe he can understand vaguely what JQuery is doing, but not how is JQuery doing that, and which is the status of the result.

@aj_nscNov 01.2010 — #Kor, I'm sorry, but I think you are misunderstanding what's going on. As I said in my post, I just built this system, about two weeks ago, so I know what I am talking about.

Which is why, when you load a page, you also add a hash tag to the URL, which would happen anyway if you didn't return false or preventDefault() on a link that looks like this:

<i>
 </i>&lt;a href="#project.htm" onclick="Load('#page-content','project.html')"&gt;Project&lt;/a&gt;

SO if you didn't preventDefault() or return false the url would read http://www.example.com/#project.htm

Which is what I said - check the URL for a hash tag and then use that hash tag to direct the Load function to load the proper content if it exists.

Please read my posts entirely without interpreting what you think they mean and then responding.

It doesn't make sense to do this with cookies.

EDIT: I know it's not mandatory that you add a hash tag to the URL, I am saying make sure the application does it to make it a feature of the system.

@KorNov 01.2010 — #Kor, I'm sorry, but I think you are misunderstanding what's going on. [/QUOTE]
Aha, I see. Sorry, I was not attentive. Yes, your solution is more than OK. No cookie is needed, I reckon.

Probably I was too harsh with [B]zinkar[/B], but it really annoys me those who ask for help but dare to post things like : "I don't have time to start learning this language, so that I expect you to give me a full functional solution" :rolleyes: Should have he simply posted only his problem and no other considerations, all the misunderstandings would gone, I guess ?

@zinkarauthorNov 01.2010 — #
Which is why, when you load a page, you also add a hash tag to the URL, which would happen anyway if you didn't return false or preventDefault() on a link that looks like this:

<i>
 </i>&lt;a href="#project.htm" onclick="Load('#page-content','project.html')"&gt;Project&lt;/a&gt;

SO if you didn't preventDefault() or return false the url would read http://www.example.com/#project.htm
[/QUOTE]
Actually, it is http://www.example.com/default.htm#project.htm

And with your tip it works however, it first refreshes the main page and then loads the desired div with desired content - it's a little bit annoying and not what I want ;/

Nor [B]zinkar[/B] has understood. As he knows nothing about JavaScript (nor about programming languages, in general)...[/QUOTE]
What does my lack of JS knowledge got to do with other languages? You're just being an ass right now.

@KorNov 01.2010 — #You're just being an ass right now.[/QUOTE]
And you are banned for 10 days, for using an improper language, right now.

@aj_nscNov 01.2010 — #And you are banned for 10 days, for using an improper language, right now.[/QUOTE]

Guess I'll say so long for a week and a half then, too. Even though I don't quite think that's fair.

@slaughtersNov 01.2010 — #aj_nsc

You did not imply the forum moderator was "full of ..." and then cuss at him (after receiving a warning).

@KorNov 01.2010 — #Guess I'll say so long for a week and a half then, too. Even though I don't quite think that's fair.[/QUOTE]
These are the Forum's rules. 10 days is the punishment for "Inappropriate language" or for "Insulting other members". As a Moderator I don't choose the ban duration, I choose only the infraction I see. Regarding the fairness: I think it is fair enough. I might have banned him for the first time, yet I chose then only to warn him.

You? You did nothing wrong. You have even enlightened me regarding the technical issue. Who said about banning you? I am not a dictator. I am only applying the Forum's Laws and Rules. I would have done the same if [I]you[/I] were the subject of the OP's attack, not me.

Also in #JavaScript _↴

PopUpWindow showModalDialog can't find the iframe!!!javascript in netscape 7

Success!

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

Tweet This

Loading content into div and page refresh

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Loading content into div and page refresh

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴