Quantcast

Creativebits.org

an All Creative World site
tripdragon's picture
417 pencils

Found! basic stupid users guide to ajax

:D like me and you :P

Looking for a basic everyday useage to ajax stuff like moveing menus and loading page content in the same page, all of that faster flowing stuff, nothing major ground breaking deep stuff , just menus and such... helpys please :D

Still fixing it
I got it ! :D
http://aprilcolo.com/oh/ajax/b/

! Sweet! Justice ! Only took four weeks to ffigure out :P
Now since I have it working both ways a loading in different content on the same php file AND a second php file, is this the correct way to do it ? Or should there be a smarter more streamlined method like, putting styles in a webpage and not in a style sheet is a no no sooo does this have that same kind of screw up ???:

Commenting on this Forum topic is closed.

afterglow's picture
571 pencils
tripdragon's picture
417 pencils

sweeetttt but kinda still not for dummys :P

Alex's picture
350 pencils

adaptive path's look at AJAX (Asynchronous JavaScript + XML).

Pretty thorough look with a few nice links to supporting info.

There is also a DHTML book by Sitepoint. Their books are generally pretty friendly and give you a good understanding of both what you can do and how to put it into action.

tripdragon's picture
417 pencils

errr I read it all I got nothing :( it's a brand new thing to me ...

wish there was some air basic happy stuff. load a page in a page content like an old style iframe... hmmm

Alex's picture
350 pencils

Are you sure you need AJAX for this? if you're just after menus and fast loading content then good old JaveScript (and well built xhtml/css) might do quite nicely.

For page-in-page content why not stick with frames?

(I'm trying to get to grips with AJAX myself, though I've found very few of my projects actually require it. The most simple solution is often the best)

tripdragon's picture
417 pencils

hurrmmssssssness..

I just want a little bit of the live loading thing. I never could stand iframes and the weird way they format.

oh well, i guess I am after the dhtml side of things

mijlee's picture
502 pencils

AJAX is only really any use if you are building some kind of web app. If your just looking at building a site your probably better off with static pages. One of the issues with AJAX is that it isn't built for Search Engines so if you want your site to spiderable then you are still better off with simple XHTML and some kick ass CSS and if totally necessary JS on the side.

----------------------
http://mijlee.com
----------------------

William's picture
188 pencils

There are very few places that you really need Ajax.

i am developing a very large system and strated developing a fancy auto complete text box, similar to Google Suggest. In the end it confused userd, had issues with different browser and actually did not help people to use the search engine.

Much like flash, people are starting to use ajax without thinking about it's real benefits. Flash is great for vector based graphs and animations that are auxiallary. Using Flash for something for the menu of a webpage is just wrong. It makes it looks cheap, tacky and trivial. This is probably due to non standard widgets etc.

Can you imagine if the BBC news website was in flash ? No one would take it seriously.

Will

tripdragon's picture
417 pencils

i cant agree with the flash menu much, it makes an otherwise drab menu a bit spicer, and such. But keep it non rubish, just something simple...

Hrmmm we need a site that shows simple clean design elements.

As for the ajax I was really after the auto loading a page stuff more than super data base stuff I have textpattern and clean cms's for that.

mijlee's picture
502 pencils

Don't dis flash Will, it’s not it's fault. It has had a bad rep from the first site that started to use it’s power for more than a bit of cartoon fun.

I think in the right hands Flash can be a great tool for creating really engaging interfaces for certain types of website. The fast that a majority of Flash site are rubbish should not cloud your judgement.

Ajax is very actually very similar. I think there are some areas where AJAX is going to make a big improvement in user experience. For example if it is implemented well it will make a shopping cart system much easier to use, rather than having to load product, cart and then the payment process all in different windows it could be much smoother. An Amazon store built like this would kick ass IMO.

----

----------------------
http://mijlee.com
----------------------

afterglow's picture
571 pencils

I always hated the interface of Flash compared with Director but now that it seem that Director is heading to the retirement home, Flash is the only game in town. I can't understand the logic of having a purely Flash site but as a way to show interactive information, it can't be beat.

Designers unfortunately are the worst culprits in the "skip intro" crimes against humanity. Try surfing a Flash site on dial up for more than 10 mins before you go near that tweening tool.

mijlee's picture
502 pencils

I avoid intros like the plague and have when given the chance turned down work when the client wouldn't see reason (only small clients mind).

I do use Flash for certain projects however. Below is one that I have been developing recently, glitchy as hell right now but as the brief was online and CD based this was the best option.

http://shakkei.eu.com/map/

----------------------
http://mijlee.com
----------------------

Alex's picture
350 pencils

I really like that map. And it's a great example of when flash is handy to create an interface that is a little more engaging (and can potentially give more feedback) than a regular XHTML/CSS one.

Oddly enough I'm working on something very similar at the moment (though mine beats yours hands down for glitchyness :) ), just having fun tying it in to a database so that new locations can be added via the CMS.

mijlee's picture
502 pencils

I am starting to think I should have fed the data in as well. Client is making tiny changes to this thing daily at the moment. Proper DB driven content wasn't an option as the final version will also be CD based but wished I had bothered to set up an XML system or maybe even good ole text files.

----------------------
http://mijlee.com
----------------------

Greg's picture
311 pencils

Seems you don't need it anymore but here's an article:

http://www.sitepoint.com/article/take-command-ajax

:)

