Develop Reference

Adding "jumpid" to HTML button with jQuery

I have spent the last few days searching for this answer with no luck at all. I am simply trying to add a tracking id to an HTML button.
Existing button
<a class="button" href="/home">This Button</a>
After "jumpid" has been added with jQuery.
<a jumpid="someValue" class="button" href="/home">This Button</a>
So far I've tried using "add", which doesn't work. I've also tried "append" and "HTML" which seems to only replace the button text for example...
<a class="button" href="/home">jumpid="someValue"</a>
I've also tried "insert before", and targeted the class.
$("jumpid=\"someValue\"").insertBefore(".button");
I wanted to also add that I am new to jQuery and if I haven't found the right documentation because I don't know the appropriate language please just let me know.

All you need to do is set the attr in jQuery, below is an example...
$(function(){
$('.button').attr('jumpid','test');
});
Example fiddle here. jQuery docs on attr is here for your reference.

onmouseover issue -- original picture completely disappears

My problem is that I'm not able to change picture based on different events, in my case, onmouseover. I'm using JavaScript and html5 standard.
Below is the affected html:
<img alt="" height="300" width="162" id="bronze" class="badges" src="bilder/Bronze160x310.png">
which is supposed to be reliant on the following piece:
<label class="block">
<input name="Radio" type="radio" id="b1" onmouseover='updatePic("pictures/hi_again.png")' onchange="enableProceed(); updatePrice();" value="2.9">
<span style="cursor:pointer">test</span>
</label>
I only have trouble with the onmouseover event. I haven't tested it thoroughly, but it seemed to work fine with onchange events.
The following is the JavaScript code:
function updatePic(newPic) {
document.getElementById("bronze").src = newPic;
}
When I run this the original picture becomes unavailable even if I have not begun any mouseover. I used a switch-system for my JavaScript before, but the same problem occured.
Thanks in advance.
JSFiddle: http://jsfiddle.net/xfkjL3as/3/

I believe I have achieved what you are attempting to do in this JSFiddle.
DEMO: http://jsfiddle.net/xfkjL3as/1/.
The HTML is as follows:
<img src="http://theunleashedreviewboard.files.wordpress.com/2013/08/angry-face.png" id="myImage">
<div>
<input type="radio" id="myRadioButton" value="100" />
<label for="myRadioButton">My Radio Button</label>
</div>
The JavaScript is as follows:
function updateImageSource(src)
{
var myImage = document.getElementById("myImage");
myImage.src = src;
}
var myRadioButton = document.getElementById("myRadioButton");
myRadioButton.addEventListener("mouseover", function(){
updateImageSource('http://www.worldpeace-uk.org/wp-content/uploads/2013/07/smiley-face.jpg');
}, false);
I have used JavaScript to attach the mouseover event to the radiobutton HTML element.
Sidenote: It is generally a better practice to separate your JavaScript code from your HTML. While HTML provides you attributes such as onmouseover to achieve this, I would recommend to keep the JavaScript code in a separate file (and link it).
This question answers how to link a separate JavaScript file.

JQuery .trigger click event not working under IE

I am using the following code to route click events on an img tag to an input radio below it. The code works perfectly on Chrome and other browsers, but on IE (specifically IE 11) I must double click to get the radio selected instead of just single click to get the radio input selected. Can someone please tell me what I am doing wrong, missing here? Thanks
<script type="text/javascript">
$(document).ready(function() {
$('#Img1').click(function() {
$('#radio1').trigger('click');
});
});
</script>
<div class="imagesPrev col four center">
<label class="label_radio images" for="radio1">
<div class="labelText">
<img id="Img1"src="image1.gif" alt="Image 1" />
<input type="radio" id="radio1" name="radio1" value="image1"/>
</div>
<div style="height:10px;"></div>
Image Title <br/>
</label>
</div>
Notes:
- I also noticed that I don't have to double click as normal double click, but it has to be two clicks. Meaning one click then I can wait for like 10-15 seconds then do the 2nd click to get the click event routed to the radio input.

http://jsfiddle.net/89wTk/
You should use .prop(); when dealing with checkbox/radio inputs.
$(document).ready(function() {
$('#Img1').click(function() {
var checkBox = $("#radio1");
checkBox.prop("checked", !checkBox.prop("checked"));
});
});

Have you tried using a label tag with a for attribute for this feature instead, this could solve your problem and be more browser compatible.
<label for="radio1"><img id="Img1"src="image1.gif" alt="Image 1" /></label>
<input type="radio" id="radio1" name="radio1" value="image1"/>
I can understand if this doesn't achieve what you need, but using this method should work using HTML markup instead of jQuery
relatively horrible jsfiddle demoing this:
http://jsfiddle.net/andyface/d25KS/

I remember that some version of IE don't support clicking objects other than links or buttons :(
Perhaps try using:
$("#radio1").checked(true);
or
$("#radio1").selected(true);
as a work around

Just simple, you don't have to use any Jquery for this, just keep everything inside the label:
<label for="radio_btn">
<img id="img"src="image1.gif" alt="Image here" />
<input type="radio" id="radio_btn" name="radio1" value="image1"/>
</label>
Working here: http://jsfiddle.net/fals/3phf4/

Your code example works fine in IE11 (desktop and metro). Is it possible that there is another click event on the page that is capturing and preventing the click event on the image? Maybe something is causing the page to lose focus (first click gets window focus second clicks the image)? Try putting an alert in the click function to see if the click is getting registered. If that's not the issue, try running the body of the function in the console to see if that is the issue. You might try other ways to trigger the event, as suggested by others. Or try the jQuery .triggerHandler("click") method.

