If you click on a photo on Facebook or Instagram, the photo with enlarge (probably) using AJAX and then are appended parameters about the photo to the URL.
How does it work? I would need something similar for menu items, but not sure under which term to search this.
You can change the URL in javascript at any point by just setting window.location, regardless of whether you're doing an ajax call or not. It depends a bit on whether you want navigation to actually take place, or if the javascript is just using the URL to store the values so that it can use them later or in a shared link. But basically you can do something like:
window.location = 'http://mydomain.com/thispage#param=1,param2=2'
or whatever clever string manipulation you want to create the URL you're looking for.
Related
I need create probably an uncommon thing, so I haven't found any guide, and thats why I would like to ask here:
I am creating an interface for a site, which is being created by ajax loading its parts.
My web interface can accept an URL parameter as an input. If there is the parameter, my site changes its behavior (loads the page + content by value of that parameter and show it at specified place).
But, at some point, I have to get rid of the parameter.
Especially, if someone reloads the page, I want to show the cleanly loaded web page, not the content - but the parameter is still there whie pressing F5
So, my code - which is not working, looks simply like that:
//EDIT: Thanks to #charlietfl. I have here an unload event, which figures in ways like "I want to go to another page by url adress bar"
Same problem, jsut need to change it just and only to RELOAD page event.
//we are here: http://example.com/?docId=1
$(window).bind('beforeunload',function(){
//window.location.replace("http://example.com");
window.location.href = "http://example.com";
});
Know two things:
1) $(window).bind works well, with simple alert in it.
2) window.location.replace("http://example.com"); works well too, if fired at some other event, like key press (for my testing)
What I am trying to achieve, is to "skip" the reload by redirecting.
Aaaand one more thing. I know about HTML5 syntax changing the url without reloading the page (change->reload->done), but I can't use it, because of compatibility needed with older browsers.
Well, plase, any tips? Thanks in advance :)
Is it possible somehow to open url, without loading it. Let me explain, I'm creating check-box which will let to create new log and automtically input values. I know how to take boxes and input value into them using javascript. But i don't know how to open that page without loading it on screen OR write that url that javascript would type values into that page.
The concept you should read up on is AJAX. It sounds like it would fit your needs: post our data to a script, let the script do it's job, and work with the answer (or completely ignore the answer)
Since it seems that you are a beginner, maybe you might want to take a look at the jQuery Ajax documentation.
I have a javascript portfolio filter on a page that sorts logos by category, it assigns a category anchor link to the URL.
I'd like to use this anchor link URL to trigger an insertion of text. I can trigger the insertion of text via onclick with no problem using:
document.getElementById("insert-text").innerHTML
This works fine, but when you click on category logo & go to new page, I want to be able to hit "back" and still see the same results. The text insert disappears.
I was thinking something along these lines:
Get URL (with anchor)
if URL = certain category anchor
insert text
if URL = other category
insert other text
etc...
I think my logic is correct, but not sure of the syntax? Any suggestions would be greatly appreciated!
What you are asking to do is to save the state of a page so that when you go back to the page your browser returns to where you left off. This is what browsers use cookies for. Cookies are a set of key/value pairs that your browser stores and you can retrieve the values on. You could put a boolean in the cookie that signals whether your function has been triggered, on page load you can read the cookie and if it is set to true retrigger your function.
W3schools.com has a nice writeup on cookies to get you started.
This jsfiddle shows how you can expire the cookie logically.
document.cookie = 'ExpirationCookieTest=1; expires='+exp.toUTCString();
I have made image gallery. And it works. But I maybe made a mistake that I can pay too much now :( I don't know.
I have a ImageGalleryController with Index action that returns IndexView with list of images.
When I navigate there browser URL is: localhost/mysite/gallery
When user click on image I made ajax call (with jquery). To action sethod ShowImage. ShowImageView contain full browser div with image in it. When I call show image I pass clicked imageID. After getting all needed data I return ShowImageView.
In ajax call on success I do:
$(document.body).append(resultViewShowImage);
And "ShowImageView" is displayed on top of my site. And here I can navigate images etc. It all works grat.
But now the huge problem:
When I display ShowImageView it is a div positioned on top of my site, and URL stay the same localhost/mysite/gallery, when I navigate images inside url is not changing.
I know that I made huge mistake here but what is the proper way to fix this. Can I do something with routing or maybe to display this "ShowImageView" in some other way (not appending it to body)?
I am trying to figure how 'flickr' display this top view but no luck :(
If you look at how flickr does it, and compare browsers, you see that they do not change the url in IE8 for example. I would change the url using JavaScript when the user switches pages, and use these changes to also work as parameters to your controller.
Edit:
Changing the url is only one part of the solution. For example: change the url to localhost/mysite/gallery/1 when the first image is shown, using JavaScript. This url would then point to the gallery controller with the number 1 as a parameter.
After that, in your controller, you have to see what the parameter is and based on that choose what image to display.
how to use Pager(GridView or ListView) with html link.
is that right that this code is not SEO friendly?
thanks.
You have two questions.
First:
You can implement a pager by using post-backs. Basically you will invoke a server call at each click of a link. And the server would reply with a new page of the dataset. But the asp.net controls submit the form using javascript. It looks like:
link text
So to not use the javascript at all, you could use a HTTP GET only method. This is just one way to do it.
So what you want generated is something that, it will pass to your server a page value using a query string parameter named 'page'.
You can handle that in your aspx page any way you see fit. But it needs to generate some thing like that.
page 2
In the page load of somepage.aspx you handle it.
protected void page_load(EventArgs e){
// check if the page parameter is set in the query string
if(Request.QueryString["page"] != null){
// page is the value of the requested page
var page = Request.QueryString["page"];
}
// bind you data to the control.
}
Then when binding the data to your GridView or ListView you filter the data based on the page requested.
#pre has a good answer for your first question.
Regarding your second about SEO and JavaScript:
JavaScript has to be used correctly. In other words, the html has to have the links and all of the pieces necessary to be read by a spider. If nav elements are injected via JavaScript then you can be assured that a spider will not see them.
You can certainly use JavaScript to change the styling, reposition the pager area or add other attributes but the base anchor tags with the appropriate href attributes have to be present.