I came across [check revision history for link] and surprised by its clean design. I am particularly interested in how the site implement the "Add Comment" popup when you click any of the "Add Comments" link under a deal.
My JS knowledge for popup is still at the .. level. Yet this site is using < a class="addcomment">Add Comments only. How does it trigger the popup? I searched its homepage html source and not seeing the case it pre-load the popup then hide and enable it when someone click the "Add Comments" link.
Have a look at jQuery Its a javascript library that has feature and plugins that can achieve this very easily and supports most browsers.
Have a look at the jquery dialog specifically: http://jqueryui.com/demos/dialog/
They are attaching a click event handler via jQuery. If you use your browser's dev tools and use the console, you could execute the following code to view the handlers bound. If you use Firefox and Firebug, you can use Firequery, which adds the .data() data to the dom view.
$(".addcomment").data("events").click
If you look at the external js file and search for "addcomment", you'll see the handler being bound.
Related
I have to inspect a large scaled HTML front end project where a page load occurs after jQuery Javascript AJAX request. But I cannot find out why and where a HTML navigation was executed. Does there a exists a way to watch or stop at such an event in chrome dev tools? I just took a look if there is a form or submit button on the page. But there is nothing not even a form. I am pretty sure HTML navigation was triggered by Javascript code.
Yup, there is options available for Event Listener Breakpoints. It will be in source panel and you can have a variety of event breakpoints.
For more, detailed reference - Chrome Breakpoints Reference
Is there a way to view the executed Jquery on a webpage such as Chrome. I assume this is only covered by an extension.
eg. if a dropdown menu is activated when i hover over a phone icon. Can I see the Jquery code (perhaps in a popup or console)
You should consider writing a "console log" in your instructions.
/ Event setup using a convenience method
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});
See further here : https://learn.jquery.com/events/event-basics/
Chrome provides you the facility to see Javascript and html code in developer tool. Right click on the page and go to inspect element or use F12 to open developer tool.
If you want to break your javascript execution at any point you can write debugger; in the code or you can add breakpoint to the source.
In firefox also you can use the same way. Other than that with firefox you can also use Firebug, which is a good extension with firefox which helps to ease your job.
The best solution for my request I did was.
Right click on element, inspect, then Event Listeners and the pending JQuery event will be listed. Click on JS link to take you straight to the JQuery code.
Okay so I am editing a page here support.tophat.com and at the bottom left of the screen there is a little widget button that opens up a handy little support ticket window upon click. This is the ZenDesk widget that is provided by zendesk to provide a service for customers to submit support tickets to the ZenDesk back end.
What I'm trying to do is to include an "onClick" call to a function on some arbitrary link or button elsewhere on the page that will trigger the support ticket window to display, without actually having to click on the button in the bottom left.
It would seem that this is through an iframe, and I have already tried the jQuery .click() function to no avail... After inspecting the element, and seeing what function gets fired when a user clicks on the button, I get a long string of disgustingly cryptic JS that has no real outlined functions.
My end goal is to open the support window after clicking on, lets say, a link that has a trigger like if I click on a link, and set the onClick="trigger()" which fires the window to open in the bottom left.
If you would like me to include the block that chrome shows be when the event is fired let me know, but it is NOT pretty and mods might not like if i put in code that looks like that.
Using jQuery (which is included in the Zendesk Help Center), you can do this:
$('#launcher').contents().find('.Button--launcher').click();
I tested it out on your site in the Chrome console, and it activates the widget.
I found info relating to this answer here: IFrame button click event
Info on jQuery's .contents(): https://api.jquery.com/contents/
THIS:
$zopim(function() {
$zopim.livechat.window.show();
});
If you wanna call it from HTML:
<a href="javascript:$zopim.livechat.window.show();">
You can also check their API docs: https://api.zopim.com/files/meshim/widget/controllers/liveChatAPI/Window-js.html
zE.activate(); Worked for me when used jQuery
When I'm in a complex website such as Facebook and write a comment and push Enter there is an event fired that starts everything. Can I somehow observe which events are fired and when (and eventually somehow trace/step them)?
So in general, I'm looking for a tool capable debugging a website in this way. Is there any way?
If you are using devtools of Google Chrome, there is an Event Listeners tab that could help. See the attached picture.
There, I have selected the "Post your answer" button of this very question and as you can see, the EventListeners tab shows that there is at least an onSubmit event listener attached.
One of the debugging tool that i am using and works well for me is firebug in mozila.
you can read about firebug Here
With fire bug you can notice everything like webpage is making how much ajax call, which script is binned with which element. even you can also easily debug the css and design elements. firebug will help you more to debug the website on browser.
Using Chrome , I need to debug the java-script handler that is executed when a specific button is clicked, without searching the java-script files.
Can I use Chrome's "inspect element" for the button to find java-script handler?
Or, is there a recommended tool?
How to achieve this?
p.s: Think of a complex app within a website, I need to debug the logic behind some buttons..
When you open the developer tools on the element tab if you select the element to debug you will see at your right a tab Event Listener. It is with the Styles tab. there you can inspect the event listener. In my opinion the best way is to add break points on the sources. You'll see.