Javascript confirm is not working - javascript

I have one strange problem with javasctipt confirm method, whenever I call this, its throwing error like "Uncaught TypeError: Property 'confirm' of object [object Object] is not a function"
var confirmVal = window.confirm("Please confirm?");
if( confirmVal == true ){
return true;
}
and my js files are in the html as like below
<link rel="stylesheet" href="css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="css/vendor/jquery-ui.css">
<script src="js/vendor/jquery-2.1.3.min.js"></script>
<script src="js/vendor/jquery-ui.js"></script>
<link rel="stylesheet" href="css/vendor/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/vendor/star-rating.css">
<link rel="stylesheet" href="css/vendor/toastr.min.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/jquery.mobile-1.4.5.min.js"></script>
<script src="js/vendor/star-rating.min.js"></script>
<script type="text/javascript" src="js/vendor/toastr.min.js"></script>
Strange is, in my other html file its working fine..
Please help me, what am I doing wrong here..

The code is correct except for the return statement which must be in a function.
function confirmation(){
var confirmVal = window.confirm("Please confirm?");
if( confirmVal == true ){
return true;
}
}

navigator.notification.confirm(
'ARE YOU SURE!', // message
myCallBck, // callback to invoke with index of button pressed
'CONFIRM', // title
['CONFIRM','CANCEL'] // buttonLabels
);
function myCallBck(index){
console.log(index);
}

You are using return statement but who's taking care of that statement if you want to use return statement you need to wrap your code into function
var confirmed = confirm("yes or cancel");
function confirmMe (){
if (confirmed){
return true;
}
}
you can also do this way
function confirmMe (){
return confirmed;
}
//going to return true or false
You can check if you are not overriding window object. Open console and type window and you can see if window has the confirm method.

Remove "return true" as it is must be wrapped inside a function
Learn more about return here
var confirmVal = window.confirm("Please confirm?");
if( confirmVal == true ){
alert("alright");
}

Related

Substring function in JSP does not respond in an alert function

The following code does not show the alert of "abc" but there is no any error message? Any idea to solve it?
<%# include file="includes.jsp"%>
<script src="js/bootstrap-datepicker.js"></script>
<link href="css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="js/jquery.dataTables.min.js"></script>
<link href="css/jquery.dataTables.min.css" rel="stylesheet" />
...
...
$("input[name=rnrInd]").change(
function() {
if ($(this).is(":checked")) {
alert(${fn:substring("abcxyz", -1,3)});
$("input[name=mnpCustName]").val("PREPAID SIM");
$("input[name=mnpCustName]").attr("readonly", false);
$("input[name=prepaidSimInd]").prop("checked", false) ;
} else {
//$("input[name=prepaidSimInd]").prop("checked", false) ;
}
}).change();
You can use JavaScript substring() function instead.
alert("abcxyz".substring(0, 3));
The JS code is evaluated when JSP have already been rendered. The alert() function expects the argument of type string that could be printed in the dialog, but instead it is looking for variable abc which is not available in the code. If you still want to call JSP function on the server then a better approach is to add quotes to returned value.
alert('${fn:substring("abcxyz", -1,3)}');

Difficulties running JavaScript (from .js file) in an Angular application

