I would like to use a DIV to load a page within a page. Seems simple enough - BUT, I would like to do this WITHOUT refreshing the entire page.
Here is my example:
browse.php --> Lists all of the items that I currently have for sale on my site. This page can be incredibly long, and taxing to reload (especially on slower connections).
editcart.php --> This is the page that I would like to load within browse.php. It allows the user to add/remove a specific item from their cart.
Is there any way that I can load editcart.php on browse.php WITHOUT refreshing browse.php?
If it's just loading the page you can do the following using the .load() method
That was the first item that came up in google search
$('.editableItem').click(function(){
$('#editDiv').load('editcart.php');
});
You can read more about this and other methods here
Related
The code is as below:
I am getting a total number of items from woocommerce cart and I am showing a specific footer on a specific quantity.
** Everything is working fine but the problem is i want it to update the footer also with floating cart body without reloading the whole page.**
Every time I have to reload
Want to Achieve:
Update Footer Div/Page According to quantity means a user need to have a total of 10 items in the cart to checkout
But the whole page should not reload it just should be the floating cart.
By the way I am using XT floating cart
Will be really Appreciated
<?
$min = 10;
if(WC()->cart->cart_contents_count < $min)
{
xt_woo_floating_cart()->get_template( 'parts/cart/custom_footer' );
}
else
{
xt_woo_floating_cart()->get_template( 'parts/cart/footer' );
}
?>
Shams what you're attempting to achieve is unfortunately not what PHP was built for.
When you submit a request to PHP it runs through the code, interprets it and renders the page server side, before sending the HTML, CSS and JS to the user. Therefore, you cannot reload just part of page without reloading the whole page.
One way you can achieve your desired functionality is to create a controller. Creating a controller means you create a PHP function that sits at at specific web URL. You can parse an object to this URL and the URL can parse you an object back.
Once you have created the controller you need to create the caller. Usually these front end calls are made using Javascript. You can wait for a user to complete an action than then use AJAX to send a request to your controller. Your controller can return some data and you can use javascript to manipulate the DOM to alter the page without reloading the whole page.
Please note that this is just one way of achieving your desired functionality and requires some knowledge of programming. However, if you're determined and happy to learn you can use the information above research how to program an approach like this.
My app currently changes data quite frequently and requires the user to switch back and forth between pages.
I often find that when a page is loaded through AJAX, and then you return to said page either through the backbutton, or by clicking a link...the information isn't always refreshed.
Is there a way to force this refresh?
This is due to the fact that when you link pages through AJAX navigation in Jquery mobile they are automatically loaded into the DOM according to the documentation.
Try adding a data-dom-cache="false" to your "page" as one of the attributes.
Eg. I have a div that is there inside all my views but still I have to reload it everytime thereby slowing down the page loading rate. So is there a way to not reload the part of the page?
you should consider using Ajax...
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
check this page, it's an easy step by step to learn the very basics : http://www.w3schools.com/ajax/default.asp
You can go with Ajax and only reload those parts of the page you need.
because of considering embed google ads into include page. I am giving up jquery.loading
(google not allow jquery ajax and jquery loading for ads, now even iframe page)
so is it possible use other javascript method for control php page include?
more explain, if my page need to including 10 pages, and I do not want they all loading in same time(such slowly for loading at same time). So I put 10 buttons for switching include page.
only click each button, loading the chosen include page to main. and click another one, loading the new one and hidden the first one.
As long as they are links google should crawl them fine, you just need to stop the link from being clicked on in javascript...
Test Page
Then your jquery...
$(document).ready(function(){
$('a.test').click(function(e){
// Load the AJAX here
// Stop the click from actually going to the page
e.preventDefault();
});
});
How do I make my website compatible with all those autopaging plugins out there that load the next page beneath the current, thereby saving a page reload?
It's depend on how you design your page.
Let's take a look at twitter page. The items there displayed in a li, top to down. Implementing a autopaging to page like this will be quite simple.
When page load, display a predefined number of item in list (10 or 20, or else)
When user reach the end of list, (maybe detect the position of certain element, or else), load the next page via AJAX. The back end page should detect AJAX request and then only return a portion of page that contain the list item only
In AJAX response handler block, do a DOM manipulation to add the newly received list item into the end of existing list.
In my project, I create function like this by myself. I'm using jQuery btw.
You can't make it compatible with all plugins. You can make it compatible with a specific plugin. How to do that is probably described in the documentation for said plugin.