my work: http://www.one-waymedia.com

tripdragon's picture
417 pencils

Well sufice it to say I learnered a lot over this post and this link I found, bascily enough to finaly do the stupid users tutorial that i was after, and self loading pages.
http://www.webreference.com/programming/javascript/jf/column12/index.html

But I am now up against an block, the rules at that link the code does not load in formatted code like tags just a block of words. so loading in a page is kinda impossible... Any one have clues or a site that would better to ask this in ? I never get very far at stylegala in their forums and need a good forum for code trickery stuff :D

mijlee's picture
502 pencils

Just found this and thought it might be useful to you?

http://developer.apple.com/internet/webcontent/xmlhttpreq.html

----------------------
http://mijlee.com
----------------------

tripdragon's picture
417 pencils

hmmm it look,s good but in safari or firefox I am getting errors on the files trying to load in the .xml files even after I download the files localy

mijlee's picture
502 pencils

Worked perfectly for me here in Safari, FireFox, Opera and Omniweb.

I'm still on 10.3.9 but that shouldn't make any difference.

----------------------
http://mijlee.com
----------------------

tripdragon's picture
417 pencils

weird must have been my connection yesterday. But it still wont work loacly why is thi s/ It makes testing it out painfull slow since I have to keep uploading to my server to test pages

mijlee's picture
502 pencils

Is your local machine configured as a webserver?

It may need to have an up to date webserver to make use of the XMLHttpRequest object. I',m running Apache 2 and it works perfectly locally. I think it works in older Apache versions as well.

----------------------
http://mijlee.com
----------------------

tripdragon's picture
417 pencils

:p oh Durh,, I feel stupid :D yeah works great in the sites folder. Thank you :D