I am trying to incorporate a Javascript function (contained in app.js), which I am trying to run from the index.html of my Angular 2 application.
Initially I used a CLI program called Office Add-in generator to make a non-angular application, in which this JavaScript works.
However when using the Add-in generator in an Angular application the app.js file is not automatically generated. Manually copy pasting the app.js file and <script> link does not work either. I realise I have only provided a couple of files worth of code, let me know if I should edit more in, or provide a github link?
The error in chrome is net::ERR_ABORTED not defined with a 404 message. (relating to the app.js file)
~~~~HTML~~~~~
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.css">
<meta charset="utf-8">
<title>Microsoft Graph Connect sample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script>
window.history.replaceState = function(){};
window.history.pushState = function(){};
</script>
</head>
<body>
<app-root></app-root>
<button onclick="setItemBody()">Paste to email</button>
<script type="text/javascript" src="node_modules/core-js/client/core.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/office-ui-fabric-js/dist/js/fabric.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
~~~~~~~app.js~~~~~~~~
var item;
Office.initialize = function () {
item = Office.context.mailbox.item;
// Checks for the DOM to load using the jQuery ready function.
$(document).ready(function () {
// After the DOM is loaded, app-specific code can run.
// Set data in the body of the composed item.
// setItemBody();
});
}
// Get the body type of the composed item, and set data in
// in the appropriate data type in the item body.
function setItemBody() {
item.body.getTypeAsync(
function (result) {
if (result.status == Office.AsyncResultStatus.Failed){
write(result.error.message);
}
else {
// Successfully got the type of item body.
// Set data of the appropriate type in body.
if (result.value == Office.MailboxEnums.BodyType.Html) {
// Body is of HTML type.
// Specify HTML in the coercionType parameter
// of setSelectedDataAsync.
item.body.setSelectedDataAsync(
'<b>These are the times I am available:</b><br>Monday -- 8:30 to 9:00<br>Tuesday -- 1:00 to 5:00<br>Thursday -- 4:00 to 5:00<br>',
{ coercionType: Office.CoercionType.Html,
asyncContext: { var3: 1, var4: 2 } },
function (asyncResult) {
if (asyncResult.status ==
Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Successfully set data in item body.
// Do whatever appropriate for your scenario,
// using the arguments var3 and var4 as applicable.
}
});
}
else {
// Body is of text type.
item.body.setSelectedDataAsync(
' Kindly note we now open 7 days a week.',
{ coercionType: Office.CoercionType.Text,
asyncContext: { var3: 1, var4: 2 } },
function (asyncResult) {
if (asyncResult.status ==
Office.AsyncResultStatus.Failed){
write(asyncResult.error.message);
}
else {
// Successfully set data in item body.
// Do whatever appropriate for your scenario,
// using the arguments var3 and var4 as applicable.
}
});
}
}
});
}
// Writes to a div with id='message' on the page.
function write(message){
document.getElementById('message').innerText += message;
}
Actually you should not just put your js files in index.html better add in .angular-cli.json file.. and about js not working in ng2+ project.. check out https://angular.io/guide/attribute-directives I think you must make wrapper. check this as well https://medium.com/#NetanelBasal/typescript-integrate-jquery-plugin-in-your-project-e28c6887d8dc

Why FooTable not callable?

