Below is my code, i just want to alert the "hi" and "hello" so that i can put my actual codes there.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery-1.11.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
</head>
<script>
$(document).ready(function(){
alert("hi");
$('form[name="lgform"]').submit(function(evnt){
evnt.preventDefault();
});
$("#btn_login").click(function(){
alert("hello");
});
});
</script>
<body>
<form name="lgform">
<div>
<table id="table" >
<tr>
<td width="35px"><input id="mob" type="text" name="mob_nu"></td>
<td width="35px"><input id="pswd" type="password" name="pswd_vl"></td>
<td width="100px"><input type="button" name="login_btn" id="btn_login" value="Login"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
button click event is not working, i am using the same jquery library in some other places which is working fine. I have to call ajax in this page i need to call the button click without submitting the page, as i have few more buttons to add. Any piece of code is appreciated and thanks in advance.
when i tried your code i got this error
Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set
and when i tried after replacing alert's with console.log then it is working fine.
Your code is working fine, replace alert's with console.log()
Related
I am trying to figure out how to take user button clicks from buttons.html to dynamically toggle column visibility on a second userinput.html. I'm using DataTables for the userinput.html table and thought I had the solution with column.visible. In the DataTables manual there is an example of clicking a <a> and toggling column visibility. I am trying to apply that logic across html files. Unfortunately, the code I've tried is not working. Here's what I've got:
BUTTON PAGE
<!DOCTYPE html>
<html>
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>
<h1>Button page</h1>
<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
USER INPUT PAGE
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
<thead>
<tr>
<th>A</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr class="ac">
<td>
<input type="text" autofocus placeholder="e.g; " name="input" >
</td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<td>
<input type="text" placeholder="" name="P" class="h"></td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>
JS
$(document).ready( function () {
var table = $('#userinput').DataTable( {
"paging": false,
"ordering": false,
"scrollX" : true,
"scrollY" : true,
"scrollCollapse" : true,
"searching" : false,
// "stateSave" : true,
});
$('button.class1').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
});
;
There are no errors in the console on either html page. I think the error may be the use of the this keyword, but I'm not sure how to adjust the code to apply across html files.
It's not required to have the buttons on a separate page, in fact, I'd gratefully accept any constructive criticism.
Thank you in advance.
You can click button on one page to toggle (or any effect) on your another page ? So you can use webStorage(localstorage, sessionstorga) or cookies (read aboit this) or somthing like this. You click button and use script on first page but when you skip to another your js is restarting so you want to somthing to storage your data.
It could be because its late, but I've been at this for a good while now and still getting no further and running out of time.
Basically when I move the following code:
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
out from the function method and into the script it works fine, but if I put it within the button click function I get the following error:
Uncaught TypeError: undefined is not a function
I need it to work on button click, Here is the main code involved:
<script type="text/javascript" src="~/js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<div id="first">
<p>hello</p>
<input type="text" id="qr-text" value="" placeholder="Enter QR Data..."/>
<br />
<br />
<button id="button">Click on button</button>
</div>
<div id="qrcodeCanvas"></div>
<script>
$(document).ready(function () {
$('#button').click(function () {
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
});
});
</script>
UPDATE:
Here is the js file in question: http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/qr-code/
If you're trying to use the "un-minified" version, you need to load qrcode.js first. If you use the jquery.qrcode.min.js version, it packs the qrcode.js code into the same file.
So instead of
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
use
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
or
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
I come from MVC background and I have little experience with web forms.
I have established where the problem is, but so far I have been unable to fix this.
I have a form which is meant to execute Javascript function when body of the form loads. Please notice that head tag has a run at server attribute as it needs to use Request.QueryString.
The code is below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function doSomething()
{
// Use web forms to do something
var foo = <%= Request.QueryString["input"] %>;
}
</script>
<title>Foo</title>
</head>
<body onload="doSomething()">
<form id="MainForm" runat="server">
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
...
</td>
</tr>
</table>
</form>
</body>
</html>
I get the following error:
SCRIPT5007: The value of the property doSomething is null or undefined, not a Function object.
My guess is that something executes on a server or other way round. This has worked previously (over a year ago), so potentially something in a web config was overwritten. I have spent the most of day on this and had no luck so far.
Edit: Generated output is below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doSomething()
{
debugger;
var o = crmForm.queryString;
}
</script>
<title></title>
</head>
<body onload="doSomething()">
<form name="MainForm" method="post" action="fooPage.aspx?input=queryString" id="MainForm">
<div>
// hidden fields
<table width="272px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="body">
// inputs
</td>
</tr>
</table>
</form>
</body>
</html>
Instead of using the onload attribute of the body tag, you can also add the following code within the <script> tags:
if(window.addEventListener) window.addEventListener("load", doSomething, true);
else window.onload = doSomething;
I have this code:
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
} );
</script>
</head>
<body>
<form onsubmit="return false">
<input type="button" value="Translate" onclick="gtrans(this.form)" />
<p id="translation" style="border:1px solid #00f;padding:5px;width:400px">-</p>
</form>
</body>
When I add inside ready(){} the line google.load ("language", "1"); the form is not showed, why?
Regards
Javi
The $(document).ready() function is executed before the window loads, as soon as the DOM is registered by the browser. So, as Dalen suggests, you should put your code outside the function.
All,
Can u please tell me whats wrong with the following code.I am trying to open a modal window here and the contents of it is a text box.
Also i get the java script error .dialog is not a function.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#a").click( function(e) {
e.preventDefault();
var html='<div id="e_ls" style="overflow:auto;text-align:justify"><textarea rows="10" cols="10"></textarea></div>';
$e_ls = jQuery('#e_ls');
$e_ls.html(html);
$("#e_ls").dialog("open");
});
});
</script>
</head>
<a href="" id="a" >a</a>
</html>
Thanks....
Its more than just the Jquery UI File Missing. You are pulling it in incorrectly.
Try:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#e_ls").dialog({ autoOpen: false });
$("#a").click( function(e) {
e.preventDefault();
$e_ls = jQuery('#e_ls');
$("#e_ls").dialog('open');
});
});
</script>
</head>
<body>
<a href="" id="a" >a</a>
<div id="e_ls" style="overflow:auto;text-align:justify">
<textarea rows="10" cols="10"></textarea>
</div>
</body>
</html>
With the above the e_ls is hidden by default and only called when you ask. Note you do not need the preventDefault() if you put no href in your tag or use a different tag. the preventDefault is only required because you have an active link which also is incorrect...
Ideally you should use a or a if you want to format it like a link you can use CSS <a id="a" style="cursor:pointer; text-decoration: underline; color:00F">a</a>
You need to download and include the jqueryUI code from http://www.jqueryui.com
You need the jQueryui javascript file.