I have a button on my website but when I click, it doesn't respond. But the other button works. The location of the button where i got the error(which it doesn't respond to my click) is a bootstrap dialog. But the other bootstrap dialog works fine. May I have any suggestions or solutions ?
Following is the html code
<button type="button" class="btncanceldocument btn btn-warning" >
Cancel Document
</button>
And this is the javascript code
$(document).ready(function () {
$('.btncanceldocument').click(function () {
alert("Say hello");
});
});
Is there something wrong with it? if not i think the problem is on other javascript code. So how can i find the problem using my browser? or does my browser print some error? I have lots of javascript code on this file. I can't find the problem or error?
To answer your question, most browsers have a built in debugging tool. My personal favourite is Chrome.
If you right-click anywhere on your page then choose 'inspect' you will open it.
Here is a link that will help you - https://developers.google.com/web/tools/chrome-devtools/?hl=en
It's worth spending some time learning about that as it will save you in the long run.
When you open the debug you will be able to run JS code in the console, so you can manually fire your click using:
$('.btncanceldocument').click();
Then you will be able to make sure your code is working. If clicking with your mouse isn't working sometimes it could be as the button is actually behind a transparent element.
In the debug tool you are also able to select HTML elements so you can see if something is blocking the button. A quick tip for checking this is if you increase the CSS z-index property on the button to a large value e.g. '9999999999999' . This will bring the button 'above' the other content of the page.
Hopefully this helps,
Pete
Related
everyone.
I need to parse web page, that is result of search request. I write Python script. So I need to fake search button click. So here's my question:
How can I find what script is run when the button is clicked?
The button code is (as I found in page inspection in Chrome):
<div class="submit button" data-ember-action="2">Search</div>
I feel that I should read more. I'll be grateful for ideas what direction to dig for.
The second is who to get script output. But, perhaps, the answer for the first question will be the answer for both
You can use Google Chrome's Developer Tools/Inspector to set a breakpoint that listens for any click. Once you set that breakpoint, you can click the button in Google Chrome and get more insight.
Here is a link that can show you how to get to the Google Chrome Developer Tools/Inspector (AKA DevTools).
Once you have the DevTools open, Click on the Sources tab near the top, then expand the Event Listener Breakpoints accordion. Next, you can expand the Mouse accordion and activate the click event listener breakpoint by checking the box next to it.
After that, you can go back to the web page and click the button to stop the application in its tracks. From there you can use the debugger to step through the code and see more information about the application.
You will need to run the JS for that, not just read the page code.
So use something like Spalsh: https://splash.readthedocs.io/en/stable/ for javascript rendering. Then you can inspect the JS events more like you did in Chrome.
For a real Chrome inspection experience use headless Chrome: https://developers.google.com/web/updates/2017/04/headless-chrome
So I'm troubleshooting an issue in our app and can't figure it out. I haven't written the base code and can only inject CSS and Javascript. There's a very basic span element with an ID, below that is a snippet of Javascript basically saying "if element with ID submitButton is clicked, submit form #createForm". However, on mobile it's broken and the browser is not giving any errors.
<form method="post" action="page.html" id="createForm">
<span id="submitButton">Submit form</span>
</form>
<script>
$("#submitButton").on("click", function (event) {
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
</script>
Now, this works perfectly on desktop browsers, even when using the "display as iphone" mode Chrome has. You can click the button, everything works.
However on mobile safari and when adding the page as a webapp the button no longer works. When you press it the page just scrolls to the top and does nothing. I've checked it out through my Mac and everything seems normal and exactly the same as on desktop. I can even run $("#submitButton").click(); on my iphone through the console and it functions perfectly.
There are no errors or warnings in the console. Does anyone have any suggestions to troubleshoot this? I sadly can't give direct access to the code because everything is on an IP locked server.
Is there any way of seeing exactly what happens when I click the button? I've tried the "Timelines" tab but that shows nothing when I press the button.
This answer by another user fixed it: https://stackoverflow.com/a/3026621/3461722
Thank you to Robin Zigmond for pointing me in the right direction. I was thinking that something was preventing the click event from firing, but it was simply not picking up on it because I needed to track the touchstart event.
The linked answer does mention that a better solution was found by adding cursor:pointer; to the button with CSS, however my element already had that so it obviously didn't work in this case.
Add this function to detect the taps on mobile:
$('#submitButton').bind( "touchstart", function(e){
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
I have this landing page, for some reason I can't see the check box, submit button and a div that are in the code. Everything works in chrome and Firefox. I understand that IE dosen't always get media queries so I made this landing page that calls a diferent css file when it detects IE, but it made no difference.
I have a few questions:
1. What is causing this?
2. How can I fix it? Is there a file, like modernizer, that I can load to modify code for IE.
3. I am also using this js addon on the second link with a separate css file, in order to see place holders in IE. This also doesn't work, if someone could tell me why, that would be great
I see the checkbox just fine in IE. why don't you show an image of what you are seeing. Also, clear your browser cache.
To help debug, you should press F12, then click on console. make sure there are no errors. Then click Network. Make sure all css/javascript is loaded with no errors. finally, in the dom explorer, click the arrow, and click on the page and see if the elements are there.
as i see it this is the solution to my question
at the top of the css file i had this row:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
once i removed it i got the mossing elemnts.
tnx for helping
Dav
I have clicked many buttons without ever hitting a problem like this. I'm using VB 2010. If I click on the control programmatically or manually, the screen flashes like it is just refreshing. However, if I open a separate IE window, I can click the button and it advances to another screen as expected. I have researched this on other sites and have found one suggestion that the control is using a different version than the full version, which is IE 8 in my case. This still doesn't provide a solution. Can anyone please help? Here is the code which clicks the button as well as the html of the button.
WebBrowser1.Document.All("posForm:estimate").InvokeMember("click")
<button onclick="validateForEstimate(this, 'NonITS');" type="button" name="getestiamte"></button>
Maybe try the Microsoft Browser go to your toolbox right click and click choose items then go to COM components and use the filter to find Microsoft browser then check mark it. Add it to your form and done.
I am using bootstrap modal, I dont know where I have put the js code that triggers the modal after clicking the button.
jQuery('#signin').modal('show');
I checked each file...even checked each JS file in source in browser.
How can I find which code is triggering the event in browser when I am clicking the button to open a modal?
Use a developer tool for a browser which will allow you to perform Javascript debugging. Your best bet is most likely Firebug. If you set a debug point at a line within a JS file, firebug will allow you to inspect the stack to see which line has called the function.
Instructions
In Firebug, click the script tab.
Select your .js file using the drop down.
When the JS file displays find the target line and click to the left of it, setting a debug point.
Load your page, the script should stop at your debug point.
Click the Stack tab on the right and inspect.
Searching for Script in Firebug
If you click the script tab you can enter a known piece of the script in the upper right hand corner of firebug, this should take you to its location in the code.
I agree with Kevin, another option is to print the stack trace using something like:
http://www.codeovertones.com/2011/08/how-to-print-stack-trace-anywhere-in.html