JavaScript code on onClick event causing "dangerous Request.Path" error - javascript

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.

Related

cypress check div not clickable

The piece of code below shows as a checkbox and I'm trying to use cypress to click it but it isn't working even though I selected it.
<button class="p-button p-component p-disabled primary-button p-button-raised font-semibold" type="button" disabled="" id="search-button" aria-haspopup="true" aria-controls="search-menu" data-v-17vc126c="">...</button>
Here's what my cypress code looks like:
When('User clicks checkbox, disable form', () => {
cy.get('.p-button.p-component[aria-controls="search-menu"]').click();
});
Here's the error I get:
Timed out retrying after 15050ms: cy.click() failed because this element is disabled:
...
Fix this problem, or use {force: true} to disable error checking.
The command was expected to run against origin https://myDevSite.com but the application is at origin http://localhost:8080.
This commonly happens when you have either not navigated to the expected origin or have navigated away unexpectedly
Crazy thing is I used this exact code on another element and it worked with no errors.
Any help would be much appreciated. Thanks!
The obvious step you can take is shown in the message
cy.get('.p-button.p-component[aria-controls="search-menu"]').click({force:true})
but the user won't click when button is disabled (natch), so you must find out how to enable it from the web page and do that instead.

Selenium test - OK/Cancel popup disappearing immediately

Odd one here. When testing this manually I click the delete button, wait for the popup
Then I click OK and the record is removed as expected.
But when I try to do the same in Java/Selenium it goes like this->
WebElement element = _driver.findElement(By.id("btnDeletePatient"));
JavascriptExecutor executor = (JavascriptExecutor)_driver;
executor.executeScript("arguments[0].click();", element);
or
_driver.findElement(By.id("btnDeletePatient")).click();
Both have the same response, the OK/Cancel popup will appear and then immediately vanish.
This is the code for the button
<input type="submit" name="ctl00$cpContentLeft$btnPatient"
value="Delete User" onclick="return userDelete();"
id="ctl00_cpContentLeft_btnPatient"
tabindex="81" class="btn btn-outline-primary btn-sm mr-3">
And this is the code for the function userDelete
function userDelete() {
if (confirm("Are you sure you wish to delete this user?")) {
return true;
}
else {
return false;
}
}
Also I have now tried the same in Edge, same thing so this does not appear to be a Chrome issue.
Anyone got any ideas what is causing this please?
Further tests as follows.
I place a breakpoint just at the point the script will click the delete run and run the script. The page loads as expected and I get to the problem point.
I manually click the Delete button, the popup appears and then stays until I click cancel.
Using this code I step through and the popup appears and then instantly disappears.
_driver.findElement(By.id("ctl00_cpContentLeft_btnDelete")).click();
Using this code the response is the say as 2.
_driver.findElement(By.id("ctl00_cpContentLeft_btnDeletePatient")).sendKeys(Keys.SPACE);
Then I try a double click and nothing happens.
On all tests I see no errors in the console.
I hope you are clicking the delete button before page loads completely, that is why pop is disappearing suddenly. please add wait before clicking delete button.
Steps:
Load the page completely (add wait here)
Click the delete button
click Okay button.
please add some more codes here and screenshots too. that would be more helpful
This looks like a java script alert. In selenium, we have specific way to handle alert. You do not need to click on ok. You can first wait for alert to be present. If it is present, then switch to that alert.
Then, We have specific methods to handle alerts in selenium.
alert.accept() clicks on ok.
alert.dismiss() clicks on cancel.
Sample code from selenium documentation:
driver.findElement(By.linkText("See a sample prompt")).click();
//Wait for the alert to be displayed and store it in a variable
Alert alert = wait.until(ExpectedConditions.alertIsPresent());
//Type your message
alert.sendKeys("Selenium");
//Press the OK button
alert.accept();
//Press the Cancel button
alert.dismiss();
//Store the alert in a variable for reuse
String text = alert.getText();
Ok found it
The issue was within the chromedriver, this line fixed it
chromeOptions.setCapability("unexpectedAlertBehaviour", "ignore");
Now the popup remains until actioned in the script.
We live and learn, thanks for all your help.

Debugging Javascript/Angular issue when you can't recreate it

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.

Unexpected web page refresh in Chrome browser

