JQuery - after() function with quotes - javascript

I need to add some HTML after a radio-button, I want to add an image and function so I check the radio button when I click on it. I would check the radio button with my own selectRadioButton() function.
The existing code is, I can't edit this part:
<span class="ms-RadioText">
<input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" />
</span>
My idea, to add my image with function, was to do it like this:
$("#idFirstRadioButton").after("Image 1:<br/><img src=\"http://urltoimage/image.jpg\" border=\"0\"/>");
But when I use this code, the HTML of my page is this:
<span class="ms-RadioText">
<input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" /> Image 1:<br/><IMG src="http://urltoimage/image.jpg" border=0>
</span>
He's adding "shape="" idFirstRadioButton?)?="""
The correct code should be:
<span class="ms-RadioText">
<input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" /> Image 1:<br/><a href="javascript:selectRadioButton("idFirstRadioButton")><IMG src="http://urltoimage/image.jpg" border=0></a>
</span>
I already tried with ', with \", combination of both, with a variable, ...
$("#idFirstRadioButton").after("Image 1:<br/><img src=\"http://urltoimage/image.jpg\" border=\"0\"/>");
$("#idFirstRadioButton").after('Image 1:<br/><img src="http://urltoimage/image.jpg" border="0"/>');
$("#idFirstRadioButton").after('Image 1:<br/><img src="http://urltoimage/image.jpg" border="0"/>');
What am I doing wrong or what is the code that I should use?

You should use different quotes inside your .after string, because they will be required. For example:
$("#idFirstRadioButton").after("Image 1:<br/><img src=\"http://urltoimage/image.jpg\" border=\"0\"/>");
This is the result:
<img src="http://urltoimage/image.jpg" border="0">
However, this is only if you have no other option. As #CBroe mentioned, you should try not to bind event handlers inside appended html, but try to handle them using proper way.
Example #Dan O provided seems to be something you should be looking for.

what you're doing wrong is using strings of HTML instead of constructing and appending Elements themselves, which (in addition to potential security concerns) can lead to the sort of confusing and annoying behavior you're seeing here. You want something like this:
var myImg = $("<img/>");
myImg.attr("src", "http://urltoimage/image.jpg");
myImg.on("click", function(e) {
selectRadioButton("idFirstRadioButton");
});
$("#idFirstRadioButton").after(myImg);

When you have more than 1 level deep of " or ' you need to intercalate them or escape them.
The last one should be right, except you kept using " inside instead of escaping them or alternating them.
The correct should be:
$("#idFirstRadioButton").after('Image 1:<br/><img src="http://urltoimage/image.jpg" border="0"/>');
So we start with single quote for the after, then double quote for the href, then we escape a single quote for the inside of the selectRadioButton, then a single quote to exit the string and dump the var, then back inside the string and keep going on.
Fiddle
NOTE: Remember to declare your var "VARidFirstRadioButton" that's the
shape of error.

Related

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

JQuery: Append/After difficulties

