Adding / updating a paramenter in URL with jquery - javascript

I have 16 database results shown on my website. Using a load more button, the user can load the next 16 database items and they get appended into the container.
Im trying to make a way so that if the user clicks back after visiting a link, they will get shown the same amount of results as they had loaded.
My plan for this is to add a page number to the url after each load more function. When the user clicks back in the browser, i can then use that parameter in the LIMIT php claus.
So, in my ajax response, i append the data and then i wish to add a page number to the url, or update the page number if there already is one.
An example of what i want to achieve is:
www.mydomain.com/?page=1
I have made a jsfiddle with a basic button click function just for testing since im away from my laptop until later.
jsFiddle
And the code just incase:
var url = document.URL;
var pageID = '1';
$("#addtourl").click(function(){
// add page id to the url
alert(url);
});
Where the url is alerted i want to modify the URL. I already create a page ID so thats not an issue.
Thanks!

You can use the HTML 5 history.pushState function as explained here .

Related

Using jQuery to determine if a user has copied and pasted a full URL into their browser?

Not sure if this is possible, with or without jQuery. I have a page where there are two dropdown menus; one is showing today's car sales and the other is showing car sales from yesterday. Today's Sales is always rendered on page load; when a radio button is checked the Comparison Sales is then rendered and an extra path is added onto the URL.
The issue I have is that when a user is sent the url with the extra path (i.e the comparison menu has been selected prior to the link being sent) the text etc of the Today's Sales dropdown won't populate when they open the link.
So for eg:
URL with no comparison:
http://www.example.com/today/sales
URL with comparison dropdown open:
http://www.example.com/today/sales/compare/yesterday
I want to create an if statement to say something like
if(link.pasted) {
//do this
}
Again not sure if this is possible.
You seem to have redirected an entire page to a different URL when the user makes their selection, instead you should consider using a hash at the end of the url to indicate the "comparison" has taken place.
So you'll end up with two urls, both of which could be pasted into a browser
http://www.example.com/today/sales
http://www.example.com/today/sales#compare-yesterday
It is easy enough to apply the hash to the first url on a javascript action
$('input:radio.compareYesterday').click(function(){
location.hash = "compare-yesterday";
});
You can also watch for a change in the hash location, in order to perform some update to the view - I suggest you wrap that up in a function, as you'll be doing it onload too!.
function updateUI(){
if(location.hash == "#compare-yesterday"){
// do whatever happens when comparison is active
}
else{
// reset the UI to its default state
}
}
$(function(){
$(window).on('hashchange',updateUI);
// other onload stuff
updateUI();
});
This fiddle demonstrates however jsfiddle does not allow me a url that goes direct to the result in a way which passes the hash through - so although the code is there I cant demonstrate that it would also work if you went directly to the #compare-yesterday route.
This is the basis for how Single Page Applications deal with routing, and how to adjust the view depending on the users actions (or indeed, if they've followed a link into your SPA). You may like to have a look at frameworks such as Angular if you're interested in learning more.
Depending on the entire architecture of your page you could propably set a js variable to some value on dropdown selection. You can then check if this variable is set to determine if the user got to this page just now.

ajax/json/? to query a webpage and return specifc div/p values

I'm trying to find code or a way to process the following:
When you click a button a site it'll go and read specific website link and then return variables that it finds in the remote page.
1) user clicks button
2) query goes to www.whatever.com/myfile.html
3) there is a specific p tag inside a div tag called 'totalamount' = <div id=WTextWrapper><p id="Amount">2,000</p></div> That I want to grab the value of and then display it on my page below the button that I clicked in step 1
I know there is a way to do it, but I have no idea how it's done.
You need to get the source of the html and use regex to extract what you need. You can use file_get_contents() function to get the source html.

Create dynamic url from user input

I am running a blog: http://jokesofindia.blogspot.com. I want to provide a dynamic link in the sidebar of my blog to download a Hindi newspaper in pdf format.
I tried to view source url of epaper.patrika.com and found that if I enter the url epaper.patrika.com/pdf/get/145635/1 it will download the first page and epaper.patrika.com/pdf/get/145635/2 it will download second page, and so on.
The last part of url is the page number. But the second to last part of the url, '145635', changes every day. Now I want to be able to enter this changing part of url manually every day and then have the JavaScript generate download links with the date replaced by the information I entered.
This code also needs to work on mobile devices such as Android.
You can use the html5 data object to store the data and use JS to get that data and append it to the link:
HTML
<div class="linkholder" data-number="12345">
PDF page 1
PDF page 2
</div>
JS
$(document).ready(function() {
var newNum = $('.linkholder').attr('data-number');
$('.linkholder a').each(function() {
var newLink = $(this).attr('href').replace('#', newNum);
$(this).attr('href',newLink);
});
});
view the CodePen to see it in action.

Get previous page phonegap javascript

How do I get the previous page with javascript on phonegap?
I want to go back (window.history.back()) only if I come from one specific html file, otherwise I want to go to another html page when back button is pressed.
So I want to know which one is the previous page on history.
I have been googling for a while and I didn't find an answer that suits for me.
If you want something built in you can use document.referrer to get the previous URL. But it might not be reliable for your needs. More info here, here and here
Another VERY simple option is to store the current page name in the session storage, read it and then decide what to do next.
//retrieve the previous page
var previouspage = window.sessionStorage.getItem("page"):
// if thee is no previous page you are on the first page
if (previousPage == undefined){
//do something if you want, this means it's the first page the user is seeing
}
//get current page address
var currentPage = window.location.href;
//store it
window.sessionStorage.setItem("page",currentPage);
//check if the previous page is the one you wanted.
if (previousPage == "the_page_you_wanted"){
// do something.
}
LocalStorage vs SessionStorage

Facebook Like button for every item?

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.

Categories

Resources