I'm looking to load my site pages using AJAX, therefore saving on loading the header and footer every time and just changing the content.
How would I go about doing this as I am using smarty?
I'm aware that this may be the order it needs to go in:
--
Request PHP
parse TPL
make html
show in browser
--
I'm just not sure how to actually go about doing the second and third steps particularly.
Do what you would normally do.
For AJAX: Call some javascript function, retrieve to-show data, show data in some DOM location
For php/smarty: recieve request (from ajax, but who cares), do PHP stuff, fill smarty vars, call smarty show, return to-show data.
You can do it in two ways :
Call a jquery ajax function that change contents of div.
second :
Use iframe where you want change content.
Related
I was trying to submit a HTML form that includes text fields and an image file using AJAX and jQuery. So it turns out you cannot do file upload using AJAX. Are there any nice ways to submit text form data along with a file? I'm aiming for broad browser compatibility, particularly with older IE versions.
One way I've tried is to eliminate using AJAX and simply use normal POST (although AJAX is the preferred way). After the POST another page loads. I can redirect the browser to load another page from my PHP using
header("Location: new_page.html");
but after this, how can I send the JSON response to the JavaScript script on new_page.html. If I do something like this, will the response now go to the JS script on new_page.html?
header("Location: new_page.html");
$data = json_encode(response);
echo $data
So it turns out you cannot do file upload using AJAX.
That isn't true
I can redirect the browser to load another page from my PHP using
The Location HTTP header accepts an absolute URI only. Most browsers will silently recover from that error, but you shouldn't let that be a reason to make it.
after this, how can I send the JSON response to the JavaScript script on new_page.html.
You don't. You generate that page programatically and build it in the state that the JavaScript would have put it in if you had run it after the page had loaded.
Loading a page that immediately fetches data with JSON to update itself is just cutting corners. You end up with the flash-of-default-content problem that used to plague Twitter (before they started building pages server side on initial load and using Ajax only to update them when the view changed).
I am trying to scale my existing site to be more responsive using HTML5 and CSS3. But the problem I am having here is that I want to use a PHP include to control what shows on the website using the JavaScript document.documentElement.clientwidth property in a PHP conditional statement. Example:
<?php
if (document.documentElement.clientwidth < 640) {
include "mobile_sidebar.php";
}
else include "mainsite_sidebar.php";
So, the responsive design isn't just document reflow but an actual reduction in the content in a mobile phone scenerio for example.
You simply can't combine JS and PHP like that - the PHP is run before the JS is even rendered! You need to pass the client data back to the server AFTER the page is loaded, then act accordingly.
You could pass some javascript data to a PHP script via AJAX on page load, and then send some data back to render the page accordingly. Maybe show a splash page while PHP is processing and returning data?
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.
I have a PHP-script that loads page-content from another website by using CURL and simple_html_dom PHP library. This works great. If I echo out the HTML returned I can see the div-content there.
However, if I try to select only that div with the simple_html_dom, the div always returned empty. At first I didn't know why. Now I know that it's because its content apparently is populated with javascript/ajax.
How would I get the content of the site and then be able to select the div-content AFTER the javascript has populated it with the correct content?
Is it even possible?
Thanks!
Yes its piece of cake if you are interested only in that particular html which is returned by ajax.
Gather information like url, parameters and request type (post/get) from that ajax request.
Generate the same request from your php/curl code and you got it.
And hope that server logic will not check who sent the request.
For this kind of screen scraping you could try phpQuery or Snoopy.
phpQuery has a web browser plugin and scoopy claims to simulate one
you can always bind to the event that is fired when the xhr returns data to the browser and do your operations there.
var xhReq = createXMLHttpRequest();
xhReq.open("GET", "ur_php_url.php");
xhReq.onreadystatechange = onResponse;
xhReq.send(null);
function onResponse()
{
// do the necessary
}
Yes, it is possible.
What you need to do is the following:
Create a CURL call to that webpage in order to retrieve any parameter used in the Ajax call that loads the content, which you are looking for.
Create another CURL call to the file called by that webpage Javascript using the parameters that you have gotten using step number 1.
ex. Say you want to get the content of http://www.domain.com/page.html and this page.html retrieves some other data using Ajax, say $("#div").load("http://www.domain.com/ajax/data.php?time=48484&c=487387").
What you will do is to make a CURL request to page.html first, and get the full URL of the Ajax call using preg_match() PHP function or any equivalent function in any other language. After that, create another CURL request to that URL - http://www.domain.com/ajax/data.php?time=48484&c=487387 - and get its content.
You're all set!
Unfortunately Javascript is run client-side, in a browser, so unless the page is loaded in a web browser there is no simple way to do it.
The only way I can think of, is having a browser running in a server’s background, reloading and saving the generated page automatically in a file which will be available for a PHP script to fetch.
Well... I don’t know about anyone who has implemented such an idea.
Better try to get the URL where the div is being populated from. If the div contents are generated through AJAX for example, maybe if you fetch the data-origin URL with cURL, the data will be available for you as well.
I've noticde some websites like Twitter do not have the usual paginations. Instead, it has the "MORE" link. When it is clicked, it shows more tweet below without refreshing the page.
How does this technique work?
It requests via XHR the next set of results, loads them, and then inserts the HTML (via DOM methods or HTML serialised) into the page.
If you know nothing about what I described above, start your journey learning about XMLHttpRequest.
This can be done with jQuery.
Here is the page update mechanism:
$('.more').click( function() {
$(this).before('<div><h2>Post 3</h2><p>Content</p></div>');
});
Demo at: http://jsfiddle.net/WCprC/33/
However the content needs to be fetched from the server with something like .get()
The pagination system works almost similarly on server-side (slice an array, set an offset, etc.) however, instead of rendering the complete layout with the content, they only return a chunk of html.
It is then a combination of two techniques:
Ajax which uses XMLHttpRequest to fetch data from server
DOM and its method which is used to manipulate the HTML tree.
(thanks to David Dorward for pointing me out the lake of accuracy)