Jquery add class to existing item on page - javascript

This is my code: http://jsfiddle.net/47apf/12/
Very simply, I'm trying to hide the button for those users who have javascript enabled. I am using this code:
$(function() {
$('.trigger').addClass.attr('hidden');
$('#candidate_filter').change(function() {
this.submit();
});
});
I am new to jquery, is there any reason why this isn't working? It says in the log "undefined is not a function".

Use,
$('.trigger').addClass('hidden');
You are not utilizing the syntax properly. Read here to know more about .addClass()
DEMO

Related

Something wrong when I use jquery .click function in wordpress

I am trying to change they way my cart shows. Today it is using css3 to show on hover.
I need it to display onclick I've tried a lot of different suggestions here on Stackoverflow but it still doesn't work. I am a amateur and hope that someone can help me understand why it is not working!
When I add display: table; to .box-dropdown it shows it the way i want it but I can't get it to do that! :(
It works perfectly on JSFiddle when i remove other elements around it. JSFiddle: http://jsfiddle.net/ggoe8v6k/
The website is http://swemed.se
I tried :
$(".top_cart_a").click(function () {
$('.box-dropdown.cart').css("display", "table");
});
And :
$(".top_cart_a").live('click',function() {
$('.box-dropdown.cart').css("display", "table");
});
Try wrapping javascript in a self invoking function. jQuery as an argument and $ as a variable:
(function($) {
$(document).ready(function(){
$(".top_cart_a").click(function () {
$('.box-dropdown.cart').css("display", "table");
});
});
}(jQuery));
In your JSFiddle, you forgot to include JQuery library, resulting in a Uncaught ReferenceError: $ is not defined error.

Have simple wordpress jquery script not working

Ok so i have a simple jquery script im trying to load into wordpress i have other scripts already working but for some reason this one is not working. I have it working just on a simple html page but right when i put in wordpress.
Could someone help me and let me know why i keep getting unknown syntax error
jQuery(document).ready(function ($) {
jQuery(".comb-7").hover(function () {
$(this).find('.background-hover').toggle();
}
});
thanks for any help
This cant Work, you're missing the cloosing the bracket for the hover method
You don't close the hover method. Should be:
jQuery(document).ready(function($) {
$(".comb-7").hover(
function () { $(this).find('.background-hover').toggle(); });
});

jQuery On Not working for simple script

There must be some mental block that I'm just not getting...My entire site is working fine, but dynamically created links with an ID are not. Something is wrong in my code...it's as simple as this but it's not working, please show me my dumb mistake (I know it's something simple).
so for example this would be a generated link:
Hi
and then I have this script:
$(document).ready(function() {
$(document).on('click','#himan',function(){
alert('hi');
});
});
but nothing happens, and I get no errors...I'm lost, maybe my coffee is not working today. Can someone help me?
Here is demo
It is working perfect:
$(document).ready(function () {
$(document).on('click', '#himan', function () {
alert('hi');
});
});
reason might be duplicate of id, there must only one element with specific id because id is a unique on a page, if you adding multiple element use class instead of id.
Handle the click event on #himan itself...
function initializeDynamicLinks() {
$('#himan').on('click',function(){
alert('hi');
});
}
$(document).ready(function() {
initializeDynamicLinks()
});
Here you see it working: http://jsfiddle.net/digitalextremist/emUWL/
Rerun initializeDynamicLinks() whenever you add links dynamically.
And... as has been pointed out several times in comments, you need to make sure #himan only occurs once in your source to be completely sure everything will function properly.

Dropdownlist change event not working in IE9

I have this piece of code, that just refuses to co-operate, I've tried to look over the syntax, tried .change, .click events, nothing works, I am trying to alert the user, if the function works, nothing.
Heres the Javascript code:
$('#ProductNamesList').change(function () {
alert('JQuery works!');
});
And the HTMLHelper that generates the drop down list
#Html.DropDownList("ProductNamesList", New SelectList(Model.ProductList))
Can someone please help? I can't test it in other browsers, due to our requirements here -.-
For the record, I am using jquery-1.6.4.js and jquery-ui-1.8.16.js
Try this
$(document).ready(function() {
$('#ProductNamesList').live('change', function (event) {
alert('JQuery works!');
});
});
Looking at your live demo, it seems the problem is with the use of name="#sel". The correct notation is id="sel".
If you insist on use of name attribute, use jQuery selector [name="sel"]. Also note that the hash sign is redundant in attribute value.
I don't see anything wrong with it, the following worked for me in Firefox and IE8 (don't have IE9 available here).
#Html.DropDownList("ProductNamesList", new SelectList(Model.ProductList))
<script type="text/javascript">
$('#ProductNamesList').change(function () {
alert('JQuery works!');
});
</script>
Is the masterpage hooked up properly, and the reference to jquery correct?
I have tried the following code and it works.
<form action="">
<select id="sel">
<option>AUDI</option>
<option>Axel</option>
<option>BCS</option>
<option>BIBO</option>
</select>
</form>
<p id=result>
And the javascript:
$(document).ready(function() {
$("#sel").change(function () {
alert("JQuery works!");
});
});
When I try it at your live demo, I am getting error $ is not defined. I have created a jsfiddle which also works fine.
http://jsfiddle.net/rtFUs/
So all you have to do is to make sure that you are adding jquery correctly and the id of the select box is "mySelectBoxId" and you reference it using #, for example $("#mySelectBoxId"), that's it.

I want to have a overlay using css but it's not working

I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/

Categories

Resources