I've got a cookie set up to store the user's theme preference, etc., but I've never used AJAX before, so I could use a little help.
I found this simple little AJAX tutorial, which is enough to get me started, but I'm not sure if I'd be better off having the server send pretty much the entire web page all over again, with the updated theme, or -- if it is possible -- having the server send a script that would modify the page, keeping the content intact, but changing the div, etc. properties in order to achieve the new look.
Thoughts? Comments? "You're doing it wrong, moron"?
Thanks in advance!
If changing theme means only change the classes of your divs and the elemtes of the structure of your page you must do it simply changing the class="" atribute of the html elemts involved. Ej: You can change postions, and floats, colors etc etc.. This would appen only in client without asking to the server again the page (0% traffic from server, nice!)
But, if changing theme means to get other html structure and hierarchy complety different: You dont have other way that ask to the server the page again with the new html...
Conclusion: Think about all those things, if you can get other theme only changin css you can/must use jquery to change the css properties. But, if not, you need to load the new html from the server...
I hope this help you
pd: sorry for my englisgh grammar if its not correct at all!
Related
Hi I'm pretty new to web applications, and I want to make a small form that search for an object and show the results there. I don't want to load the whole web page, probably change only one <div> tag.
Is there a way to do this without Javascript? (It's not mandatory that I don't. Just checking if I can)
I'm using Pyramid framework (and has been working with less than 2-3 days, so please be patient with your answers).
Please point me in the right direction, I feel like I don't even know what to search for.
(Didn't go anywhere with my pyramid XMLHTTPRequest google search).
Thanks a bunch.
No, that's what AJAX is, a Javascript technique. You cannot initiate a XMLHTTPRequest from your browser without it.
Just use jQuery to load a URL from you Pyramid server; have one route serve up a HTML snippet instead of a full page:
$('div#somediv').load('http://serveraddress/route/to/snippet')
and jQuery will request /route/to/snippet from your server, and place the result wholesale under <div id="somediv"></div>.
What you need is a Javascript library like jQuery to do the XMLHTTPRequest (popularly known as AJAX). See jQuery.post()
I have a project where we're using an iframe. However, project specs have changed and we can no longer use the iframe. Instead we need to request the html page in the background and display it on page when loaded.
Any ideas on how to do this via Ruby (rails). Thought best to ask for general direction before diving in.
Thanks!
load it with ajax, and do a body append
It depends on where you want to have the work occur, on the back-end in your Rails code, or in the user's browser via JavaScript, as #stunaz suggests.
Keeping it in the browser and loading via JavaScript will expose the HTML page's location to the user, which might not be desirable. Loading it from the back-end and including it in the HTML emitted to the browser will hide the source entirely.
If you want to do it on the back-end, the simplest thing is to either load the file from the local drive, if it is local using File.read. If it's on a different machine, you can use Open::URI to pull it in. Either way, you'd then insert it into the HTML in the right spot. How you do that depends on what you are using to generate the outgoing HTML.
I am looking for a way of replicating what the site in the title of this question does. That is, via ajax, changing a part of the page. But, I could not figure out how to change the URL as these things happen.
So, please, help me achieve the effect of url changing on ajax page/change.
Thank you.
(edit ** question rewritten as is appears it was not written well enough, sorry)
What you are looking for is AJAX basically updating only parts of a HTML page. Please google for AJAX tutorials. Here is a simple one
Something like Jquery Tabs also do this.
It seems like you want the URL to change. This is the basic trick to have history for ajax pages
I am starting to set up a personal website, and I would like it's layout to look something like
-------------------------------
- Page Header & Menus Go Here -
-------------------------------
- Main Contents -
-------------------------------
- Footers -
-------------------------------
The main question is that I would like it to be a single-page interface in which the main contents are loaded and displayed with a combination of AJAX and jQuery to produce a nice effect. However, I would, of course, like to have the contents bookmark-enabled and indexed by search engines. I have skimmed throught the Single Page Interface Manifesto which explains some nice ways of achieving this, but I wouldn't really like to have my URLs like
http://www.mysite.com/index.php#!section=section1
http://www.mysite.com/index.php#!section=section2
I would, of course, like to re-write them as
http://www.mysite.com/section1
http://www.mysite.com/section2
My questions are this whether this approach is correct/doable and if AJAX URLs are compatible with URL rewriting. What URLS would be indexed by, say, Google anyway?
If you want your page to work without reloading and update at the same time the page's URL, the only way to archieve this is by changing the hash in the URL (location.hash = 'whatever').
URL rewriting cannot be used since the hash is not sent to the server, it's only available in the browser's scope.
Check Facebook or Twitter URLs. They are prettier than #!section=section1 but still need the hash.
Cheers.
If you want to load different content/tabs/some content of page without reloading browser,
Now It is possible with pjax..
you can use something like http://padrino-pjax.heroku.com/
you can try it, go to the link and click on any of links home,dinosaurs,aliens
and you will see It will change url and some content without reloading full page
It is achieved using ajax+push/pop of url in browser
I'm looking for a solution myself for a similar problem (I have a client site with an AJAXed wordpress theme, and these dreadful #! stuff on the URL prevent all the Social sharing plugins I have tried so far, from working correctly).
Apparently, there is a solution (with some drawbacks ofc..). I found about it here: http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
I know it's like two years since you've asked, but it could be helpful for someone else, or you may wanna check it out just for the sake of the curiosity itself! :-)
How can I place a banner on webpage with one application to all pages of a website?
One way of doing this is to put your banner into a file, then include that one on each of your other pages. This way, you only have to change the code in one place to update the banner site-wide.
So, a PHP example would be:
banner.inc.php:
<?php
// echo out banner here...
?>
Then, on your other pages:
include("banner.inc.php");
You can just create a header file that you include in all your pages, and include the banner code in it. The solution is pretty much the same in all languages. If your host allows server-side includes, you can even do exact same thing with (nearly) pure HTML. You can also do it with JavaScript pretty easily.
Do you have a global template for all your pages? Something where the basic structure of all your pages is defined while the specific stuff is filled into parts of the body? If you had something like this you could modify the global template to have the banner you want and it would show on all your pages.
Google "html templating" for more.
I recommend using master pages. That way if you have something that has to be changed globally across the project you only have to change it in one place. And they are really simple to use.
If your web server is IIS, and you know a smidge of CSS you can do this without perl, without touching any other files, but at the cost of some performance.
IIS allows you to insert an HTML snippet into anything served:
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/e27f918e-89a9-45a8-8604-2ad2ded09d64.mspx?mfr=true
If said footer file, had CSS which shoved it to the top, then you would get the behavior you are looking for.
Please note, that this is NOT an ideal solution, but it is a quick and dirty patch until you can go back and retrofit all of your pages with a master page or something similar.
If it really should be on every page of your site, I'd argue that it's part of the site design rather than the content itself. In this case, you are easily justified in setting a background-image in your css. Of course, you probably then still have to have some sort of place-holder element in your html, but at least you could update the whole site together.
Well, hopefully you would have designed the website so that if you need to change something globally, you can just edit a header or footer file.
If not, I would use Perl to go through all the files, and do a search and replace.