Change the URL after creating a new page via JS - javascript

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

Related

After redirecting to a php page with request parameters and processing them, how to I return to the same page without the parameters?

I have one PHP page that tests $_REQUEST['delete'] to see if it exists.
If it does, then I delete the item number that it references from a list and redirect to a different tab. The tab switch is done by hiding and exposing different divs.
However, the URL displayed in the browser URL field still has the URL ?delete=nn in it. This can lead to a second delete if I inadvertently submit again without changing the shown URL.
How can I remove the parameters when I shift tabs? Or equivalently, can I switch to the new tab via my URL, e.g. URL ?tab=2.
It's a lot of code to show, so I am looking for some suggestions about how to structure. Right now, I create a 'page' with three divs, one for each 'tab' with one being the default.
After handling the delete, the page is reconstructed and the default tab is presented.
The URL isn't modified, of course, since I used it to create the page. Here is the 'pseudo-code':
<?php
... head stuff
... definition of tabs with onClicks for switching to named tab
... create content of div for 1st tab
... start creating content of div for 2nd tab
... examine $_REQUEST for 'delete'
... if it exists then
... alter contents of data to eliminate item nn from list
... then
... continue content of div for 2nd tab using altered data
... then create content of div for 3rd tab
... add content for javascript that manages tab switching, login, etc.
... echo the entire contents of the page for presentation.
... the javascript switches to the default tab on load.
I would like to have the url in the browsers url field NOT have the parameters when the page gets loaded.
I believe I stated the question poorly. I did look at the 'Funk Doc' suggestion, and it does work by putting a new entry on the History stack, but as I examined it, I realized that what I actually wanted was the refresh button of the browser to refresh the screen without using any of the Post or Get variables that might have been present when the screen was drawn originally. I realized this, when I changed to be sure that I was Posting the form variables, and upon hitting refresh, it asked about re-sending the form. The 'pushState' seemed to still retain the Post variables. I tried setting them to different values, but it didn't seem to affect anything.
The issue was that I delete a value in a list by line number, which deletes it from a file. If I use the refresh button, then the line number in the request is again deleted in the altered file. I want the user to have to click on the link to cause the delete, not have a delete happen if they refresh the page.
Suggestions or comments still invited, but I will consider withdrawing the question since it was stated poorly.
Thanks,

javascript accessing subframe url from another subframe (just confirming for umpteenth time that may not be possible)

Have frame setup with top, main, and switchboard. I want to get address of any page that's in main to populate text box in switchboard on a button click. I've tried everything I could find, including stack's answers, but no dice, unless I'm doing something wrong (strong possibility of that). So, at this point just looking for confirmation that it can't be done.

How to dynamically click on all list items without displaying the results of their default behavior but invisibly loading their contents?

I want to dynamically click on a set of unordered list items without displaying the results of the clicks. The intent is to pre-load dynamic content such as images and text that clicking on the list items will normally load and display; I want to preload the content as much as possible before the user begins to click on list items. (I've inherited code from another developer and I'm having to work within the constraints of his routine, so please bear with me.)
Each list item has an ID, like:
id="w273"
id="w175"
id="w123"
These would be my references. The list items are generated dynamically, and each contains an HREF to content that will be displayed in a hashed area of the page (the content consists of server-loaded images and text extracted from a SQL database using a query).
Normally, clicking on a list item changes the content in that area of the page, but it takes time to load. Once it's loaded, though, it can be redisplayed without reloading, of course, and so revisiting it is instantaneous...it's the initial visit that takes time.
I'd therefore like to pre-load all of that content by dynamically clicking on each of the list items in succession without displaying the resulting content, all done in the background, leaving the default content (which is automatically retrieved using the first ID in the click-list) in place. (I mention this detail to explain that the page loads initially with the first list item's content displayed, and that behavior should remain unchanged.)
How could I accomplish this with Javascript or JQuery?
MORE INFO
Okay, here's the skinny. The content is informed by a major containing php script that houses content from an inner php script. The outer script creates an image carousel whose thumbnails reference the inner script as hashes. At any given point, the URL will take this form:
g.php?g_id=45#a.php?a_id=238
The outer script is the "g.php" script. It references a thumbnail image in the carousel identified by the "a.php" script whose GET value is the key to loading the inner content on the page.
The individual thumbnails in the carousel are HREF'd like this:
<li><img src="thumb_image.jpg" /></li>
So clicking on this one would revise the previous URL to:
g.php?g_id=45#a.php?a_id=467
Notice, though, that the content generated by the "g.php" script doesn't change, therefore. The inner "a.php" content switches as a hash change when its corresponding thumbnail in the carousel is clicked. It's a surprisingly effective solution, with a few caveats.
The main caveat is that nothing is preloaded except the content referenced by the first link (which corresponds to the first thumbnail in the carousel), and that behavior is hard coded into the routine and is fine.
I simply want to dynamically click each link in the list to load all of the content, and to do it in the background after the page has loaded with the first link's content exposed (which is its default behavior, and, as I've said, which is fine). And it must be done invisibly.
It also doesn't matter in what order it happens, because the user might immediately advance the carousel and click on the 14th element in it rather than the 2nd element. So, I don't want to preload the content in batches of 10 or similar increments, waiting for the user to interact with the carousel to load more content; that makes no sense, provided the design of the carousel and how it is intended to be used in any non-sequential manner.
I simply need to loop through all of the list item links and load them invisibly—in whatever sequence they should happen to load, provided the asynchronous nature of AJAX. More than likely, the user will click on one of the links that has been preloaded by the preloading routine, but if the user jumps ahead and selects something that's still in the process of preloading, that's not a problem; by the time the user has examined that content, the rest of the content will have been preloaded.
So, that's more info. I hope this provides a better backdrop for understanding what I'm up against. Without completely rewriting the entire routine, the best bet seems to be to accept its own mechanism and accommodate it by looping through an AJAX/JQuery routine that dynamically clicks and preloads all the data in the background once the page has displayed its initial content. And I do have access to the IDs of the links in the unordered list; other identifying information could easily be added to it.
Text is not an issue, what could be an issue is the async loading of many large images - that might not start loading in the desired order.
It would be a nice idea not to load your images somewhere hidden inside the document, but instead get from the server a JSON holding all the needed data.
You don't need to emulate clicks on all your list one by one,
you need to simply get i.e: the first 10 images, and as the user advances, load more and more (here the idea is to avoid loading stuff that the user might never explore/see/use) - but it all depends on the User Interface you have.
JSON example:
[
{
"id" : "w125",
"image" : "path/to/image1.jpg",
"content" : "HTML or whatever"
},{
"id" : "w275",
"image" : "path/to/image2.jpg",
"content" : "HTML or whatever is the content"
}
]

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 .

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

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.

Categories