Now how can it get mushed out of dropdown lists and put into normal links..,, more read;n to do :(

rampy's picture
61 pencils

Found this link a few days ago, ahem I am now prouldly using Ajax for one small area of a project, this is by far the bestest simplest intro to Ajax ever!!

http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html

tripdragon's picture
417 pencils

Egghh, it looks nice, kinda missing the tags that go with it like script block or such.. But also it only shows how to load in a string of text, I need it to load in a string of normal page code... Any clue?

rampy's picture
61 pencils

yeah thats just an intro ... if you wanted to update an image on the page you could just use the same property innerHTML like so:

updateImg = "<img src='path/to/"+imageName+"' alt='"+alternateText+"' />";
document.getElementById('holding_block').innerHTML = updateImg;

where "imageName" and "alternateText" could be dynamic values determined by your script.

Useful methods for inserting stuff:
createElement, appendChild, insertBefore

This is very useful resource for DOM (checkout DOM element reference specifically)
http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html

The examples on those pages might not be very clear at times, be sure to google for examples on other sites if that is the case, plenty of info once I actually knew what to look for.

[Must have edited this post at least 10 times!!]

tripdragon's picture
417 pencils

hmmm looks instresting. But the last thing I want to end up doing is getting all Super annal about the way the most absolute code is proper like a lot of css sites are foccused on.. Good code is great to have.

I will keep looking and trying but I am still after that golden rulebook if it exsits. Please help if you can. I want to get something like the 30 second tutorial up but have it have all of the basics like swap a page (or swap one long string of code) swap an image, and pure basic movement of menus and elements like rool out menus or transition of pages contents.

Very simple things for a static webpage but just enough to get it looking slick and new but not over dose it with stuff, ya know to remove alot of the need for flash doing the menu systems and such. That way flash can be used as it was always ment to be used as an animation tool for content instead of mass page stuff.

:P weeeeeeee code not fun some days :D

rampy's picture
61 pencils

deleted ...

tripdragon's picture
417 pencils

????? I did not get to hit those links yet oh well

rampy's picture
61 pencils

Here are the links again:
Ajax blog and podcast: (worth listening)
http://www.ajaxian.com/

putry sweet js library (found on ajaxian)
http://moofx.mad4milk.net/

Javascript news
http://javascript.weblogsinc.com/
(wow I remember all of them!)

anyhow trip what you want to do seems way above a basic user guide! And If you wanted to swap a whole page ... dude why not just point user to another page altogether? If you swap the full page contents dynamically, you'll have to solve the problem of user page reload or page bookmarkability, altho some smart folks seem to have solved that (also found on ajaxian.com), not sure i like the idea of maintaining too many workarounds tho ... its hard enough targeting a robot crawlable, database driven, search engine optimised, standards complaint webpage as it is =)

Closest to a golden rule might be to use a AJAX framework, there are already quite a few out there
http://www.ajaxian.com/archives/2005/10/ajax_framework_2.html

The webreference.com link you have there is pretty cool gots XML (yay!) ... now i know muahahahah

tripdragon's picture
417 pencils

That webreference one there is basicly all I need I just want it to load in blocks of code instead of strings of text. Can you help me on that one ?

rampy's picture
61 pencils

sure, why not post what you want to do here lil I can see what you want to do exactly and other members can chip in, might help someone else as well ... (or uhm they could laugh at our final solution ... but who cares)

tripdragon's picture
417 pencils

Ok take a look at these files
http://www.aprilcolo.com/oh/ajax/

That is the mess up I have so far

rampy's picture
61 pencils

I know that this line:
getElementsByTagName('data')[0].firstChild.data

says grab 'data' and from 'data' only, not any other element within but only the main 'data' tag.

Looked around and found that you could use the range interface to do it, altho IE does not support range ... bummer

Using range
// this line need to change tho
updateObj('xmlObj',xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);

// change to
range = document.createRange();
range.selectNode(xmlObj.responseXML.getElementsByTagName('data').item(0));
documentFragment = range.extractContents();

Then
function updateObj (obj, data) {
document.getElementById(obj).innerHTML = "";
document.getElementById(obj).appendChild(documentFragment);

}

You can check the DOM tree if you are using Firefox, go to tools > DOM Inspector

There you will see your P tag you retrieved and all. But the P tag somehow becomes an inline element and not the default block. To work around this, declare in your CSS stylesheet p { display: block; }

Again since IE 6 does not support range, this is quite useless ... (not sure abut safari support tho t does work in Opera 8.5 btw)

This is quite interesting to me, will do some more research post back if find anything ;)

tripdragon's picture
417 pencils

did you find anything ? The last thing I want to have to result to is a new round of hacks for something so basic

rampy's picture
61 pencils

