This question already has answers here:
Why is this jQuery click function not working?
(9 answers)
Closed 5 years ago.
Here is the sample of code that I've concentrating on. I've tried to incorporate it with my test site and the code doesn't work. I don't understand why, in both instances I'm using the latest version of Jquery (1.5) I'm using Google's hosted Api for my test site.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$('#name-label').dblclick(function() {
$("#name").val('some text');
});
</script>
<div class="ctrlHolder">
<label for="" id="name-label">Name</label>
<input name="name" id="name" type="text" class="textInput small" />
<p class="formHint">The name of the item you are submitting</p>
</div>
Does wrapping it in a $(document).ready(function() {}); work?
$(document).ready(function() {
$('#name-label').dblclick(function(){
$("#name").val('some text');
});
});
$(function() {
$('#name-label').dblclick(function(){
$("#name").val('some text');
});
}
Related
This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 2 years ago.
This is a Django (python) developer trying to do some frontend stuff for the first time.
Frontend script
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
function dropdownFunc(val){
console.log(val.includes("NoneOfThese_"))
if (val.includes("NoneOfThese_")) {
$("#dropdown-list_" + val).show();
}
else {
$("#dropdown-list_" + val).hide();
}
}
</script>
dropdown-list div:
<div id = "dropdown-list_{{phone_array.count}}" class="jumbotron" style="display:none">
<form method="POST" action="{% url 'insertPhoneDetails' %}">
<label for="brandName">Brand name:</label><br>
<input type="text" id="brandName" name="brandName"><br>
<label for="mobileName">Mobile name:</label><br>
<input type="text" id="mobileName" name="mobileName"><br>
</form>
</div>
Error on line 32: <input type="radio" name="options" value="{{key}}" id="dropdown" onclick="dropdownFunc(value)" required> {{value}} <br><br>
Error:
Uncaught ReferenceError: dropdownFunc is not defined
at HTMLInputElement.onclick ((index):32)
How to tackle this?
You can't have a single script tag that both has a src and contains inline text. Separate them out into two separate script tags instead:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function dropdownFunc(val){
// ...
</script>
But you also aren't passing the value to dropdownFunc correctly, and you should also consider avoiding inline handlers, since they have horrible scoping rules and escaping issues. Attach the event listener properly using JavaScript instead, eg:
$('#dropdown').on('click', e => dropdownFunc(e.target.value));
This question already has answers here:
Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone?
(4 answers)
Closed 4 years ago.
Let's say I have a div like this:
<div class="box-body">
Hide</br>
<div id="message">
<p>password: <input type="password" name="blog_pass"></p>
</div>
</div>
Basically what I want to do is to hide the div message when I click on the hideshow link and show it again when I click on this link again.
So I added a script at the end of my page in order to do this:
$('#hideshow').toggle(function(){
$('#hideshow').text('Show');
$('#message').hide();
}, function(){
$('#hideshow').text('Hide');
$('#message').show();
});
But now the problem is it does not even work out. I mean no error appears on console and even the link Hide is not showing somehow.
So what is your idea about this... How can I fix this?
You can use a class say, hidePwd to toggle it for hide/show operation:
$('#hideshow').click(function(){
var newText = $('#hideshow').text().trim() === 'Hide'? 'Show':'Hide';
$('#hideshow').text(newText);
$('#message').toggle('hidePwd');
});
.hidePwd{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
Hide<br>
<div id="message">
<p>password: <input type="password" name="blog_pass"></p>
</div>
</div>
This question already has answers here:
Why this JSFiddle does not work [duplicate]
(1 answer)
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 5 years ago.
ive used a basic example from w3schools.com to get here:
https://jsfiddle.net/02wu0v49/
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "aaaaaa";
document.getElementById("fname").value = "bbbbb";
alert("lala3");
}
<body>
<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<p>My name is: <span id="demo"></span></p>
</body>
somehow the w3schools version works but it wont do anything on jsfiddle?
and it would be really nice to use [code][/code] or something to format code on stackoverflow...all those indents are terrible.
Change load type to No wrap in - <body>
Here is updated fiddle
Here is Docs
If you open the browser console in JS fiddle it lists the error. The HTML can't find the JS.
This question already has an answer here:
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 8 years ago.
Why is the fiddle not printing in console:
HTML:
<input id="clickMe" type="button" value="clickme" onclick="validateEmail();" />
JavaScript
function validateEmail() {
console.log("ABC\n");
}
http://jsfiddle.net/amandeepautam/HKhw8/539/
Reference: Print Var in JsFiddle
Looks like there's an error in the script: "Uncaught ReferenceError: $ is not defined"
Seems you need to reference JQuery (its in "Frameworks & Extensions" dropdown)
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I want to use .on on dynamically created elements... Although its not working, and yes I am using a selector :)
$(".metadata").on("click", "i.icon-remove", function () {
console.log("what");
$(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});
This works perfectly for existing content, but not for anything thats dynamically created. Both initial and dynamic content use the exact same creation method so I know their signatures are the same, any ideas?
Here is my HTML as it stands, the first item is present in the HTML, the second is dynamically created
<div class="metadata">
<input type="text" value="" style="width: 200px;">
<i class="icon-remove"></i>
</div>
<div class="metadata" style="">
<input type="text" maxlength="100" style="width: 200px;">
<i class="icon-remove"></i>
</div>
Try this
$(document).on("click", ".metadata i.icon-remove", function () {
console.log("what");
$(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});
As an addendum to Pranav's answer, avoid if at all possible doing delegated events off of $(document) - that results in all events that happen anywhere in the page being inspected for matches to your selector.
Far better would be to use a more targeted selection that exists on the page from the start. Something like
$('#otherDivThatsThere').on("click", "i.icon-remove", function () {
console.log("what");
$(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});
Where, again, #otherDivThatsThere is already in your dom at the moment that line of code is run.