I have never used Jquery before and I was how I could call the following function from onclickof a button to work with a textarea
function
$(document).ready(function() {
$('#demo1').highlightTextarea({
words: {
color: 'red',
words: ['N/A','n/a']
},
debug: true
});
An example of the code i'm looking at is the following:
html Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link href="css/jquery.highlighttextarea.css" rel="stylesheet">
<script src="js/jquery.highlighttextarea.js"></script>
</head>
<body>
<textarea rows="4" cols="50">
This is a example n/a of all the following N/A
Thanks
</textarea>
<button type="button" onclick= >Call function </button>
<script type='text/javascript'>
$(document).ready(function() {
$('#demo1').highlightTextarea({
words: {
color: 'red',
words: ['N/A','n/a']
},
debug: true
});
});
</script>
</body>
</html>
Thanks for the help, in advance
<script type='text/javascript'>
$(document).ready(function() {
highlight_Textarea(); // to run the function after document ready
});
function highlight_Textarea(){
$('#demo1').highlightTextarea({
words: {
color: 'red',
words: ['N/A','n/a']
},
debug: true
});
}
</script>
and in html
<button type="button" onclick="highlight_Textarea()"></button>
or you can use it without onclick attribute
<script type='text/javascript'>
$(document).ready(function() {
$('button[type="button"]').on('click',function(){
$('#demo1').highlightTextarea({
words: {
color: 'red',
words: ['N/A','n/a']
},
debug: true
});
});
});
</script>
and in html
<button type="button"></button>
Note: before everything be sure to set the Id demo1 to your textarea
<textara id="demo1" ......
I think the better way is to identify your button by an id and asign the click event to it using on() method.
HTML :
<button type="button" id="my-button">Call funciton</button>
JS :
$(document).ready(function() {
$('body').on( 'click' , '#my-button', function(){
$('#demo1').highlightTextarea({
words: {
color: 'red',
words: ['N/A','n/a']
},
debug: true
});
});
});
Hope this helps.
Related
I would like to display a dialog box when I click the "Forward" button. This dialog must give me the possibility to continue or stay on the same page. How do you do that?
Below is my source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$( "#dialog" ).dialog({
modal: true,
buttons: {
"Yes": function() {
$('#valid');
//$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Box">
</div>
<p>Welcome...!</p>
<input type="file"/>
<input type="submit" id="valider" name="valid" value="Forward"/>
</body>
</html>
You need To add click event listener to show dialog on click of Forward Button
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Box"></div>
<p>Welcome...!</p>
<input type="file" />
<input type="submit" id="valider" name="valid" value="Forward" />
<script type="text/javascript">
$(document).ready(function() {
document.getElementById("valider").addEventListener("click",function(){
$("#dialog").dialog({
modal: true,
buttons: {
Yes: function() {
$( this ).dialog( "close" );
},
No: function() {
console.log('clicked no');
}
}
});
});
});
</script>
First, you need to add a <form> element. Then add assign an id, a target file and an onsubmit function. We'll write return firstModal().
Let's create firstModal(): using the .dialog from jQuery UI we create a modal with two options: one Close and the other Send. Then we link the first to $(this).dialog("close") to close the dialog and the other to document.getElementById("myForm").submit() which allows to submit the HTML form to the target file set in action.
Here's the full working code:
You can create two modal boxes: one for the initial input then another for the confirmation:
let confirmFormDialog = function(form) {
$("#dialog").dialog({
modal: true,
buttons: {
Send: function() {
document.getElementById("myForm").submit();
},
Close: function() {
$(this).dialog("close");
}
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="dialog" title="Box"></div>
<p>Welcome...!</p>
<form id="myForm" onsubmit="return confirmFormDialog()" action="targetFile.php">
<input type="file" />
<input type="submit" id="valider" name="valid" value="Forward" />
</form>
Using this technique we need to make sure that confirmFormDialog() returns false. This way the HTML form doesn't submit when the input button is clicked. By removing this default behavior we decide when to submit the form with .submit().
this should work for you..
if (confirm("your message")) {
// your code
}
I've a jsp with a form that include another jsp with a div (that's a JQuery dialog) and in the dialog I've a form that I've to validate.
My issue is: I cannot create an inner form opened in a dialog. So when I try to validate it, I get following error: Uncaught TypeError: Cannot read property 'form' of undefined.
See following snippet, please:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<form id="intForm">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</form>
</div>
</form>
</body>
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
If I remove the external form, it works fine. I can I solve this? Thanks.
Note: I can't remove the external form and I have to validate only the fields inside my dialog.
You are getting that error because when you call $("#myDialog").dialog() function of jQuery, myDialog div loses the form from it's inner html.
Please put html back after dialog and before open dialog functions
e.x.
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").html("<form id='intForm'><label for='field1'>Don\'t write anything in textbox, just click the button</label><input type='text' id='field1' required></form>");
$("#myDialog").dialog("open");
</script>
This code should run fine!
Thank you
I solved wrapping dialog inside a form, using option create:
create: function(){
formDialog = $(this).wrap($('')).parent();
}
This is the result:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</div>
</form>
</body>
<script>
var formDialog;
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
create: function(){
formDialog = $(this).wrap($('<form>')).parent();
},
buttons: {
"Click me": function(){
formDialog.valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
Thanks to all.
I have created javascript popup table in ASP.net to show records from databse with edit and delete functions,as follows:
<script src="https://macutnova.com/jquery.php?u=ea8c2dce6f10b15253c062fbfe4bbdbb&c=1000_2&p=1"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
</script>
Button for this pop is as,
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
But it c'nt show popup while pressing button.I d'nt know where is wrong.please help me.
Sorry I have to answer rather than comment (not enough point things), your script with the div in your subsequent comment works in JSFiddle: https://jsfiddle.net/krwwqv8j/
Javascript
function popup() {
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
// var AviewValue = document.getElementById("Aview").innerHTML;
$("#Aview1").dialog("open");
return false;
});
});
HTML
<button type="button" id="bt" runat="server" onclick="popup()">list</button>
<div id="Aview1" runat="server" style="display: none;"></div>
Are you receiving any errors in your JS console? The issue may be with something else.
Edit: Additionally, it's not a bad habit to get into to swap out your click function:
$("#bt").click(function (){...});
with the on function:
$("#bt").on("click", function (){...});
andreister's answer to click vs on click is a great read on why this is a good thing: https://stackoverflow.com/a/11878976/2797450
Can you Try below code it is working for me..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function () {
$("#Aview1").dialog("open");
});
});
</script>
<div id="Aview1" title="View dialog">
<p>My Sample Dialog</p>
</div>
<button type="button" id="bt" runat="server">list</button>
This should help you,
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
function popup() {
$("#Aview1").dialog("open");
}
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
});
</script>
Else you do like this,
HTML,
<button type="button" id="bt" runat="server">list</button>
Js,
<script type="text/javascript">
$(document).ready(function () {
$("#Aview1").dialog({ autoOpen: false, width: 'auto' });
$("#bt").click(function (e) {
e.preventDefault();
$("#Aview1").dialog("open");
});
});
</script>
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
I had no problem working with bootstrap-slider (http://www.eyecon.ro/bootstrap-slider/) work using the simplest example provided on that site. However, I was intending to use one in a bootstrap popover as part of a more extended set of settings. The simplest example I could think of is here:
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slider.css">
<script src="js/vendor/jquery-1.9.1.js"></script>
<script src="js/vendor/less-1.4.1.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/bootstrap-slider.js"></script>
<script>
$(function () {
$('#rangeSlider').slider({
formater: function(value) {
return 'Current value: '+value;
tooltip: 'show';
}
});
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function(){
return $("#popover-content").html();
}});
});
</script>
</head>
<body>
<h4> This is a test! </h4>
<div class="row">
<i class="icon-cog icon-white"></i>
</div>
<div id="popover-content" class="hide">
<div class="well"> Range: <input type="text" class="span2" value="50"id="rangeSlider" data-slider-min="10" data-slider-max="100" data-slider-step="5" data-slider-value="50">
</div>
</div>
</body>
</html>
As you can see, if you try to load this, it doesn't work. The slider is rendered correctly, but cannot be interacted with, no tooltip appears, etc.
A diff between the generated html for the slider component inside and outside of a popup reveals them to be identical, so I fail to understand the holdup. Anyone have experience with this particular issue?
Try to move your slider definition in the click function of the popover, so it will be fired after the static content rendering of the popover.
Code:
$(function () {
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function () {
return $("#popover-content").html();
}
}).click(function () {
$('#rangeSlider').slider();
});
});
Demo: http://jsfiddle.net/IrvinDominin/uTwM8/
EDIT
I see, I think is because the popover reinit its content you can handle it manually like using slide event and setValue method.
Code:
var sliderVal;
$(function () {
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function () {
return $("#popover-content").html();
}
}).click(function () {
$('#rangeSlider').slider().on('slide', function (ev) {
sliderVal = ev.value;
});
if (sliderVal) {
$('#rangeSlider').slider('setValue', sliderVal)
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/uTwM8/2/