I am working on a project where we are trying to implement a jQuery plugin called Footable. It works by calling the function .footable() on the table being selected by jQuery. When I tried to call this function I got a type error: undefined is not a function.
We are also using prototypejs in this project so at first I though that the problem was that footable was using $.() instead of jQuery.(), and it was. I went in and changed the $[.(] to jQuery hoping that it would fix the problem, but I am still unable to call .footable().
You should also know that I am loading footble.js from an Iframe. I'm not sure if that would cause any problems.
I'm not sure what to try next. Any advice is appreciated.
Thanks in advance
UPDATE 1
I have tried entering the following code in the console
var $j = jQuery.noConflict();
$j('<table></table>').footable();
In an environment that successfully loads footable an object is returned with the footable classes. In my enviornment I get a "TypeError: undefined is not a function".
make sure load jquery first, and then footable
and $ is alias from jQuery, so its should not a problem, u can use $() or jQuery()
based on your question, you should use $() or jQuery(), not $.() or jQuery.()
I think you're on the right track with there being a conflict.
Here's a plunk that demonstrates the issue: http://plnkr.co/edit/2sR7F2W0QGJAcXxgez14
In the plunk, if JQuery is still reference by $ and you add the reference to Prototype, you see that Footable stops working. If you use the JQuery NoConflict and then use that instead of $, Footable starts work as expected again.
Here's where I define the scripts:
<head>
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>var $j = jQuery.noConflict();</script>
<script src="footable.js"></script>
<script src="footable.filter.js"></script>
<script data-require="prototype#*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
</head>
Then when I use JQuery and Call footable():
$j(function() {
window.footable.options.filter.filterFunction = function(index) {
var $t = $j(this),
$table = $t.parents('table:first'),
filter = $table.data('current-filter').toUpperCase(),
columns = $t.find('td');
var regEx = new RegExp("\\b" + filter + "\\b");
var result = false;
for (i = 0; i < columns.length; i++) {
var text = $j(columns[i]).text();
result = regEx.test(text.toUpperCase());
if (result === true)
break;
if (!$table.data('filter-text-only')) {
text = $j(columns[i]).data("value");
if (text)
result = regEx.test(text.toString().toUpperCase());
}
if (result === true)
break;
}
return result;
};
$j('table').footable().bind('footable_filtering', function(e) {
var selected = $j('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
});
}
If you want to continue to use $ jquery you could do something like: (jQuery and prototype.js conflict, how to keep jQuery as $?)
(function($) {
$('table').footable();
})(jQuery);

jQuery if inside a function undefined

I have this simple code that shows an image and a word and you have to complete the field. If you write the word correctly, a congrats popup comes up.
I was able to figure out how to randomize items in an array to display a random image.
Now I want to check on each keyup if it matches that random word.
It seems there's something wrong with my IF statement because if I remove it, popup works perfectly.
Error:
uncaught typeerror undefined is not a function
Code:
<html>
<head>
<title>AutistApp</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div class="eval">CORRECTO</div>
<div class="siguiente">¡OTRA VEZ!</div>
<div class="dibujo"><img id="dibujito" src="img/apple.png" /></div>
<div class="palabra">MANZANA</div>
<div class="respuesta"><input type="text" id="resp" name="resp" value=""/>
</div>
</div>
<script type="text/javascript">
/***** RANDOM VALUES *****/
var messages = ["manzana", "pera", "banana"],
message = messages[Math.floor(Math.random() * messages.length)];
$('.palabra').text(message);
$('#dibujito').attr('src','img/'+message+'.png');
/***** KEYDOWN CHECK *****/
$(document).ready(function(){
$('#resp').keyup(function(){
if ($("#resp").value() == message) {
$('.eval').slideDown();
$('.eval').delay(3000).fadeOut();
$('.siguiente').delay(3000).slideDown();
}
});
});
</script>
</body>
</html>
You need to use .val() instead of .value() to get the value of input element, so you can do:
if ($("#resp").val() == message) {
instead of:
if ($("#resp").value() == message) {
You also need to wrap all of your code inside DOM ready handler:
$(document).ready(function () {
var messages = ["manzana", "pera", "banana"],
message = messages[Math.floor(Math.random() * messages.length)];
$('.palabra').text(message);
$('#dibujito').attr('src', 'img/' + message + '.png');
$('#resp').keyup(function () {
if ($("#resp").val() == message) {
$('.eval').slideDown();
$('.eval').delay(3000).fadeOut();
$('.siguiente').delay(3000).slideDown();
}
});
});
Folks you need to use
$("#resp").val()
in if condition.

Undefined error in JavaScript

I'm getting data from XML. I can successfully pick up a price from the XML but there is a unexpected error called undefined that shows up when I use the function given below;
<html>
<head>
<script type="text/javascript">
function myXml(origin, destination) {
var x=xmlDoc.getElementsByTagName("flights");
for(i=0;i<x.length;i++) {
if(x[i].getAttribute('FrTLAs')==origin && x[i].getAttribute('destination')==destination) {
document.write(x[i].getAttribute('price'))
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myXml('SYD','Bali'));
</script>
</body>
</html>
myXml('SYD','Bali') call returns undefined, as you do not return anything in function body. So
document.write(myXml('SYD','Bali'));
will print "undefined" . Just replace above code with this:
myXml('SYD','Bali');
Engineer is correct, or better return the value from your myXml function.
so, document.write(undefined) wont occur and you may not get the above error.

Categories

Resources