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>
Related
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>
I have the following html(+razor) :
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year
#DateTime.Now.AddYears(-1).Year
#DateTime.Now.AddYears(-2).Year
</div>
I simply want to have use these as buttons and something to happen on click. Therefore I have the following jquery, which won't work :
$(".btn a").click(function () {
console.log('click');
var txt = $(this).text();
console.log(txt);
alert(txt);
});
I simply want to have the value inbetween the on click.
Right now, when I click one of the buttons, nothing happens. Neither I get 'click' written on the console, nor i get an alert with the text in the tag. Can someone help make this work?
$(".btn a") is looking for <a> tags that are descendents of .btn class. That is not what you have
Just use the inner listener and get rid of the outer one. It is not a good practice to create event listeners inside other event handlers unless you really have a good reason and know what you are doing
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year
<br>
<br>
#DateTime.Now.AddYears(-1).Year
<br>
<br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("#years a").click(function(e) {
console.log(this);
e.preventDefault();
alert("click");
});
</script>
</body>
</html>
You can try this code
Example #1:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("a.btn").click(function(e){
e.preventDefault();
console.log(this);
alert("click");
});
</script>
</body>
</html>
Example #2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
// without a
$(".btn").click(function(e){
e.preventDefault();
console.log(this);
alert("click");
});
</script>
</body>
</html>
Example #3:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("#years a").click(function(e){
console.log(this);
e.preventDefault();
alert("click");
});
</script>
</body>
</html>
Your enclosing div does not have a class of .btn so your jquery selector won't find anything. Try:
$(".btn-group a").click(...)
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>');
What is the best way to replace
var value = prompt("Enter a URL", "http://www.google.com/");
by a javascript modal (preferably pure javascript, if not possible then jquery)
Thanks!
You will need to change theway you call it, so it now follows event-driven programming style like that:
function prompt(question, callback) {
// here build a modal/form and after form submit:
callback(prompt_value);
}
And then use it like that:
prompt('Enter a URL:', function(result){
// do something with the result:
alert(result);
});
For better alerts, you can use bootboxjs.
For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.
Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) :
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
input data: <input type="text" class="inputdata"><br>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Javascript :
var myModal = {}
window.onload = function(){
var btnOpen = document.getElementById('queryData'); // The button to open the modal
// if btnsOpen is not given, you can simply use myModal.show()
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onConfirm', function(){
console.log(this.querySelector(".inputdata").value);
});
}