From what I know about XML, its not supposed to have HTML inside it anyways (pure data only). so you may be looking for a flawed solution.

You need to understand the why, where, what and not just blindly looking for the how, ask yourself these:
1. Why use XML, will you benefit from using XML?
2. Where would the XML files be generated from? by hand all the time?

You are just looking for the ending and ignoring the beginning.

[Added later]
Looked at (my largely unread book) "Learning XML", its true. No HTML markup allowed in XML. Simple reason that XML need to be well formed, HTML 4 for example does not need to be well formed -- the image tag for example has no closing tag.

Actually, CB forums is not the best place to talk code, since cannot post code directly and it IS a designer site anyways. I'm very enthused about XML and DOM scripting, however what you want tho is not feasable in the way you want to do it, rethink it.

tripdragon's picture
417 pencils

ok then do you know of a good forum to disscuss this ? I tried stylegala but it is kinda dead in that forum.

As for the no httml I can understand that. so then the next clue would be what is everyone method then of load a page in a page kinda thing? Or is this some new super powered iframe thing ?

rampy's picture
61 pencils
tripdragon's picture
417 pencils

Oooooo,,, that get ahead bit ios really helpful, just wish it cam e with some examples.. I will try and hack the dhtmlkitchen in a bit Thankyou :D

arvana's picture
111 pencils

Hi tripdragon,

I took a quick look at your web page, and noticed something that would prevent it from working.

If you want the two links at the top of the page to process the script, you shouldn't have the href attribute pointing to your .xml files. Change them to href="#" so they will stay on the same page. Or use an image or another object with an onclick event attached instead.

As far as I can see, everything else is fine -- try that, and let me know if it works.

tripdragon's picture
417 pencils

Hrmmm,, no change in actions.. The error thaat I aam aware of is that it wont except html code in the xml file, soo the only other way I can get it to work is to replace the load string of text to load html file or html code.

tripdragon's picture
417 pencils

Errr now trying a different code base
http://aprilcolo.com/oh/ajax/a/

could this be hacked to run html ??

tripdragon's picture
417 pencils

I got it ! :D
http://aprilcolo.com/oh/ajax/b/

! Sweet! Justice ! Only took four weeks to ffigure out :P
Now since I have it working both ways a loading in different content on the same php file AND a second php file, is this the correct way to do it ? Or should there be a smarter more streamlined method like, putting styles in a webpage and not in a style sheet is a no no sooo does this have that same kind of screw up ???:

rampy's picture
61 pencils

nice job trip!

you probably have figured this out, you can display a "loading" box by detecting the "xmlObj.readyState" responses.

the concept I mean is like this:
loadMsg = document.getElemetnById('loadTxt');
// on 1, 2, 3 show a layer
loadMsg.style.display = 'block';
// on 4
loadMsg.style.display = 'none';

<div id="loadTxt" style="display:none; position: absolute; top: 0; left: 0; width: 99%; background: black; color: white;">Loading ...</div>

Go here to view the full response codes Webreference
0 – uninitialized (before the XMLHttpRequest begins)
1 – loading (once the XMLHttpRequest has been initialized)
(not sure its legal to copy paste it all here ... so please just visit them insead)

rampy's picture
61 pencils

Just tried out Taconite, guess what you can have HTML tags in your XML, tried inserting images and list items in an example, it all shows up formated and all, but only well formed tags will show up. I'm such a noooooob ... I still don't know how to do it from scratch tho, good luck!

tripdragon's picture
417 pencils
mijlee's picture
502 pencils

For all of you budding AJAX bandwagon jumpers this could be a useful starting point for you ;)

Mastering Ajax, Part 1: Introduction to Ajax

----------------------
http://mijlee.com
----------------------

Creativebits is a blog about creativity, design and Macs. We also have a critique section where you can post your work to get opinions and a forum to discuss any design related topics.

Recommend us on Google

Latest critique

  • Butterfingers ad campaign
  • Critique for my logo

Marketplace