I am working on an application which involves lot of ajax requests for updating the HTML content.I have a dashboard with a fix left menu or accordian panel which takes the event and based on the events I have to update the center portion of the page using ajax.
Issue: I am facing issue with the back button of the browser as I am not refreshing the page.I want that the user should be able to navigate back and forth through the ajax content,but as I don't change the URL it redirects the user to the previous page they came from and destroys all the information entered by the user in the fields.
While making a search I came through this website which is quite popular and manages a playlist on the left and a player at the bottom without refreshing the page,but the URL changes for different content the show.
I am not sure if there is any specific framework that can be used or it can be achieved via normal code.Any help in pointing me to the right links or suggestions over it would be helpful.
Thank you
What you seem to want is history.js. It uses the HTML5 history API to navigate (and you can fire events upon change), and it also supports older browsers by using hashbangs.
Essentially the browser will not load any new page, but you can still change the URL to reflect changes (and have the users bookmark pages etc.).
Take a look at their demos to see if it's what you're looking for.
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
Essentially I am coding a website for a university. I have a script that allows researchers to add their profile to the departments database. These profiles need to be approved by an admin before being available on the public site.
In the admin panel, I have a page called researchers, that shows the admins all the researchers in the department in a table. There is another tab that shows the researchers that are awaiting approval.
The php script to show the table is loaded through JQuery. I clear the div using JQuery empty function, then load the php script using JQuery load function. The problem is when I load the script, it loads a cached version of the script. If I approve a researcher, and click the tab awaiting approval, the researcher that I just approved still shows up as awaiting approval, unless I clear the cache. Any ideas? Not sure what code to post to help get an answer.
Thanks
How about add a timestamp to your get url. like get/this/url.php?timestamp=2345232423
This way it should not cache it.
I apologize ahead of time for the non descriptive title, as I wasn't really sure how to word this.
I've currently switched some of my Wordpress sites that have a responsive design that implement a slider over to WooSlider. Works super well, and I love it. However, there is something stopping me from switching all of my sites over. And I understand this is not a WooSlider only fault, but it's something I cannot Google and find out.
This is happening on every page view, even those without a slider.
In Google Analytics it shows domain.com/?wooslider-javascript=load&t=1352743207&ver=1.0.0 as a page view. For every single page. I obviously don't want this, but I don't know how to get rid of it.
Another example of this happening is using Gravity Forms with a referrer info plugin that shows page views, search query, browser, etc.
When the form is sent, the following is sent via email.
Page visited 1: domain.com/?wooslider-javascript=load&t=1352743207&ver=1.0.0 (http://domain.com/?wooslider-javascript=load&t=1352743207&ver=1.0.0)
Page visited 2: domain.com/about (http://domain.com/contact/about/
Page visited 3: domain.com/?wooslider-javascript=load&t=1352751787&ver=1.0.0 (http://domain.com/?wooslider-javascript=load&t=1352751787&ver=1.0.0)
Page visited 4: domain.com/contact/ (http://domain.com/contact/)
So obviously I don't want that js file to show up as a page view. How can I remedy this?
Thanks!
Google Analytics Configuration Mistake #2: Query String Variables
wooslider-javascript,t,ver
I have built an in browser engine that will retrieve pages without executing server side scripting... seems ridiculous, I know, but I'm doing this as part of a school project.
The problem that I am having is that once it displays the page if a link is clicked it will bring you to www.their-site.com instead of www.my-site.com?site=www.their-site.com.
Basically I need my php page to detect if a link is clicked and, if so, add "www.my-site.com?" before it so that all sites will still be rendered without all the server side scripting. Is their any way to do this?
---------------EDIT---------------------------------------------------------------------------
Ok I guess I wasn't clear enough the first time sorry about that.
I have made a php page that will display the contents of any site without executing the server side scripting that belongs with that page. This allows you to get around those annoying news articles that allow you to have a glimpse at them for two seconds and then a login box appears. the problem is once you've accessed the pages if you click any links you are connected to their server and the scripts turn back on. I want MY php to execute, not THEIRS
You need to know what you want first.
You say no server side scripting, then you mention php.
To do this, I don't think you can do it with just js.
You need to get the pages, using php, depending on what exactly, modify them such that when a link is clicked, it sends an ajax call to another page. This will require either regex replacement or the use of htmldom.
When a link is clicked, it should send the ajax response to the php page which can then request tha page, make modifications and send it back to the browser. You can then use js to replace the page contents.
Let's say I have a URL: http://example.com/person/list
This website will display a list of people. The list of people get very long, so eventually I build in pagination. Let's say 10 people per page. The URL looks something like this:
http://example.com/person/list?page=2
If I click the next page link, I will be taken to page 3:
http://example.com/person/list?page=3
This is good because if I copy and paste the URL to a friend, she will be directed to page 3 immediately.
Let's say that I now incorporate AJAX, and the page requests are ajax calls using jQuery. The original URL is http://example.com/person/list and when a user clicks on the next page link, the URL in the address bar doesn't change.
This is bad because if I'm on page 3, the URL in the address bar doesn't reflect this anymore.
There are multiple jQuery history plugins which will change the URL, however, these will ONLY change the portion of the URL which is after the hash mark #. Information after the hash mark is not sent to the server.
If I'm using a history plugin, the URL can be changed to http://example.com/person/list#page=2
My problem with this approach is: If someone copies and pastes this URL to a friend, when the friend requests this URL, I have no idea which page the user is intending to look at. Therefore, my best approach is to load all of the people entries onto the page, and have javascript select which page to display based on the information after the hash mark. This is a problem because I started to paginate the pages to reduce the amount of information being pulled back from the server in the first place!
What options do I have, such that I can have the back button be usable with Ajax, but also have bookmarkable links which do not require me to get all info from the server.
As I recently learned from my question you have to check the hash-part of the url after the 'friend' opened the link and fetch the content using ajax.
Or you can rewrite it on the server-side to http://example.com/person/list?page=2
You could not list anything until the page loads and then have ajax load the appropriate page.
Another option would be to load the first page as normal and then have javascript check the page hash to load the appropriate page.
For very small loads (and I assume loading 10 people is 'fast'), the second option is probably the best as it shouldn't cause too much disruption of the UI.
Option one has a downside as far as SEO goes, as search engines won't index the content if it's not loaded.