Develop Reference

Can a URL activate several scripts?

Is it possible to alter the url of a webpage so that it will activate specific click-activated features on the webpage without the user having to do the clicking?
To better illustrate my question I made this fiddle.
The page loads with a red box with information in it. The user can click the box once to see new information. They can click it again to see a third piece of information.
I would like to have urls that load the page with specific information showing. For example, if the main url for my page is http://www.mypage.com, then I would like to have urls http://www.mypage.com/#info2 and http://www.mypage.com/#info3 so that when the user enters the info2 (respectively, info3) url, the page loads with the second (respectively, third) piece of information showing.
Remarks: I have searched some other questions about activating scripts with hashtags, but have not found something I can understand or implement into what I want to do. In particular, I need my hashtag urls to be able to implement a sequence of several actions (e.g. two clicks to get info3 in the above example).
Remark 2: I am open to other solutions too. I just need someone to explain how to accomplish what I am trying to do.

You could use this after you define your click handlers.
if (window.location.hash == '#1'){
$("#info1").click();
}
if (window.location.hash == '#2'){
$("#info1").click();
$("#info2").click();
}

Not sure if any of this works -- I didn't devote much time on it, given the state of the question, but consider:
var hash_page = (window.location.hash+'').replace(/^#/,''); // get hash and parse
var page_number = hash_page.match(/\w+?(\d+)/)[1] || 1; // get the number
var next_page = page_number + 1; // get next number
$('#info'+page_number).click(function(){
window.location.hash = 'info' + next_page;
});

Assuming that your red box is a div like this:
<div class="redbox">...</div>
and that you have three blocks within it (info 1, 2, and 3):
<div class="redbox">
<div class="info1">...</div>
<div class="info2">...</div>
<div class="info3">...</div>
</div>
With jQuery you could do something simple like this:
jQuery(".redbox").click(function()
{
if(jQuery(".redbox .info3").is(":visible"))
{
return; // all done already
}
if(jQuery(".redbox .info2").is(":visible"))
{
jQuery(".redbox .info3").show();
return;
}
jQuery(".redbox .info2").show();
});
I'm not too sure why you'd like that in the URI. The only reason for such would be in case the user comes back to that same place and you'd want them to see the page in the same state. If that is important, then yes, you should use the window.location.hash to change the URI. That way, if the user comes back you can test the hash and setup the status as required on load. However, note that the hash does not get sent to the server. It is only a client thing.
My solution supposes that info2 and info3 are already loaded. It is also possible to use the load() function to load them dynamically. It depends on their size and whether you do or do not want that information to be visible when the user does "Show Source".
There is the reason why some systems use the "hashbang" feature in their website:
https://developers.google.com/webmasters/ajax-crawling/
Google, at some point, said they would drop that functionality, but it looks like they have not done so and actually continue to encourage people to use that methodology. Twitter has been using it for a while, but from what I can see they don't use it anymore.

changing id within javascript with onClick var?

I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks

EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.

Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM

This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}

JSP reload after login

people!
I have one simple website, which has a Home.jsp and inside Home.jsp, there is an iFrame. inside the iframe, the user can choose what he wants to do. Example login. Every other page loads inside the iframe only. The Home.jsp is the iframe holder, along with the header and footer data.
After login, which i have implemented using JSP "session" i redirect to index.html(which opens inside the iframe). In the home.jsp, there is a specific place where it shows "Welcome guest" or "Welcome user_name". The main problem i am facing right now is that after login, everything works as it should, except the "Welcome user_name" doesn't update itself. If i refresh the page, since the session is preserved, it shows it correctly. Then even the logout link works and it automatically reloads into home.jsp.
at the beginning of the home.jsp page, inside my div tags which hold the topNavBarRight i have placed the following code:
<%if (session.getAttribute("fname") == null){
out.print("Welcome Guest");
}
else{
out.print("Welcome");
%>
"<%=session.getAttribute("fname") %>
Logout
<%
if(session.getAttribute("login") == "true"){ //something to reload once or whatever
session.setAttribute("login", "false"); //so that it doesnt reload again.
}%>
Hence, you can see why it works when i reload the page. Now where i am stuck is, how to get it to reload once automatically after index.html is loaded inside the iframe? in my login.jsp i have also saved an attribute called "login" as session.addAttribute("login", "true"); but it doesn't work..
I got two things: 1. Reload Loop using anything such as META, Javascript(window.loc), etc.(placed outside the body of if block)
2. Just doesn't reload, only manual reload...(placed where i have commented out in the code "reload once or whatever").
OH YEAH IF YOU DO SEND REDIRECT TO HOME.JSP(right now its sendRedirect('index.html')) FROM LOGIN.JSP, IT OPENS INSIDE THE IFRAME, is there a way to change the target of sendredirect to browser itself? that would solve it too. because the page that loads inside the iframe like this http://imageshack.com/a/img585/1177/tkyl.png
So what I'm saying is that the welcome guest should become welcome username.
I am just unable to figure this one out.. please help! :D thanks in advance.

Your biggest problem is that in Java for String == compares pointer equivalence, so it only tells you if the two Strings are pointing to the same address in memory. To test that they contain the same value, you need to use .equals():
if( "true".equals((String)session.getAttribute("login")) ){
Also session.getAttribute() returns Object, not String, so you need to type-cast to String when pulling Strings out of it.
The reason I suggest the backwards syntax "true".equals(str) rather than str.equals("true") is that if the variable str is null then str.equals("true") would throw a null pointer exception due to using the dot operator on a null instance, whereas "true".equals(str) would not throw a null pointer exception even when str is null.
As for the iframes, my suggestion would be, Don't use iframes. Learn to style DIVs with scrollbars using CSS and then populate those DIVs either with jsp:include or with Ajax.
And since index.html can't access the session since its not parsed server-side, it would be better to make it a .jsp, since you probably need to check in your index page if the user is logged in or not.

Dynamic Confirmation Message on a confirm.html

I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.

Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}

transfer information/variables from one page to another

Here is the situation I've got:
Main page, here i have 3 choices(links to the same page) witch actually are 3 types of galleries but they are all on the same page.
Gallery page, when the page is opened it loads the 1st gallery ( i load the others and hide the previously viewed from 3 other buttons which correspond to the other galleries , and i do it with javascript )
I don't really have a way of telling what choice has been made,because they all point at the same page. Since i am doing the whole gallery with javascript , is there anyway to link a variable or something from the 1st page to the 2nd ?
Or just a way of knowing what choice has been made ?
Thanks, and ask away if something is not clear enough.

Just off the top of my head...
Since no reloading. In that case, if it was me, I would either make a Javascript object that contained information on my gallery that I needed, like so:
var global_galleries = [
{
"name": "gallery_1",
"open_state": true
},
{
"name": "gallery_2",
"open_state": false
},
// -- and so on
];
then set this during your 'gallery open' event. It would make a handy way to catch user actions per gallery.
OR you could do something down and dirty to check the .style.display of your galleries themselves.