I wanted to test chrome to see if it can show me what method will be running for onclick registered event.
So I wanted to see which JS function execute shen people upvotes a question :
http://i.stack.imgur.com/3mbce.jpg
But I couldn't found the actual code.
is it possible with chrome to find which JS executes when "onclick"?
edit
I could use the console to do it with :
$.each($(".vote-up-off").data("events"), function(i, e) { // this will work till jq 1.8
console.log(this)
});
and here is our friend:
But hey ! , I want chrome to do the work :-)
One potential insight might be to enter this in your console and press return:
$('.vote a').data('events').click;
jQuery stores all of its events which are bound to an object inside of the data() object; so if you want to view a particular event binding, this is your place to look. Console will return an object. Expand handler --> <function scope> --> Closure and you can now see all of the associated JavaScript around this click event.
some workarounds available
U may try this bookmarklet concept
Visual Event
Add bookmarklet to you browser bookmarks(enable bookmarks bar show always) and click on bookmark while on the page u want to debug
PS: it is for Jquery
Related
I am having a problem on a WordPress site. I have a function which slides down a certain <div>. It is:
jQuery(function($){
$(document).on('click','.tb_usertask_title',function(){
var title = $(this);
var key = title.data('key');
var msg = $('#tb_msg_'+key);
msg.slideDown('fast');
}
});
After executing this function, the <div> slides up again immediately. I think this might be due another script, but I have absolutely no idea how to find which function does this. Is there any way of finding this out? Things I have tried:
Adding breakpoints in my function. This showed me that the folding up happened outside my function.
Using Firebug to break on HTML change. This however redirected to jquery.js, but I did not know how to find out which function triggered the jQuery.
Using Firebug to list the events of my onclick event, but this only showed my function.
These didn't work for me. I also searched for a way to do a function backtrace in Firebug, but without any success.
Use unminified version of jQuery (just for the test and because its more easy to debug).
Look for the dispatch function.
Put a breakpoint in the function where there is an apply usage.
After the code breaks use the F11 to navigate to the binding function.
The following code gives me an alert with nothing but a # symbol inside it. Why?
EDIT: I should note that the code is inside a jQuery .click event...if I place it outside of that, it works properly. Here is the fuller code:
$('#continue').click(function(){
var _href = $("#continue").attr("href");
alert(_href);
});
Continue
EDIT2: This all works fine in jsfiddle. But in the xcode iphone simulator I just get #.
Judging by only the code you typed, probably the code runs too early. Try wrapping the JS in
$(function() {
// your code here
});
Or
$(document).ready(function(){
// your code here
});
Update:
Well, since it's an iPhone simulator, it changes things. Remember, nobody can help you unless you give all the details of the problem, no matter how much experience they have.
Did you try the touchstart / touchend / tap events instead of click? As far as I know, Apple has been having problems with the click events. Also, click events on mobile devices will have a slower response (a delay of approx 300ms if I remember well) so you're better just using touch specific events.
What are you building? Is it a mobile web app or? Will it run in a standard mobile browser or something like PhoneGap etc?
Update2:
Ok. It works as long as the code is not called on Click. This eliminates the possibility of another piece of code replacing your "href" with another value because that code would have to be inside your $('#continue').click(function(){ }); block.
The click event is simulated on a touch phone, that's why the touch events are faster (they are native) and less likely to cause problems. You should also make sure that you return false there and not follow the link, that might be what's replacing your "href".
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#continue').click(function(e) {
var _href = $(this).attr('href');
alert(_href);
e.preventDefault();
return(false);
/*
the return is legacy code, used by some
browsers to detect if current event handler
is braking default behaviour
the e.preventDefault() function is the jQuery
way to do it
*/
});
});
</script>
Continue
Without this line the link is followed and a refresh occurs killing the current script.
https://github.com/jquery/jquery-mobile/issues/3777
I'm making a script to open all links on a page when I click a button in my toolbar. What exactly is wrong with the following code?
function performCommand(event) {
if (event.command == "open-tests") {
$('a').each(function(index, elem) {
window.open($(elem).attr('href'));
});
}
}
As far as getting to the function, it does this fine, as if I comment out the if statement and put in a simple alert, it will work as expected. However the above code does not work.
There is no standard command property of the event object provided by jQuery.
Why do you think there is one?
Did you disable your PopUp Manager or are you using any other kind of adblocker / secure plugin?
Despite that Safari refuses to window.open when called in a callback
more to read:
http://jensarps.de/2009/08/21/safari-and-window-open/
I asked How can I make the “Preview Post” button save and preview in the same window? on the Wordpress Stack Exchange, but this may be a better question for Stack Overflow as it is more directly related to coding.
Wordpress has a box that allows you to save, preview, and publish your blog posting:
The "Preview" button is actually a link styled as a button:
<a tabindex="4" id="post-preview" target="wp-preview"
href="/?p=67&preview=true" class="preview button">Preview</a>
My problem is that I can't seem to figure out how to get that link to open in the current window. Notice the target="wp-preview" part. I'm trying to get rid of that part, but I think there may be another function bound to that element because I really can't get it to open in current tab / window, even after unbinding it and removing the target attribute.
I'm running the following code as part of a plugin (you can see more info on how to run this as a plugin below), but it is also possible to copy and paste this into Chrome or Firefox's console to test this out yourself without even modifying Wordpress. Please note that when testing you'll need to use jQuery instead of $ in your own functions as Wordpress uses the noconflict method, however the code below is working fine as is.
//select the node and cache the selection into a variable
var $node = jQuery('a.preview');
//add a 1px dotted outline to show we have the right element
$node.css('outline','1px dotted red');
//show current target
console.log($node.prop('target'));
//show if anything is bound - nothing is for me ('undefined')
console.log($node.data('events'));
//remove anything bound to it
$node.unbind();
//set target to _self (current window), just in case
$node.prop('target','_self');
//the remove the target attribute all together
$node.removeAttr('target');
//clone the node
var $clone = $node.clone();
//change the text to new
$clone.text('new');
//remove target from clone
$clone.removeAttr('target');
//unbind the clone
$clone.unbind();
//insert the clone after the original node
$node.after($clone);
//show current target - now shows undefined for me
console.log($node.prop('target'));
//show if anything is bound - still 'undefined'
console.log($node.data('events'));
This is how you would work the code into a theme or plugin:
// set up an action to set a function to run in the wp admin_footer
add_action('admin_footer','my_admin_footer_script',9999);
Here is the function that adds the javascript:
//this function can then be used to add javascript code to the footer
function my_admin_footer_script(){ ?>
<script type="text/javascript">
jQuery(function($){
(above js code here)
});
</script>
<?php
}
This is the result I end up with. If I click the "test" link it will open in the same window. If I click the Preview link it still opens in a new tab.
ps: I'm using the method from Things you may not know about jQuery to check for bound events, and I didn't find anything bound, and I believe Wordpress primarily uses jQuery so I don't think this would be bound with another event handler.
You could try this:
jQuery('.preview.button').click(function(e){
window.location.href = this.href;
return false;
});
Works from the Chrome Inspector.
The syntax is right but the timing is important. If you just do the first part but not the second part it is possible that this will not work because it seems there is a delay with the event that binds to this element.
If you include the second part as well, that waits for 500ms after the page is loaded to run, it seems that it works as expected.
add_action('admin_footer','preview_same_window');
function preview_same_window(){ ?>
<script type="text/javascript">
jQuery(function($){
//first part
jQuery('.preview.button').unbind().removeAttr('target');
//second part
setTimeout(function(){
jQuery('.preview.button').unbind().removeAttr('target');
},500);
});
</script>
<?php
}
Using JQuery 1.2.6, testing from Firefox 3 and IE7. I have a very basic bit of JavaScript to reload a captcha image. In my JS file, I have:
var Captcha = {
count: 0,
Refresh: function(){
// Concatenate "count" to force a URL change, which forces the browser to reload the image
$('#Captcha').attr('src', 'Captcha.aspx?' + Captcha.count);
Captcha.count++;
}
}
My link looks as follows:
Try a different image
When I click on the link, I get a JavaScript error. From the Firebug plugin for Firefox, it says "Captcha.Refresh" is not a function. So, I go to my Firebug console in the same window, and type
Captcha
And I get an "object" in the response line (as expected). I then type
Captcah.Refresh
And I get a function() in the response line (as expected). I then type
Captcha.Refresh()
And it executes the function, updates my captcha image, everything is dandy. If I go back and try the link again, it still does not work. If I type in Capcha.Refresh() into the console without ever hitting the link, it also works fine. What on earth am I missing here? Clearly the JS is getting loaded, but why doesn't that function call work?
The problem arises because you have an element with an id of Captcha, and a global variable with the same name. IE traditionally introduces a global variable for every id attribute. FF doesn't... but pretends it does in certain situations for compatibility with IE. In this case, the click handler sees Captcha as an element rather than your object.
Work-arounds:
Change the id of the Captcha element.
Or, change the name of your global object to something other than Captcha.
Or, use Pim Jager's technique to move interpretation of the handler into a context where the global Captcha variable has been overwritten with your own.
Or, change your onclick attribute to:
onclick="window.Captcha.Refresh();"
...this will force lookup of the Captcha property in the context where it has been replaced by your global variable.
(all of these tested in IE6 and FF3 - i recommend Pim Jager's answer)
Try sepperating the HTML and javascript:
$('#ChangeCaptcha').click(Captcha.Refresh);