How to make jquery click() work with css button? - javascript

I have a .button made in css and added to the html 4 times like this
<a class="button icon Call" id="nupp2" href="#"><span>CALL</span></a>
and a .js with the following inside
$(document).ready(function(){
$("nupp2").click(function(){
var name=prompt("Please enter your name","blabla");
});
});
The buttons appear if I open the html with firefox and they change if I hover over them
But if I press the button, it doesn't do anything. I didn't forget to point to the files in the html file.
Am I even doing this right? Or is jquery more complex than I think?

Selectors in jQuery work a lot like the ones in CSS. $("nupp2") becomes $("#nupp2"), see?

This is wrong:
$("nupp2").click(function(){
The correct is:
$("#nupp2").click(function(){
The string inside the parens is a jQuery selector. Since you want to select an element by id, the proper selector is a hash sign followed by the id.

you need to add a hash sign (#) before the ID of the element - $('#npp')

You missed the hash on your selector:
$("#nupp2").click(function(){ // <----- #nupp2
var name=prompt("Please enter your name","blabla");
});

To call an ID you need to add a # in front of the selector (Like CSS)
So your jQuery selector should be $("#nupp2")

Just try this
$(document).ready(function(){
$("#nupp2").click(function(){
var name=prompt("Please enter your name","blabla");
});

Try this:
$(document).ready(function(){
$(a#nupp).click(function(){
var name=prompt("Please enter your name","blabla");
});
});

Related

jQuery .insertAfter not working, trying to move element in DOM

I have tried the following jQuery code to move a <select> element (that I can only see within the DOM) after a <form> element but it does not work:
<script type="text/javascript">
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change]');
</script>
I have also tried:
<script type="text/javascript">
jQuery('select[id^=lc_currency]').insertAfter('form[id^=lc_change]');
</script>
Any coding suggestions? I am using a wildcard selector because on every page the ID changes, 1c_currency1, 1c_currency2, etc.
Live site is at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
I want to move specifically a select dropdown box, from one place to another on a webpage. Unfortunately the element code is only located in the DOM.
This select dropdown box is located at the bottom of the page at http://thehungrygeek.com/2015/11/17/australia-dairy-company/
The code, only located in the DOM, is as follows:
<select style="width:200px" name="lc_currency1" id="lc_currency1" onchange="localCurrencyChange('SGD',lcValues1,1)">...</select>
The select dropdown box is supposed to be moved here:
The relevant code at the area is as follows:
<form name="lc_change1" id="lc_change1" action="http://thehungrygeek.com/2015/11/17/australia-dairy-company/" method="post">
Show currencies in
<noscript>[Please enable JavaScript to change the currency used on this page]</noscript>
<br>
<small>Powered by LocalCurrency. Rates from Yahoo! Finance</small>
</form>
Thanks for any help!
1st: Be sure you include jquery
2nd: Wrap your code in
$(document).ready(function(){
// your code here
});
3rd: Try to use .each()
$(document).ready(function(){
jQuery('select[id^=lc_currency]').each(function(){
var getformId = $(this).attr('id').replace('currency','change');
//alert(getformId);
$(this).insertAfter('form#'+ getformId);
});
});
Working Demo
I guess your id strings should be inside quote , Try this
$(function(){
jQuery("select[id^='lc_currency']").insertAfter("form[id^='lc_change']");
});
Edit:
Try to move the select element after 1 sec after window load. this might works for you as your select element coming from javascript code.
$(window).load(function(){
setTimeout(function(){
jQuery("form[id^='lc_change']").prepend( "select[id^='lc_currency']");
},1000);
});
From the screenshots you added, it seems like you want to insert the select inside the form, not after, this is what I used:
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change] noscript');

Make TextArea Disabled in JS

I want to make Textarea Disable (Grayed out) in my JS Method
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
}
The above code is not working for this.
You should use prop instead of attr:
$('input[id$="txtareaID"]').prop('disabled', true);
jQuery docs
If your selector is correct, than you need only to change attr to prop:
function myfun(status){
if(status === 'Yes'){ // more suitable for comparing
$('input[id$="txtareaID"]').prop('disabled',true);
}
}
Related post:
Disable/enable an input with jQuery?
Considering textarea as
<textarea id='txt'>Something</textarea>
Using jQuery, you can achieve like this
$("#txt").attr('disabled', true);
Using plain javascript
document.getElementById("txt").disabled=true;
Your problem is with CSS not JS. As far I can tell your code is working, but there's no way of changing this specific style. You could try workarounds: Change Font Color For Disabled Input
<textarea> is what you should be looking for not the <input> tag with id = textareaid.
$('input[id$="txtareaID"]').attr('disabled','disabled');
change the above code to the below one and see the magic by clicking the link at the bottom.
$('textarea[id$="txtareaID"]').attr('disabled','disabled');
http://jsfiddle.net/5s9ge7d6/1/
none of the below answers worked.
Then I found something amazing trick which solved my problem ---
Here it is --- JUST REMOVE "input" word from that line in if block -
WORKED CODE :
function myfun(status){
if(status=='Yes'){
$('[id$="txtareaID"]').attr('disabled','disabled');
}
Previous CODE :
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
$('input[id$="txtareaID"]').prop('disabled',true); //Didn't worked either
}

Get a value from an attribute and add it as another attribute?

How can I use jQuery to get a string of text from the onclick attribute and set it as the href attribute.
Here's the fiddle I'm working with: http://jsfiddle.net/MBmt5/
I want to take only TrackPackage.asp?track=95213&ship=OTHER&ShippingMethod=3 from the onclick attribute and prop it to an href attribute
So that it would end up looking like this: http://jsfiddle.net/52Nha/
Unfortunately, I have no idea how to accomplish this. Can anybody help me? Must be compatible with jQuery 1.4.2. Thanks.
Update
Of course I'd begin with:
$(document).ready(function(){
$('span.trackpackagebutton').closest('a').removeAttr('href');
});
​
Ugly but I hope this will help you.
$('a').attr('href',
$('a')[0].getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
Working demo - http://jsfiddle.net/MBmt5/5/
Note: Based on your markup structure you can use the right selector and reuse the above code.
E.g: The below code will execute this logic for all the anchors on the page which have onclick attribute which has window.open.
$('a[onclick^="window.open"]').each(function(){
$(this).attr('href',
this.getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
});
Here's one way:
http://jsfiddle.net/MBmt5/2/
http://jsfiddle.net/GaZGv/1
var $a = $('span.trackpackagebutton').closest('a');
var href = $a.attr('onclick').split('(')[1].split(',')[0].replace(/'/g, '');
$a.attr('href', href).removeAttr('onclick');
alert(href)​

Adding new line in jQuery tooltip plugin

I am now using jQuery tooltip plugin to create some quick reminders for users during data input. Here is the jQuery tooltip I am using:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I have encountered a problem.
How can I add a new line in the body of the tooltip?
I have tried the following codes, but still cannot get it done.
?
?
So could anyone help me on this issue?
Thanks~
I think
<br/>
should do the trick.
For example:
?
Do you mean a line break? I'd recommend using a CSS rule to add a margin to the anchor tag. Else insert some <br />'s between the 2 a tags.
You could "encode" your line breaks and use the bodyHandler attribute, like:
The documentation shows examples of linking to a #id in the href, which will display the content of that #id. So place a element with your and #id somewhere on your page, and specifiy that as the tooltip, like:
<a id="yourLink" href="Hello#world">Some text</a>
$("#yourLink").tooltip({
bodyHandler: function() {
var href_value = $(this).attr("href");
return href_value.replace("#","<br/>");
}
});
I'm using it this way (jQuery 1.9 and standard tooltip function):
$(".myClass").tooltip({
content: function() {
return $(this).attr('title');
}
})
And then in the title you can use HTML
Example:
<span title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>
You can't just paste the HTML as string, as other people said you have to use content.

Links in javascript

I have some dynamically created links in my pages and what I need to do is when I click on the link, I should pass the name of the link to another page. So, please show me a way to accomplish this. Thanx in advance :)
If you are using jquery, you can use :
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
foo bar
<script>
$('a').click(function () { alert($(this).text()); /* attr('href') */ });
</script>
</html>
Of course the html an so are not good, but the click thing is what you need.
Then you could use ajax, or a parameter in the target URL to give the link to the other page.
But why don't you generate that when creating links?
I mean add a href="mylink?from=mylink".
Edit: corrected with your comment. What you need is text() rather than attr('href').
document.getElementById('anchor').innerHTML;
then you can pass this value as a parameter, to another page.
documetn.getElementById("mylink").setAttribute("href", "newlink");
documetn.getElementById("mylink").InnerHTML = "new link name";
var link = document.getElementById('link');
link.setAttribute("href", link.getAttribute("href") + "?linkName=" + encodeURI(link.innerHTML));
This will make your link be something like this:
<a id="link" href="http://somewebsite.com?linkName=Name_of_the_link">Name_of_the_link</a>
Then on the "other" page you can access the link name through the GET variable linkName.

Categories