I have a simple input line and want to append whatever has been entered each time somebody pushes the OK button. Sounds simple so far, still I am unable to get it working
HTML:
<p>
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<p id="status">Ok</p>
<br>
JQuery:
$(document).ready(function(){
$('#status').on('click', function(){
var input = $('input[name=todo]').val();
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').after('#status');
});
});
I also tried my luck with append or appendTo, but both times unsuccessfully.
Just in case here is the JSFiddle: http://jsfiddle.net/NRWzE/
.after() works, but you need to set it up correctly, according to documentation it should be:
.after( content [, content ] )
So the right way is:
$("#status").after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
Try use jquery insertAfter:
$(document).ready(function () {
$('#status').on('click', function () {
var input = $('input[name=todo]').val();
$('<br><b id="taskz">' + input + '</b> - <b id="statusz">Ok</b>').insertAfter('#status');
});
});
It looks like you meant to use:
$('#status').after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
(see after docs)
or, alternatively insertAfter:
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').insertAfter('#status');
Try this:
$('#status').click(function(){
var input = $('input[name=todo]').val();
$('#status').append('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
});
There are a few things going on, but the big thing is that you need to research more how after, append and appendTo work. Here's the basic syntax difference in the methods that share a name but one has To on the end:
Newcontent.appendTo(existingElement) returns newElements.
existingElement.append(newContent) returns existingElement.
Additionally, after puts the new element as a sibling of the reference element, whereas append puts the new element as a child. This is an important difference.
So, try this script then:
var taskid = 1;
$('#valueform').on('submit', function(){
var input = $('#todo').val();
$('<br><span id="task' + taskid.toString() + '">' + input
+ '</span> - <span id="status' + taskid.toString()
+ '">Ok</span>').appendTo('#status');
taskid += 1;
$('#todo').focus().select();
return false;
});
$('#todo').focus().select();
See a Live Demo at JSFiddle
Here's the supporting HTML:
<form id="valueform">
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<input type="submit" value="OK" id="okbutton">
</form>
<p id="status"></p>
There are some other concerns:
I recommend you study which HTML elements are allowed within which HTML elements.
Instead of putting a <b> tag on each item, use CSS. Additionally, if there is semantic importance for the bolding, then use <strong> instead. <b> also should probably not take an id because it is a presentation tag, not a content tag. When thinking of presentation vs. semantics, one must consider screen readers or browsers that cannot render bold text--in that case, <strong> will allow them to emphasize the text in another way if needed.
Get familiar with the jQuery documentation. Careful reading of what exactly each function does, the object it works on, the parameters expected, and the values returned will enable you to get past barriers in the future without having to ask here.
It looked to me like you wanted to put the new content inside of the #status paragraph, not after it. So I wrote my script that way. If you put it after the way you wrote it, then the most recent status will be on top--but then you have non block-level content (starting with your <br>) outside of any block-level element. So you should be appending <p> elements, or you should put your content inside the existing <p>.
Note: I added a form and made the button type submit instead of button to get easy Enter-key handling. It doesn't have to be this way.

Check All Radio Buttons (JSF Component) + jQuery

I've a form in which I'm iterating a datatable, each row has a set of components and one of them is:
<h:selectOneRadio id="chargeWaive" onclick="alert(this.id);" > <f:selectItem itemLabel="Charge" itemValue="charge" /> <f:selectItem itemLabel="Waive" itemValue="waive" />
</h:selectOneRadio>
I've added two links that triggers two similar functions :
<a href="#" onclick="selectAllCharge();">
<h:outputText value="Charge All" />
</a>
<a href="#" onclick="selectAllWaive();">
<h:outputText value="Waive All" />
</a>
So when the user clicks on one these links, all the Charge/Waive radiobuttons should be checked.
I've tried to check the first radio button (test purpose) by using one the following codes, but I always get the same error:
$('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', true); $('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', 'checked');
$('#frmResults:billingRecordId:0:chargeWaive:0').prop("checked", true);
The error that I'm getting is: Sintax error, unrecognized expression: billingRecordId
I do know the id is correct because when I look into the compiled JSF code the generated ID for the radio type is:
<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:0" value="charge" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:0"> Charge</label>
<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:1" value="waive" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:1"> Waive</label>
So at this point I don't know what I'm missing here. Any idea?
jQuery uses CSS selectors to select elements in the HTML DOM tree.
The : is a special character in the CSS selector representing the start of structural pseudo class. So if you use
$('#frmResults:billingRecordId')
then it's basically looking for a HTML element with ID of frmResults and having a pseudo class matching billingRecordId. However, as billingRecordId is not a valid pseudo class at all, nothing will be found.
You'd basically need to escape the colon in CSS selector syntax.
$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0')
Or, IMO cleaner, use the [id] attribute selector.
$('[id="frmResults:billingRecordId:0:chargeWaive:0"]')
Or, to get rid of the chained IDs and indexes.
$('[id$=":chargeWaive"]:first :radio:first')
("select elements with ID ending on :chargeWaive, get the first, then get the first radio button from it")
See also:
How to select JSF components using jQuery?
As a completely different alternative, you can also perform a JSF ajax call to preselect the desired radiobuttons by just setting the model value accordingly in the backing bean's ajax listener method.
Colons can cause problems within jquery selectors. Try escaping them with a double backslash ala:
$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0').attr('checked', true);
Did you try this way
Also use .prop() instead of .attr()
$('[id^="frmResults:billingRecordId:0:chargeWaive:"]').prop("checked", true);

Execute any script in double quotes

how can i run any javascript in double quotes ?
For example:
<input type="text" value="" />
i would like to execute an alert or any other code in the value = "" (double quotes). Like:
<input type="text" value="<script> onmouseover=alert(0);</script>" />
the code show as a string on page. So is there anyway to execute script in double quotes ?
Ah, I see, you probably want to do something like this:
<input type="text" onchange="try{eval(this.value)}catch(e){}" />
That inline script will attempt to execute what's in its value attribute every time the tag is changed (and you blur out of the element). The try catch block is so that anything that would normally not work won't get executed. The eval function parses a string and runs it as Javascript code.
You leave yourself open to many forms of attacks when you use eval, so unless this is for purely educational or in house purposes, I would advise you don't use this.
The input object has its own events and you have to assign to them
For example to execute an alert when the mouse hovers over it:
<input type="text" value="testbox" onMouseOver="alert('testing');"/>
<input type="text" onmouseover="alert(0);" />

Dynamically add <div> inside <input>

I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.
input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.
A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.
You can't add div inside of input element (unless you want it in input's value).
No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.
Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.

Categories

Resources