changing id within javascript with onClick var? - javascript

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'));
});
}

Related

JQuery, Creating form inputs via button not working with form list

so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue
alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.

Storing JQuery string values in localStorage

So I'm webmastering this page full of ebulletins and ppl are asking options to sort different bulletins by their importance. So I created this nice little JQuery thingy:
$(document).ready(function() {
$("#show_all").click(function() {
localStorage.setItem("show","all");
$("div#tiedotteet_infonet div").css("display","block");
});
});
So the div element which display value I'm changing is none in css and I'm using JQuery to switch it to block but I also wan't to store this click into localStorage to key-value-pair "show" and "all", so I can make code to check which is the users preference when she comes back to the page. The button and similarly constructed buttons work fine in the way that they are showing or hiding the div elements (and the bulletins inside them) when the user is clicking different buttons. But the code won't store anything to localStorage according to Chrome. I'm obviously doing something wrong here. What that might be?

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
}

After button clicked, change to different page and show hidden content

I have some "Learn More" links on my Home page, all of which correspond to different sections of content that is on the More Info page. These different sections of content are all hidden using display: none.
What I'm wondering is if there's a way to make it so that when I click a particular "Learn More" link, the user will be sent to the More Info page, and the section of content corresponding to the Learn More link they clicked will be shown.
I can't think of a way to achieve this, but I'm hoping it will be possible, perhaps using JavaScript.
EDIT:
The code I currently have is nothing special. Four <a> links on the Home page, then on the More Info page, four divs that are all initially hidden using display: none.
The solution ended up being fairly simple, I did what is described in the top answer of this question: Getting URL hash location, and using it in jQuery
Learn more
<script>
function showContent(id) {
$("#"+id).show();
}
</script>
I think it is possible.You can take the information on a div,and then you click "Learn more",show the div.
In this way,you even needn't a hyperlink,just a click event,like the code upstairs.Of course,this div was hidden before.
One way you can achieve this would be to add a hash to that link with the id of the section you want to show, like this: Learn More. Then just check for it in window.location.hash on the /moreinfo page and show the div.
You have to do it this way: try to use named anchors.
first:
Learn More
when use clicks this link user will navigate to particular page with different sections.
second:
on this page suppose you want to show the 3rd section:
.....
<a name='section-3'></a>
<h1>Your section-3</h1>
In your case divs are hidden then use js or jQuery for this:
As you will get a hash in the location url then use .substr()' and.indexOf()` javascript methods.
try to put this script on those page where you are having your hidden divs
$(function(){
var url = window.location.href;
var obj = url.substr(url.indexOf('#'));
$(obj).show();
});

how to invoke Clearbox3 gallery of photos from javascript?

I have a webpage that has a list of anchors on it which use clearbox3 to display them as a gallery. Only the first anchor has a textual link to click "View Photos (3)". The others are just to get the images into the clearbox gallery. And that works fine. What I need is a way to bring up the clearbox image gallery from the user click of another control. I'm currenting trying to do it from an asp.net ImageButton control (maps to input tag), but have also tried to just use an anchor too without luck.
The anchors for the clearbox image gallery look like this:
<a id="photoLink" href="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" rel="clearbox[gallery=929 Border Ave, Del Mar, California, 92014,,tnhrf=http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg]">View Photos (6)</a>
My "other" control (currently an asp.net ImageButton --> maps to a an input control looks like this:
<input type="image" name="ctl00$ContentPlaceHolderCol2$mainPropertyPhoto" id="ctl00_ContentPlaceHolderCol2_mainPropertyPhoto" src="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" />
And finally, here the javascript I tried invoking from onClick attribute in ImageButton/Input control that didn't work with clearbox (and is not cross browser supported anyway):
<script type="text/javascript">
function clickPhotoLink()
{
document.getElementById("photoLink").click();
}
</script>
My question is this: how do I bring up the clearbox gallery I setup using the list of anchors above from another control such as an input control? I already tried using the onClick attribute (same as onClientClick property for asp.net) on the input to run a script, but had no luck there either invoking a .click() on the the first anchor in the list, nor was I able to rebuild another gallery exactly the same using the "CB_Open('href=mycontent,,parameter2=value 2,,parameter3=value 3,, ... ');" syntax defined on the clearbox page. The .click() won't work since it a) its not consistent across browsers, but b) more so because it's not actually the same as the user clicking the link. Also, using the CB_Open script to rebuild a duplicate gallery didn't seem like a very ideal option (nor could I get it to work) and the .click() just doesn't work with clearbox likely since its not actually the same as a user click.
So, I could change the ImageButton (input control) to be an anchor instead and set the href to the first in the gallery I'm displaying; and then set the other list of anchors to start with image #2 in the list. However, when the user clicks the textual link "View Photos (3)" it will bring up clearbox on the index of the 2nd photo and not the first. So that works, but isn't an ideal solution either since I need it to come up and show the 1st photo (from both places) which wouldn't make sense for clearbox since the href of the anchor points to image 2 and not 1.
Basically, I am wondering if there is a way to bring up my already defined/created clearbox gallery associted with the list of defined anchors on page from another control (possibly even another anchor, but without images from gallery to avoid duplication and/or issue outlined above)?
Any help is greatly appreciated.
stackoverflow answer:
Solved. Instead of using an input control to initiate the click from, I switched it to an anchor control (with an image inside) and set the href attribute to execute the script directly instead of messing with the "onclick" and "rel" (used by clearbox) attributes to bring up the clearbox image gallery.
The resulting html is this:
<img src="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" class="mainPhotoImage" />
My asp.net code behind is this:
HtmlAnchor mainPhotoAnchor = new HtmlAnchor();
mainPhotoAnchor.InnerHtml = "<img src=\"" + arrPhotoUrls[0] + "\" class=\"mainPhotoImage\" />";
mainPhotoAnchor.HRef = "javascript:CB_Open('gallery=" + displayAddress + ",,href=" + arrPhotoUrls[0] + "');";

Categories

Resources