if I want to use jscolor.js in HTML or in jquery function but it does not work after button click
$(document).ready(function() {
$('#click').click(function () {
$("#placeholder").html("<input class=jscolor value=714BAB>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
it works in html but does not after button click
Try this
What I have done is re initialize the jscolor by adding jscolor.installByClassName("jscolor");
Run the snippet and see for yourself.
$(document).ready(function() {
$('#click').click(function () {
$("#placeholder").html("<input class='jscolor' value='714BAB'>");
jscolor.installByClassName("jscolor");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
You could create the element and append it dynamicly like this. You can use the fromString method to set the right color.
$(document).ready(function() {
$('#click').click(function() {
var input = document.createElement('INPUT');
var picker = new jscolor(input);
picker.fromString('714BAB');
$("#placeholder").empty().append(input);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>
Related
The problem is simple, I just can't find a way to solve it. I just to display a text with a click of a button but when the page is reloaded I want the text to still be displayed without clicking the button again. My code is the following:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<div id='result' style: 'display:none;'>
<p></p>
</div>
<form method="post" action="#">
<input type="button" value="Show" id='button'/>
</form>
<script type="text/javascript">
$(document).ready(function(){
var div1Show = localStorage.getItem('div1_show');
if (div1Show) {
$("#div1").remove();
} else {
$("#div1").show();
}
$("#button").click(function(){
$("#result").text("Complete");
$("#div1").show();
localStorage.setItem('div1_show', 'true');
});
});
</script>
You are placing a string into the cookie just change the following line
localStorage.setItem('div1_show', 'true');
To a boolean
localStorage.setItem('div1_show', true);
I want add select2 to tag <select id="test" class="select2"></select> dynamically. E.g
<select id="test" class="select2"></select>
<button onclick="applySelect2()">Click me</button>
<script type="text/javascript">
function applySelect2() {
//code witch will aplly select2 for <select id="test" class="select2"></select>
//Please help
}
</script>
First you need the jQuery library, than something like this should help:
<select id="test" class="select2"></select>
<button id="myButton">Click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
jQuery(function($) { // DOM READY
$('#myButton').click(function(){
$("#test").select2();
});
});
</script>
Or similar to your example:
jQuery(function($) { // DOM READY
function applySelect2() {
//code
}
$('#myButton').click(function(){
applySelect2();
});
});
you mean this?
function applySelect2() {
$(".select2").select2();
}
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');
Is there any ways to click up the div function by javascript like $('#divAB7').clicked to accomplish the following functionality same done when clicked on Read more link:
Read More`
<script type='text/javascript'>
function js() {
$(".myHref").on("click", function (e) {
e.preventDefault();
$('#divAB7').trigger('click');
});
}
</script>
<body>
Read More
<input type='submit' onClick='js()'>
<div id='divAB7' style="display:none;">
hello
</div>
</body>
change to :
<script type='text/javascript'>
$(".myHref").on("click", function (e)
{
e.preventDefault();
$('#divAB7').trigger('click');
});
</script>
<body>
Read More
<div id='divAB7' style="display:none;" onclick="alert('div is Clicked')">
hello
</div>
</body>