I have a html button but i am unable to change it background with Jquery.
<html>
<head><script type="text/javascript" src="jquery_2x.js"></script><script type="text/javascript" src="func_btns.js"></script> </head>
<body bgcolor='#454545'><br />
<form method="POST" action="">
<input type="button" value="Button #1" name="sname" class="btn2" /><br/><br />
<input type="button" value="Button #2" name="sclass" class="btn2"/>
</form>
</body>
</html>
and Here is func_btns.js File:
$(document).ready(function(){
$('btn2').css('background-image', 'btna.jpg');
});
Simple JS code work but this peace of code is not working, i have download latest jquery and attach to html page.
Here is the similar topic Setting background-image using jQuery CSS property
Try something like this,
$('.btn2').css('background-image', 'url("btna.jpg")');
Use a . to use class selector , that is $(".btn2")
Related
I have just downloaded jquery numeric plugin and already added jquery library too but still it's not working so if you people can take a look at my code as please :
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>
</head>
<p>How many Questions would you like to have in your form?</p>
<form action="" method="post">
<input class="positive-integer" name="questions" placeholder="Type questions number in digits as e.g 5" style="width:19%;" type="text" />
<input type="submit" name="submit" value="Submit">
</form>
It should have to work on the input as for class="positive-integer" :
<input class="positive-integer" name="questions" placeholder="Type questions number in digits as e.g 5" style="width:19%;" type="text" />
So if you people can please take a look at my code..!
Here is live link to the file as : http://www.huntedhunter.com/php-login/test/questions.php
i can't see this code on view source page add this code on page.
$(function(){
$('.positive-integer').numeric();
})
Demo
You must initialize the plugin in order to make your example work..
Include this in your page
<script type="text/javascript">
$(function() {
$(".positive-integer").numeric()
});
</script>
I am trying to make a very simple coding example work, but for an unknown reason, it is not responding.
The example I am trying to replicate is found here: http://jsfiddle.net/karim79/2hw89/1/
It is an answer to the following SO question: Toggle visibility of text box based on status of check box -jQuery
Here is my code. I have embedded another checkbox, to test if I could call a basic onclick-listener-function. It works. The other checkbox is however not reacting when clicked, even though the exact same code works in the example. Do you know why?
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(function() {
$('#other').change(function() {
alert("Hello World!");
$('#otherrace').toggle(this.checked).focus();
});
});
</script>
<script>
function test(){
alert("Test is working!");
}
</script>
</head>
<body>
<input type="checkbox" name="race" value="other" id="other">Other,
Specify
<br />
<input style="display: none;" type="text" size="25" maxlength="25"
id="otherrace" />
<br />
<input type="checkbox" onclick="test()" name="test" value="test"
id="test">testing
<br />
</body>
</html>
script element cannot have both src and body
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--or use the address as http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js-->
<script>
$(document).ready(function() {
$('#other').change(function() {
alert("Hello World!");
$('#otherrace').toggle(this.checked).focus();
});
});
</script>
Script.src
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
Also, if you are loading the page from a local files system, using a protocol like file://.... then you need to specify the http protocol in the jQuery url like <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
My HTML file:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" onClick="myFunction()" />
</form>
<div id="result"></div>
</body>
</html>
My script.js file:
function myFunction(){
$("#result").html("BUTTON WORKS");
}
I have Firebug, and whenever I click the button, Firebug throws me this error:
ReferenceError: myFunction is not defined
What am I doing wrong?
script can't be a self closing tag in HTML (it works on some browsers, depending on the doctype, but it's not correct). You must add a closing tag.
Replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
The script element pointing to your script probably isn't parsed correctly due to this error.
From the norm :
A script element must have both a start tag and an end tag.
Blockquote
Might be due to file reference issue.
It is a better practice to attach the event in the js file instead of HTML.
<form name="someForm">
<input type="button" id="btn" value="Click me" />
</form>
$('#btn').on('click', function(){
$("#result").html("BUTTON WORKS");
});
Do you open that file locally (you have file:// in address bar) or from some server (http:// protocol in address bar)? Because if you open file locally, you actually try to load jquery from address:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
which is incorrect. It happens, because you use //ajax.googleapis.com/... as adress, which refers the same protocol as currently opened page.
Either change it to:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
of upload your file to some server (or even install one locally) and test it through full http request.
I solved the problem by combining answers from #Susbanth, #MBO, and #dystroy.
Here's my new HTML file:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form name="someForm">
<input type="button" value="Click me" />
</form>
<div id="result"></div>
</body>
</html>
I added "http" to the jQuery source, closed the tag, and removed the 'onClick' from inside the HTML.
Here's the updated script.js file:
$(document).ready(function(){
$("input[type=button]").on("click",function(){
$("div#result").html("BUTTON WORK");
});
});
I made the onClick event a jQuery event.
I can't seem to trigger the click event of input file in IE and i don't know what is the problem
<input type="file" class="ruFileInput" />
<button id="clickMe" value="ClickMe" ></button>
<script type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$('input[type=file]').trigger('click');
});
});
it's working fine on firfox and chrome but not in IE9
Add the closing quotes to the class of the first input and add some text to the button to show properly
Here is a fiddle that worked
Also make sure you are grabbing the jquery files as well in your html
Just tested the below and it worked fine. You had missed the closing " at the end of class="ruFileInput
I have tested on IE9 and works fine.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#clickMe").click(function(){
$('input[type=file]').trigger('click');
});
});
</script>
</head>
<body>
<input type="file" class="ruFileInput" />
<button id="clickMe" value="ClickMe" ></button>
</body>
</html>
I am using IE Tester and this code is not working in IE5, IE7 and IE8,
Please give me a solution
<html>
<head>
<title>IE Tester</title>
<script type="text/javascript">
function functions(data){
alert(data);
}
</script>
</head>
<body>
<input type="button" value="btn1" onclick="javascript:functions('<?php echo "add_new";?>');"/>
<input type="button" value="btn2" onclick="javascript:functions('a');"/>
<input type="button" value="btn3" onclick="functions('a');"/>
</body>
</html>
I just tested the following PHP output in IE8 and it works fine. I'd say you may have found a bug in IETester. But, you might want to remove the "javascript:" part just to see if that helps. Edit: This forum might help as well, it looks like the bug has been reported before.
<html>
<head>
<title>IE Tester</title>
<script type="text/javascript">
function functions(data){
alert(data);
}
</script>
</head>
<body>
<input type="button" value="btn1" onclick="javascript:functions('add_new');"/>
<input type="button" value="btn2" onclick="javascript:functions('a');"/>
<input type="button" value="btn3" onclick="functions('a');"/>
</body>
</html
FYI... I used CodePad to generate the PHP output, then tested with jsFiddle
The javascript is correct, so if none of the buttons are working then the likely reason is that you have de-activated javascript in your browser.
Make sure you escape the quotations in the input onclick event using backslash \"
<input type="button" value="btn1" onclick="javascript:functions('<?php echo \"add_new\";?>');"/>