ASP.Net mvc, show image doesn't affect browser URL - javascript

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.

Related

Change the URL after creating a new page via JS

I have a main page and in it there is an "add" button that adds an image on the screen with each click (like cards).
Each image has an id and a name and they are arranged in an array in order.
Every time the "add" button is pressed I execute the command
var newDoc = createHTMLDocument("image name")
I want to change the default url (about:blank) to something else, for example the name of the image (of course without spaces) so that I can put this URL in the onclick of the image and by clicking on the image, its page will open. I want to change the URL because I had many pages (1 for each image I create).
You have to remember that my main page will have a lot of clickable pictures (cards) and each one has to open its own page.
My main problem right now is that I can't change the URL.
I'm not sure accessing the URL and changing it is the right way to do it, but that's what I thought was needed. (I would love to hear more suggestions if any).
Right now it just generates HTML documents with a default URL that I don't even know how to get to.
In addition, I work on a computer locally that is not connected to any network at all and there is no server. Everything locally!
Many thanks to the helpers

Create multi page design with single URL

My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.
What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!

Keep most HTML after link clicked

Hi i want to make an effect similar to what this site does http://www.hffm.co.uk/
When you change the page the url up top changes but the content in the sidebar and header stays the same. - i am also curious if this affects SEO.
They stay the same - and do not reload with the page - i figure it has to be some ajax thing? Curious what a system like this is called.
The point is in their case they dont want to interrupt the radio on a link change.
To update the specific part of the page it can be achieved through Ajax and JQuery. Basically both of the those works on the client side which means that website doesn't refresh. You can always make a Ajax request to the server which can return the content in a Json format and that content can be reflected on the page using Jquery.
This is only just a overview of how ajax/Jquery works. But you need to be more specific in what you are trying to achieve and what you have done so far.

Rails and AJAX - how to add parameters after call?

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.

Adding view count to external links on site

I want to create a gallery where the images link directly out to the website in a new window when clicked.
However I would also like a view (or click to be more descriptive) count to show overlayed on the image on hover.
How do I do about creating the link/view count? Since no page is actually loaded - only a link clicked?
On top of that I would also like to use a custom short URL service. Does anyone know one that is good and/or would have a solution to my problem?
Cheers!
I've made a TODO list for you :)
[JS/AJAX] catch the click event and send a message to the server what was clicked
[PHP/ROR/Python/etc] store information in the DB (increment the clicked element counter)
[PHP/ROR/Python/etc] when page is loaded, retrieve counter values from DB and put them into the HTML
[JS] use counter values to display them over images
As for short URL services I like goo.gl .

Categories