Ok so I have created a wizard and everything works great. But I have one little piece that seems to 'bother' me if you will.
In the last step of the wizard I build, it uses obflush to process data onto the screen
to show some actions happening. But the problem with that is, that the 'entire' page doesn't load until the obflush process is done, and then the page all lines up nicely and such.
Im wondering if there is such a way that maybe ajax can flush the obflush process?
Maybe this is completely wrong but this is how I can envision it happening.
User goes thru the wizard and gets to the final page
The entire page loads
At the end of the page is some ajax code to apply to a tag maybe
The ajax is refreshing itself every second to check against the update of the obflush and then outputting what the obflush has outputted to the screen.
Does that make sense?
Any insight is greatly appreciated.
Thanks
This question is about how to load part of a web page with Ajax. In particular, how to load the structure of a page, and then fill in the details with Ajax calls.
I assume the intention is for the structure to be loaded quickly because it does actually have some content, and then load parts of the page that take a long time to process. Otherwise the effect on screen will be that loading is actually slower.
I would use the JavaScript library jQuery to help with this, although it can be done without any libraries as shown in this question.
The browser makes a web page request and the server responds like it would normally, but just with the structure of the page
Within the basically empty page that was loaded, jQuery will then make an Ajax call with load() that will load the response from a URL into the specified HTML section.
The code would look like this, where my-intro-div is the id of a regular HTML div tag:
$(function() {
var myIntroDiv = $('#my-intro-div');
myIntroDiv.load('/my_intro_div.php');
});
The PHP script my_intro_div.php returns the HTML that is meant to be displayed inside the my-intro-div tag
There are some good examples in the jQuery documentation here:
http://api.jquery.com/load/
jQuery can help with a tonne of other things too. It has a tiny learning curve that can be a little steep, but after that I've found that it is the most intuitive "language" I work with.
Related
I'm trying to add some validation to some form fields in a jQuery Mobile site I'm building with a PHP back end.
I've done this in the past successfully using the jquery.validate plugin but I'm having trouble getting this to work with jQuery Mobile.
The validation is working in this jsFiddle page:
http://jsfiddle.net/GeX5C/5/
but I'm having trouble getting it to fire when I click the submit button from the hosted PHP page. From what I've read I can't use the usual:
$(document).ready(function(){
approach but not sure what to replace this with?
Would really appreciate any assistance here.
Thanks
2 options, in the event document ready is not supported for whatever reason..
one try the load event on the window, which will wait til everything is loaded and completely rendered, similar to the ready function but waits just that much longer course im paraphrasing but hopefully you get the point.. its applied the same as the ready function.
$(window).load(function(){
// Your code here
});
second option is dont use any load/ready. just make a function that fires off as the final line of your code, should whatever your doing truely not require the page to actually be fully rendered to run. logic to this is make a function then in the last lines call the function.
also try to keep a mass majority of your javascript especially pieces that require other things to load first at the bottom of your page just above the final body tag. Yea theres hot debate over this some people insist top is better while others insist bottom.. me Im a bottom guy think about the logic, when downloading the page downloads top to bottom in a sense correct? so.. put the heavier of the weight at the bottom such as external scripts. anyway im getting off point, hopefully this helps some what.
FYI this is js code that works for the form validation:
$('#id-for-the-page-element').live( 'pageinit',function(event){
$('#id-for-the-form').validate(options);
});
Hope this helps someone else.
i have a website that uses a number of containers (div's). In this scenario, we have three boxes down the left side and one bigger box on the right of these boxes. The bigger box on the right is the only thing that changes when a link is pressed, this is done with Javascript.
SO i have the index which is the main layout of the website and i also have the "pages" of the site, so when a link is pressed the main box (on the right) loads the new data.
On one of my pages i want to collect data and then run it through a PHP script that is in the head of the file, but when i click the button i realise it refreshes the whole page and it doesn't run the script on the page with the form.
Anyone had a problem like this, or know of something i could do to work around it?
I'm not really sure what code would be useful for helping me but if you need something just ask.
Thanks for the help
Since you are loading all your content via JS already, you could just POST the form data via AJAX to a PHP script to process, then read the output and either provide an error message or remove the form from the page and show your success message.
How to approach your AJAX call is dependant on what you've used as a basis for the rest of your JS.
Personally I like to use the JQuery library, as it makes AJAX calls (and much more) very simple.
How about you make the page design able to do it. Have the backend be able to spit out the state of the page when it posted.
Or use Ajax to post the data back and set the new state like you do already.
I have a page which shows a list of items. Page coded with html, css, php and using mysql db.
On that page a user can request to add one of the items to their special list.
I want to do this within the page without having to do a complete page refresh. So user clicks button to add, item is added to their list and button changed so they can't add it again.
Do I use ajax calls to run code behind the page and then refresh the div?
Or is there a better more efficient way to do it.
I'd prefer a php option of possible in case user has js turned off, but don't know if it can be done with using js.
Any help appreciated.
If you want dynamic content (changing the page without refreshing) you are going to have to use Javascript. To do what you are asking, you could call a PHP script via Ajax that outputs the contents of the div with the new item, and then change the div based on that response.
Dagon is exactly right. Create a form which handles the request and set the action of the form to the PHP script you want to handle the request. Note that although this can be the same php script that you use to process your ajax request, it does not necessarily have to be.
Many times when I implement such functionality, I'll set the PHP to send variables as POST (in the event of JS disabled) and have my ajax request as a GET so I can use a single PHP page to handle the 'same' request. When using AJAX, I'll have the script echo a specific code then have the ajax response handle that return.
if(val == 'OK') {
//in event of success, perhaps you want to hide the original form and show a success message
} else {
//do something like unhide a hidden div to display an error
}
If JavaScript is turned off, the page has to be reloaded. In your case jQuery could be very handy and simply rewrite the element you need to rewrite. The server send's a simple json. Using a PHP Framework might also be a good idea, since the way you ask it seems (with respect, and not wanting to offend), that you are not using any framework and might run into falls making your script vulnerable (sql injections for example)
If your visitor doesn't have JavaScript enabled and you want to serve anyways, then you have to do a page reload. First check if that is worth to do, who is your client/visitor, what browser do they use, ... questions like that help you to design your page/app.
Let's say we have a page written in PHP. This page loads by it self a template with header, body and footer and print this out. Now let's say that in the body of this page we would like to start a loop and load some posts (messages taken from a database).
We also need the page to load new posts every 10 seconds, if any, without refreshing the page (classic AJAX). This ajax call will use JSON and AJAX and micro templates.
Now i'm just wondering:
Do we really need PHP to load posts the first time the page is loaded? Can't we just start that Ajax call and load posts with Ajax instead? (Notice that the existing ajax call would be kept as it is, since it loads posts starting from the latest loaded (in case of no posts, that would mean all posts).
If you did not understand my question don't hesitate to let me know.
In this situation I think the simpler approach is the let AJAX handle it, if you do let php load the initial messages, you'll have two places in code, that you'll need to maintain to perform identical jobs.
I think you are asking how you should load the posts the first time the page is accessed. If so: When the page firsts loads, have some PHP that prints out the existing posts. Then, add some JavaScript to update the page with new posts every 10 seconds. This is a matter of preference. You might want there to be no posts when the page first loads, and then use Ajax to get the existing posts once your page has loaded.
Edit:
I agree with jondavidjohn that you might be better off using pure Ajax. However, you could always isolate the code that fetches the pages into a separate function. That way, the script that generates the page calls the same function as the script that is called via Ajax.
The drawback with that technique is that it doesn't downgrade gracefully. So people with javascript disabled will not see any posts.
I'd recommend outputting some data with php - AJAX requires JavaScript which many people don't have activated.
Why not, instead of having the browser poll the server for new posts, have the browser push new content to the browser when it is available using the likes of node.js?
I designed my site with AJAX exclusively, and it works perfectly except for one rather major issue: Using AJAX requires JS to be enabled. Of course, if users trust your site, this is not a problem, but if they don't, then an AJAX solution won't work unless you put the entire page in a noscript tag.
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.