So I have this site that dynamically posts content using jquery and php. I would like to know how to generate permalinks. I think I could do it, but I dont even know what I should be searching for on google. You can see the site at www.eataustineat.com.
For example, I would like a link like eataustineat.com/claypit to that would go directly to the video review, instead of having to to search for it and then click the link.
I will describe the how the site works on a basic level:
first the user selects the "All Restaurants tab" in the content slider, then jquery slides to the third frame.
Next, a user selects a link from a list. This list is generated by sql queries in php, while javascript pushes the result of the php to a specific div.
When a user selects a link, jquery slides to the second slide. Once again, php runs a query while javascript pushes the content to a specific div. As a result, the user never leaves the index page.
I think it depends on how your website works. The ideal thing that I have in my mind at the moment is:
Decide a unique way to find your video (could be a title, a file name, an id: must not change), if you are using a database it's a column with a value different for each entry
Create a webpage that accept as a parameter (not optional) (possibly a $_GET parameter, not a post) that unique key and fills it's content with entry's data (the video review hopefully)
Now the permalink will be yourwebsite/yourwebpage?myparam=myvalue
Normally the permalink is the numerical id referred to that entry (thinking about databases in this case)
Edit 1: If what you mean is "moving the webpage to the link" (and not creating it), maybe you should ignore my answer, I didn't understand the question so.
What suggested Tadeck, if this is the case, is good
Edit 2: What about if, following the keylines I given you to create a permalink, you pass this value to the homepage and on page load you fire the event through the click() function (so it's like if the user clicks on the link, fires everything that you need, even the scroller thing)
Obviusly you need to give an ID to each tag, but I don't think it's a big problem (just use directly your "permalink value" as an id
The alternative in using click() method, is: give to the slider function a name so you can call it instead of waiting the click event only, expecially this part
$('.cross-link').live("click", function(){
You'll have to replace function() with a named function
then you will call, on page load, that function + ajaxpage('result.php?id=9', 'results2') + ajaxpage('videoloader.php?id=9') completely emulating the click event in this case.
You still need however an id in the a tag to find out which is the link
You should search for one (or both) of the following points:
pushState and onStateChange - preferred, nicest and probably what you are looking for,
location.hash and onhashchange - probably easier to implement (does not require you to support it on server side and works in older browsers too), but in this case you would get URL like http://eataustineat.com/#!claypit instead of http://eataustineat.com/claypit.
In this first case you would need to make sure server side scripting / configuration will invoke proper state within JS, when visited eg. by entering URL (http://eataustineat.com/claypit).
Related
I am working on a site which has an animated background, the animation is powered by javascript and therefore when the user enters and submits a search it would be great if the animation were to continue smoothly whist the search was completed and results appended to the DOM.
I have managed to get to the point where the results of the search are returned to JS from an ajax request although inherently the url of the ajax request is different from the url currently displayed in browser.
So my goal is for the user to come onto the site at say, www.example.com/public/home/search
They type something into text input and press search, the url changes to something like
www.example.com/public/home/search?q=some+search+query or
www.example.com/public/home/search/somesearchquery or
www.example.com/public/home/search/#somesearchquery, etc.
but the page state remains the same, the results are appended to the DOM and no full reload occurs.
Returning to a url like the one above should load the page and send the query automatically, returning the page with the results already appended.
I don't know weather this is possible, with or without obeying the MVC pattern.
I am not using any mvc framework and would like to avoid it if I can but instead using a bare bones system similar to the one found at. https://www.youtube.com/watch?v=OsCTzGASImQ
Any ideas, suggestions, alternatives?
There are several answers here for "change URL without reload", for example: Modify the URL without reloading the page .
So, I think you just have to implement some solution from one of these answers and run some javascript that change the page.
You have to be careful, because the modified URL must to load the same version of the page the user is seeing after the changes caused by the javascript. Otherwise, if the user copy and paste the URL, he will not be happy.
One way to archive it is to create the javascript function that "updates" the page without reload it based on the text input (let's say, f). Then, if the user try to access directly the page
www.example.com/public/home/search?q=some+search+query
your server side code just return the page search with a call to this javascript function at the end, like that:
f("some search query")
so, this function will update the page and the final effect will be the same as the user just enter in the page and after tries to type some search query.
(Note that, this function f may be used in both cases: when users type the text to search and when users just paste the entirely URL).
I have sort of design problem with my site. Here's the introduction:
I have a simple, dynamic page which contains a videoplayer and next to it a bunch of videos to play. Under the videoplayer there's a comment section that is powered with jquery form plugin because naturally I don't want the page to refresh and reset the video if someone enters a comment while watching.
So, the page fetches the video ID to play via a $_GET variable and then gets another 10 or so video links based on the ID from MySQL database and plays the first one and lists the rest as links next to the player.
The comment system is simple. It fetches all the comments from MySQL table having the same ID as the video playing and lists them via the jquery form plugin mentioned before. Upon entering a new comment it adds the comment to the table again by targeting the same ID.
Since the ajax form plugin fetches the comments from external PHP files containing the comment showing/adding code - I have to use a $_SESSION variable to pass the info from the main page to those files.
And here's the problem:
Everything works as I expected when a client browses the page normally.. but when he decides to open another video to a new tab - the comment system breaks down.
So what happens is that I pass the video ID from the main page's $_GET variable to a $_SESSION variable and use it to let the external show/add-comments-PHP-files know which comments to show. This works fine when a client is using only one tab but when he opens another video in a new tab the $_SESSION variable of course updates to match the new tab's currently playing video's comments and since this variable is same in both tabs - the original tab now points wrongly to the new tab's comments.
So.. to hopefully clarify a bit:
browser tab 1:
$_SESSION['now_playing'] = video 1
[..client opens another video into a 2nd tab]
browser tab 2:
$_SESSION['now_playing'] = video 2
..and from this point on the tab 1's comments are of course the same
as tab 2's.
Would there be any tricks to start a new session upon a new tab creation or something like that? I'm rather new to all this so there might be obviously silly involved.. any pointers how to get this fixed would be greatly appreciated - even if it's a better way to implement the commenting - adding comments without a page refresh is a must tho.
Regards, kitsu
You are hitting the classic problem that the Session data is controlled by a cookie, and is therefore per browser not per screen.
One approach is to have a hidden field on the screen. When handling the get to create the screen, set this to a unique value, and use that value as a key into the session data.
Then pass the value back with the ajax requests - so each screen's requests are handled with a different part of the session data.
Okay I'm not really sure how to approach this. I have a user-generated post board where people post, it drops down onto a list of a bunch of posts. When you click on the ID number of the post it will bring you to a separate page with just that post and the comments on the post. I want it so when you hover over the href it drops down something that tells the user there are x amount of comments on this post. This way people know if there is comments without switching pages and also being able to be able to click the href still and go to the postid page.
I assume some ajax/jquery/javascript would be used to accomplish this but since I'm fairly new to ajax and jquery I'm not certain how this would be done. Thank you!
For a hover effect, it would be better if that information was already stored on the page and just hidden. Then when the user does hover, you can just un-hide it and have it positioned where you want, and then hide it again when their mouse leaves the area. Using AJAX requests for this purpose would waste away a lot of HTTP requests for such a tiny amount of information.
Really, you could do the hover effect using pure CSS if you wanted too (I would).
Since a hover happens fairly often, I wouldn't use it as the default event to fire an AJAX-request. This would increase the HTTP-traffic enormous. See if you can fetch this information when the page is build (and put it in then) or use something else like a "preview"-button for the event.
Anyways, this would be the basic workflow if you want/need to use AJAX:
Write a PHP-script (or any other language you use) which fetches the number of comments (and what else you want to display) from the database (or where your data is stored).
This script should then be called via AJAX (with $.ajax() from jQuery for example). As the expected return-type you would then use json.
The script which fetches your data would then create an object, use PHP's json_encode()-function to encode this object to JSON and echo it out.
This JSON-object will then be available in the success-method of the ajax()-method from jQuery. Then, you can access its members (e.g. the comment-count).
Preamble to scope my question:
I have a web app (or site, this is an internal LAN site) that uses jQuery and AJAX extensively to dynamically load the content section of the UI in the browser. A user navigates the app using a navigation menu. Clicking an item in the navigation menu makes an AJAX call to php, and php then returns the content that is used to populate the central content section.
One of the pages served back by php has a table form, set up like a spreadsheet, that the user enters values into. This table is always kept in sync with data in the database. So, when the table is created, is it populated with the relevant database data. Then when the user makes a change in a "cell", that change immediately is written back to the database so the table and database are always in sync. This approach was take to reassure users that the data they entered has been saved (long story...), and to alleviate them from having to click a save button of some kind.
So, this always in sync idea is great, except that a user can enter a value in a cell, not take focus out of the cell, and then take any number of actions that would cause that last value to be lost: e.g. navigate to another section of the site via the navigation menu, log out of the app, close the browser, etc.
End of preamble, on to the issue:
I initially thought that wasn't a problem, because I would just track what data was "dirty" or not saved, and then in the onunload event I would do a final write to the database. Herein lies the rub: because of my clever (or not so clever, not sure) use of AJAX and dynamically loading the content section, the user never actually leaves the original url, or page, when the above actions are taken, with the exception of closing the browser. Therefore, the onunload event does not fire, and I am back to losing the last data again.
My question, is there a recommended way to handle figuring out if a person is navigating away from a "section" of your app when content is dynamically loaded this way?
I can come up with a solution I think, that involves globals and tracking the currently viewed page, but I thought I would check if there might be a more elegant solution out there, or a change I could make in my design, that would make this work.
Thanks in advance as always!
I wanted to follow up here, just in case anyone was interested. Turns out that my question was unnecessary.
Because I have my code set up to save the entered information in the change event for the input element, and since the change event only fires when the element in question loses focus, then if the user clicks anywhere else in my web app interface, that fires the change event for the input, and the data is saved.
The only exceptions are if they refresh the page, or they close the browser, but both of these events do result in an onunload event, meaning I can bind my save data function to that event and handle those cases.
So everything works as I hoped it would, and my confusion arose from a misunderstanding of when the change event would fire.
AJAX is normally overkill for site navigation. Unless there is a compelling reason to use AJAX , I would just make your navigation menu use good old links instead of AJAX calls.
AJAX is used to keep the user immersed in an application, without seeing the flicker, etc. of a full page refresh. However, if they are planning to navigate to another page, the full page refresh is expected (and therefore desirable).
I've created a page using JQuery and Ajax that helps a user filter through a series of options and ultimately displays a filtered list of products meeting their specification.
This all works fine.
The problem i'm having is the "Back Button" problem with Ajax, i know how to get around this with anchors on static content (i.e. Filter.php#Step2).
However, the page works by returning a list of product specifications, when a spec link is clicked, Ajax loads the same page again applying the links parameters, this is repeated up to six times, after which, the user is redirected to the filtered product URL.
If the user then clicks "Back", then of course, the filter page reloads from step 1 rather than the last step (step 6).
Does anyone know if this is even possible?
Every time you want to be able to go back to the previous step, change window.location.hash.
Ie.
window.location.hash = 'step1';
This changes the #foo part in the URL. You will also need a timer in JavaScript which checks if the hash was changed, as there is no way to reliably detect hitting the back button. Something along the lines of...
var oldHash = window.location.hash;
setInterval(function(){
if(window.location.hash != oldHash) {
//the hash was changed, do something
}
}, 50);
I hope this helps
I can't say I've implemented this before personally, but I remember the jQuery Tools tab component doing something similar. I'm not sure if it will work for your particular situation, but it may be worth looking at their approach as a starting point.
jQuery Tools AJAX:ed tabs with History support