I think your problem may be with your markup. You have your image and click events inside a label.
According to w3schools:
"...if the user clicks on the text within the element, it toggles the control."
http://www.w3schools.com/tags/tag_label.asp
That toggle is perhaps messing with your javascript. Try moving the markup outside of the label and see if that helps.

That's an easy one :).
The #img1 is encapsulated inside the
<label class="label_radio images" for="radio1">
So, without the jQuery part it's already working. Now when having the jQuery part, a single click will become a double click:
1) 'for' element of label_radio
2) the trigger in jQuery part
So, for x-browser, you should not wrap the img inside the label.
Or try to cancel the event in $('#Img1').click(function(event) { ...

You have both your img and radio wrapped in label.
HTML's default behavior is that click on label triggers radio/checkbox inside.
There are two ways you can solve your problem:
Remove javascript function altogether.
If there's additional reason for javascript, change your html markup, and move radio outside of the label. Also remove for attribute, cause it triggers radio selection. Something like this:
<div class="imagesPrev col four center">
<label class="label_radio images">
<div class="labelText">
<img id="Img1"src="image1.gif" alt="Image 1" />
</div>
</label>
<input type="radio" id="radio1" name="radio1" value="image1"/>
<div style="height:10px;"></div>
Image Title
</div>

<script type="text/javascript">
$(document).on('click','.Img1',function()
{
var checkBox = $(".radio1");
checkBox.prop("checked", !checkBox.prop("checked"));
});
</script>
<img class="Img1" src="image1.gif" alt="Image 1" />
<input type="radio" class="radio1" name="radio1" value="image1"/>

I am facing the same issue and its very weird .... the workaround that is working for me is that instead of using the trigger function .. put the code which is executed in the trigger click event in a javascript function and call that function instead of trigger event ... example is given below.
For this example i will use an alert in case of a click on the element with id radio1.
Event definition
$('#radio1').on('click',function () {
alert("Hi");
})
So Instead of using $('#radio1').trigger('click'); we can put the alert in a javascript function and call the javascript function where ever i am calling the trigger click event.
Javascript function
function triggerClick(){
alert("Hi")
}
and just call this function(triggerClick()) where ever you are using $('#radio1').trigger('click');
Please let me know if this is helpfull

Try to use .click() instead of .trigger('click'):
<script>
$(document).ready(function() {
$('#Img1').click(function() {
$('#radio1').click();
});
});
</script>
it should work, see here for more info

Issues with jquery id selector

I have this snippet of HTML:
<div class="clearfix" id="menu-file-div">
<label id="menu-file-label" for="id_menu_file">From File</label>
<div class="input">
<div id="file-upload">
<input type="hidden" name="menu_file" id="id_menu_file" />
<script type="text/javascript">var field_id = "id_menu_file";</script>
<script type="text/javascript">var append_to_element_id = "menu-upload";</script>
<script type="text/javascript">var loader_element_id = "newmenu-modal";</script>
<noscript>
<p>Please enable JavaScipt to upload a file.</p>
</noscript>
</div>
</div>
</div>
In my console, when I try to use the jquery id selector, it fails to return the input element:
> $("#id_menu_file")
[]
Any thoughts on why this is so? I feel like I'm missing something simple. Thank you!
EDIT - some other javascript was removing the element, that is why it's not showing up. Thanks all for your help.

To repeat my first answer (which may be applicable to others reading this post later, and which was deleted despite the fact that it "fundamentally answer[ed] the question"):
Is this HTML inside of a frame (iframe or regular)? That could make it difficult for jQuery to find your element, unless you give it the right context.
To add a context to a jQuery selector you just provide that context as an extra argument, for example: $('TD', aFrameElement);
If the element in question is not inside a frame (which is the case for zallarak), the problem is almost certainly a timing issue: the jQuery selection is happening before the element has gotten loaded on the page. You can test this theory by adding the following code (anywhere):
$(function(){
console.log($("#id_menu_file"))
});
If that is the problem, simply wrap your code in $(function(){ to fix matters.

try :
$("#id_menu_file").get(0)
$(selector) return arrays

javascript noob... document write

I'm trying to use Javascript to load more links in my nav bar.
This is what I tried; I just wanted one link in my nav to load more beneath it.
<a href="" onclick="show()"/>collections</a>
<script type="text/javascript">
function show() {
document.write("collection 1 <br /> collection 2 <br /> etc... <br />");
}
</script>
Can anybody suggest a relevant tutorial or give me a hint?

document.write should really only be used while the document is loading. Calling it after the document is loaded will clear the current document and write some new content. To add new content to the page, you would need to create new DOM objects and add them to the page or modify existing DOM objects.
Here's a small example of modifying the page you can see in action here: http://jsfiddle.net/jfriend00/zVS39/
HTML:
collections
<span id="moreText"></span>
Javascript:
function show() {
var o = document.getElementById("moreText");
o.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
}

You can use innerHTML, or if you want to something more complex you could append a new element, for example:
HTML
collections
<div id="hidden"></div>
Javascript
function show() {
var hidden= document.getElementById("hidden"),
newElem = document.createElement("div");
newElem.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
newElem.style.color = "red";
hidden.appendChild(newElem);
}

See Creating and modifying HTML from the WSC

You didn't tell us what your problem is.
But this is wrong:
<a href="" onclick="show()"/>collections</a>
You have made your a self-closing, so "collections" isn't part of the link and </a> is orphaned/invalid. Thus your function isn't going to fire when you click on "collections".
Write:
collections

you can always use the innerHTML feature.
document.getElementById('someelement').innerHTML = "collection 1</br>collection2 ...";
So your HTML would look like:
<div id = "nav"></div>
<div id = "someelement></div>
So that text you wanna insert underneath your navigation will pop up in "somelement". You can also modify the css to do a show/hide type technique.