I've been facing this weird behavior for a while now and can't find any workaround.
There is a button with certain methods called on click.
In Firefox works well. In Chrome it just refreshes the whole page.
$("#modoComparativa").click(function(){
if($(this).hasClass("active")){
$('#histFromDate').attr("placeholder","Date 1");
$('#histToDate').attr("disabled","disabled").attr("placeholder","Date 2");
startDatepickerComp();
}
else{
$('#histFromDate').attr("placeholder","Initial date");
$('#histToDate').attr("disabled","disabled").attr("placeholder","Final date");
startDatepicker();
}
$('#clearDates').attr("disabled","disabled");
// This function calls another function causing the odd behavior in Chrome
requestGraph(idDetail, idArea, "", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If I comment out everything but the selector and the call to the click method, the behavior is the same. It refreshes everything.
I can't figure out how to debug this as each time I press the button, the whole page refreshes and no log/errors remains in the browser debugger.
Any ideas would be appreciated.
Edit - Addition of the selector as requested:
<div class="form-group"><button class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>
</div>
Add a return false to your click callback to prevent actions due to your html syntax (like form submission or clicking on a anchor tag).
$("#modoComparativa").click(function(event){
event.preventDefault();
// your existing code
}
Edit: Since you added your html...
If your button is within a form, you can also add the type="button" attribute to prevent it from submitting your form.
<button type="button" class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>
Thank you to lonesomeday for suggesting http://api.jquery.com/event.preventDefault/
I added an answer which could be useful for people stumbling here but having other causes for this behavior.
This kind of unexpected random reload can be due to several causes:
As stated in other answers a link which propagates the click and then performs a GET on the page itself
An image tag <img> where the src is empty or invalid, the browser will attempt to load the image using GET, but will in fact refresh the page instead (empty = relative to the page = page). Even a hidden image will be loaded, so this can be tricky to find, use the browser console !
Some javascript logic which refreshes the page programmatically in some conditions (session expired, token expired ...)
A browser 'feature', for example: https://support.mozilla.org/en-US/questions/1204335, or https://superuser.com/questions/1048029/disable-auto-refresh-tabs-in-chrome-desktop
In any case use the browser console and look for suspect GET calls to the page itself or redirects.

problem with javascript: return false is not working

Hey there is a link in my program as shown and onclick it calls the function clearform as shown:
Html Code:
<a class="button" href="Cancel" style="left: 55%;" onclick="clearForm()">Cancel</a>
JavaScript Code:
function clearForm(){
document.getElementById("subjectName").value = "";
return false;
}
return false is not working in this code. actually the first line of the function executed successfully but the return false was failed. I mean page is redirected to url "Cancel".
Change your code as
<a class="button" href="Cancel" onclick="return clearForm()">Cancel</a>
Your problem is you need to return the Boolean.
But, drop all that...
Attach your event unobtrusively...
element.onclick = clearForm;
Use preventDefault(). It is the modern way of acheiving that.
function clearForm(event) {
event.preventDefault();
}
<a class="button" href="Cancel" style="left: 55%;" onclick="clearForm();return false;">Cancel</a>
should work
Please note that if there is a bug or error in clearForm() then "return false" will NOT stop the anchor action and your browser will try to link to the href "Cancel". Here is the logic:
User clicks on anchor
onClick fires clearForm()
There is an error in clearForm() so Javascript crashes and stops all code execution.
return false is never fired because Javascript has already stopped.
If you are relying on a third party JavaScript API (I was using code supplied by Recyclebank to spawn a popup), and the third party API makes an update that breaks the JavaScript, then you'll have problems.
The following will stop the link under normal conditions and error conditions.
<a class="button" href="javascript:;" style="left: 55%;" onclick="clearForm();return false;">Cancel</a>
The return false; somehow needs to be right at the front.
(In ALL situations I've dealt with over the past months - may or may not be a bug).
Like this: onclick="return false; clearForm();"
Besides that, as mentioned by others as well, you need to return it from the onclick, not just from the function.
In your case: onclick="return clearForm()".
Keep in mind that some browser extensions may interfere with proper operation of links. For example, I ran into a situation where someone had both AdBlock Plus and Ghostery enabled. Clicking a simple 'a' tag with an 'onclick="return SomeFunction();"' attribute (the function returned false) caused the browser to treat the click as a page transition and went to a blank page and the loading indicator just kept spinning. Disabling those browser extensions cleared up the problem.
Including this as an answer because this was the first page I landed on from Google.

Categories