I'm new to coding, working on an open source financial calculator in Angular 6.
Some users are reporting an issue that I can't recreate on any of my devices/browsers.
The "submit" button on my form has a mousedown function that changes their cursor to a waiting cursor and provides a "calculating..." message.
<button type="submit" id="maximizeSubmit" class="btn btn-primary" (mousedown)="waitCursor()">Submit</button>
waitCursor() {
document.getElementById("container").style.cursor = "wait";
document.getElementById("maximizeSubmit").style.cursor = "wait";
this.statusMessage = "Calculating the optimal strategy..."
}
Then upon submission the form triggers an onSubmit method. That method basically runs a bunch of math, reports back a result, then changes the cursor back to normal and removes the "calculating..." message.
<form #inputForm="ngForm" (ngSubmit)="onSubmit()">
onSubmit() {
//lots of math
document.getElementById("container").style.cursor = "default";
document.getElementById("maximizeSubmit").style.cursor = "default";
this.statusMessage = ""
}
Several users are reporting that when the "submit" button is clicked, the "calculating" message only appears for as long as they have the button pressed, then it disappears. And the calculator never outputs any result.
But I can't recreate the problem myself. Nor can I see what output they're getting in Console to perhaps guide me.
Does anybody have suggestions on how to proceed in such a situation?
The actual site and its GitHub page are below, in case that's helpful for any reason:
https://opensocialsecurity.com/
https://github.com/MikePiper/open-social-security
Like guys mentioned, you should got somehow info in what browser, OS, etc... did that happened. If you could find that out, definitely do it that way.
In apps with larger user base where you can't communicate with users about their errors that well or you want to know about errors they have and they even don't know about, you should implement and connect your app to some kind of Error logger. Nice article about it is here, especially chapter "How to keep track of the errors". Then you will know about all unexpected exceptions and in which environment they happened.
Related
I am attempting to expand a CMS system we are using ... writing HTML code to create a Button with the onClick event calling a custom JavaScript function defined.
The function that is being called first queries the user with a "confirm()", and if the user clicks OK then it performs a window.location redirect; if the user clicks CANCEL then the method does nothing.
The redirection ultimately happens, however, in BOTH cases an error appears. In the case selecting OK, because of the redirect, the error that is displayed is short-lived (however the error still happens). In the case of selecting the CANCEL button, at the bottom of my page is get the following error: "There was an error with the form. Please contact the administrator or check logs for more info."
I checked all logs I could find and no further details could be found. I turned "customErrors" off and when viewing the actions performed in Chrome's DevTools environment I see the following: "A potentially dangerous Request.Path value was detected from the client (:)"
I have no clue why I am seeing this error ... I am also pasting my button code below. Any suggestions?
P.S. Running Bootstrap v3
function jsDeleteFileID(p_intFileID)
{
var objAnswer = confirm("Are you sure you want to delete this file?");
if (objAnswer == true)
{
//****************************************
// Reload Page w/ Parameters
//****************************************
location.href='http://www.MyRedactedWebsiteDomain.com/RedactedWebpageName?DFID=' + p_intFileID + '&ReturnURLID=AAA-AAA-AAA-AAA';
}
else
{
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button"
data-loading-text="Please wait..."
data-name="DeleteFile152"
class="btn submit form-button af-btn-loading btn-normal btn-danger"
id="dnn111DeleteFile152"
onClick="jsDeleteFileID(152); return false;"
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
After posting the above, I figured out what the problem was. I would like to post my solution here in case anyone else that is programming on DotNetNuke and using DNNSharp Modules has the same issue.
The problem was in the labels listed in the class property. I removed two class labels: "submit", and "form-button". These two classes added some sort of additional processing that ran AFTER my custom java code which caused errors. Since I only want my code to run and nothing else, removing these two class labels stopped that extra code from running, and now my button behaves as expected.
<script type="text/javascript">
confirm("Delete user?.");
window.location.href = "users.php";
</script>
$qqq = mysql_query("DELETE from users WHERE panelistname='$theuser'") or die(mysql_error())
considering the code above, (inside a php file, so no worries with certain syntax errors you might notice) the problem here is that when click cancel on the confirm() dialog box that will show up. the delete action still executes. This question might be considered a double since, yeah, I found some questions relevant to this one but I just can't fixed this one myself.
the one I found codes it something like this:
"if (confirm('Are you...?')) commentDelete(1); return false"
I can't find a way to solve this problem, I don't know which part should I insert the SQL command(delete) in this format. Please someone show me how to do this right. :) thanks!
EDIT: I just saw that Nick Zuber posted a similar answer around 1 minute before I posted mine (actually, while I was writing it :P)
I don't clearly understand what you are trying to do.
You want to show the user a confirm window, and if they click Yes, delete some entry in the database, and if they click No, redirect them to the page 'users.php' ?
If it's what you want to do, then you can't do it like this. You can't use JS conditions with PHP. The PHP code is executed server-side (in the server), whereas the JS code is executed client-side (in the browser). What you would need is to do something like this:
warning: don't use this code, it's unsecure and shouldn't ever be used in a real app, it's just to show you how the whole thing works
(IN USERS.PHP)
if(isset($_GET['delete_dat_user']))
{
$qqq = mysql_query("DELETE from users WHERE panelistname='" . $_GET['delete_dat_user'] . "'") or die(mysql_error());
}
(IN THE WEBPAGE)
if(confirm('u serious u want to delete the user'))
{
window.location = 'users.php?delete_dat_user=theUserName';
}
else
{
nope
}
When your page loads, the PHP on your page will automatically execute, regardless of your JavaScript. Instead, try to prompt the user if they want to delete the account and if they click yes redirect them to a page that has your PHP query.
Also, the confirm function returns a boolean value depending on which option is clicked by the user. Try putting it in an if statement:
if(confirm("Delete user?.")){
window.location.href = "delete_user_page.php";
}else{
// cancel was clicked
}
I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.
In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!
Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)
Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);
You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)
I have a Flex application where I want to give the user a warning if they hit the back-button so they don't mistakenly leave the app. I know this can't be done entirely in Actionscript due to cross-browser incompatibility. What I'm looking for is just the Javascript implementation to catch the back-button.
Does anyone have a simple non-library cross-browser script to catch the back-button? I can't seem to find a post that shows an example.
You can use the window.onbeforeunload event.
window.onbeforeunload = function () {
return "Are you sure you want to leave my glorious Flex app?"
}
The user can press okay to leave, cancel to stay.
As you stated, this throws the alert any time the page changes. In order to make sure it only happens on a back button click, we have to eliminate the alert message whenever they're leaving the page from natural, expected sources.
var okayToLeave = false;
window.onbeforeunload = function () {
if (!okayToLeave) {
return "Are you sure you want to leave my glorious Flex app?"
}
}
function OkayToLeave() {
okayToLeave = true;
}
You'll have the responsibility of setting the variable to true whenever they click a button or link that will take them from that page naturally. I'd use a function for unobtrusive javascript.
Set your event handlers in the DOM ready:
referenceToElement.addEventListener('onClick', OkayToLeave(), false);
This is untested, but should point you in the right direction. Although it may seem like a nuisance to do this, I imagine it's more complete functionality. It covers the cases where a user may click on a favorite, or be redirected from an external application.
I'm trying to do what is supposed to be fairly simple with facebook connect, but having no luck.
When a user logs in, I want to show that users details (refreshed without reloading the page), and when the user logs out, I need to go back to a logged in state.
The code I have is
function update_user_box()
{
jQuery('span#loggedin').html('<fb:profile-pic uid="loggedinuser" facebook-logo="true"></fb:profile-pic><fb:login-button size="small" onclick="fbLogout()" autologoutlink="true"></fb:login-button>');
jQuery('span#fbLogin, ul#otherLogin').hide();
jQuery('div#popForecast li.otherLogin, ul.showList li.otherLogin').remove();
jQuery('span#logged').text('1');
FB.XFBML.Host.parseDomTree();
}
function fbLogout()
{
FB.Connect.logout();
jQuery('span#fbLogin').show();
jQuery('span#loggedin').empty();
jQuery('span#logged').text('0');
}
FB.init('c0529b8c11709f2317ae643d854e3866', 'xd_receiver.htm');
FB.ensureInit(function(){
FB.Connect.ifUserConnected(update_user_box);
});
I can log the user in and out, but nothing else changes.
I can't even trigger an alert from my functions.
For some reason the html I'm using won't display within the pre tags, however, on reloading the page, the user is displayed (or not as it should), so it is just not being triggered directly from the javascript functions. But refreshing the page launches the correct function.
The error I get in firebug is
'fbLogout undefined'
, but clearly it is defined. Does it matter where I define it?
Currently all of the javascript/jquery is in the head within script tags. Though I've tried moving it down into the page and didn't have luck their either.
Turns out I was over thinking this. FB does a lot of the work for you.
I was calling the functions on the login and logout events, but with FB.Connect.isUserConnected function, FB keeps an eye on this for you.
My code is exactly the same except
1) i no longer have onclick events in the fb:login button
2) the FB.Connect.isUserConnected function now looks like this
FB.Connect.isUserConnected(update_user_box, fbLogout);