I have a link in rails that's a remote link (i.e. submits through ajax)
The link would be like so:
<a href="#myurl" data-remote="true">
<div class="switchIt switchOn">my linked item</div>
</a>
When the link is clicked - nothing on the page happens, and that's the success.
So I've added an effect on .mousedown, for the div's style to change (a simple .removeClass and .addClass). I need to it be mousedown, rather than click (which is more like mouseup) because of the effect I'm trying to achieve.
The problem I'm running into now, is that after clicking the div, the link no longer "submits" the url at all. Its as if mousedown has blocked it.
I could make the link remote through a jQuery ajax call and fix this nonsense - but I'd rather let rails handle it as it has been, and does elsewhere in my site.
Any ideas what might be causing this issue?
Updated with script...:
$('body').delegate('.switchIt', 'mousedown', function(){
$(this).toggleClass('switchOn');
$(this).toggleClass('switchOff');
});
Related
I am trying to programmatically trigger a click on a wordpress page on a <a href="#"... tag which after clicked shows a div with all categories... (the div is not hidden it gets created after clicking the button)
When trying to find the click event behind this element on chrome debugger DOM in event listeners the only event attached
to this element is flatsome.js?ver=3.12.1:109
the handler is f(t) ............
using jQuery Audit, I can see the handler definition, then there are many functions like !function(t)... because it is minified.
I tried to use jQuery click, mouseup, mousedown events (also with trigger('click...') ) with no success, it gets the object, doesn't show an error, but never shows the filter menu.
Is there a way to just emulate the physical click as if it was done with the mouse? then I wouldn't need to call the function, I can't seem to find what function is behind the click event...
Thank you in advance
Dario
Have you tried the following code?
Using jQuery:
$('your-query-selector').trigger('click');
Using JavaScript:
document.querySelector('your-query-selector').click();
What is the best method to handle a AJAX get if there is no javascript enabled on browser?
For an example, a simple click on image thumbnail directs you to a controller that returns image details and zoomed photo.
I wanted to do this with ajax and show the bigger picture with details on the same page.
But I don't know how to implement backup method when user doesn't have javascript.
Can i delegate click method on anchor container and then somehow stop bubbling? And then when there is no javascript does the anchor gets triggered? The details won't be on same page, but atleast they will show.
Can i delegate click method on anchor container and then somehow stop bubbling?
Basically, yes. Have the link around the image (or whatever):
<a class="image-link" href="link/to/the/details">...</a>
And handle it in JavaScript:
$(document.body).on("click", ".image-link", function(e) {
// We're handling it with ajax, don't do the default action
// (which is following the link)
e.preventDefault();
// ...do the ajax stuff...
});
If JavaScript isn't enabled, the handler isn't hooked up, and the link gets followed normally. If JavaScript is enabled, we prevent the default action, which prevents the link being followed, and do the ajax instead.
i'm having trouble in chrome opening the popup for the file upload of a file input type.
As you can see here: http://jsfiddle.net/cavax/K99gg/3/, clicking on an elements can trigger a click on the file input, but for example hovering a element wont trigger a click on the input.
$('#test').on('click', function(){
$('#upload').trigger('click');
});
$('#test').on('mouseenter', function(){
$('#upload').trigger('click');
});
In the real life i'm having this trouble because in a web app i'm loading throw ajax a content witch has inside an input file.
At the end of the load the popup file must open, but there is no way to get this works on Chrome (workign on FF).
The problem i guess is that the action is not generated by a mouse click (hover, timeout etc) so chrome wont trigger the fileupload.
I've also tryed this: http://jsfiddle.net/cavax/K99gg/7/, so click on the element, wait then trigger the click but nothing, because there is the "settimeout" in the middle of the click and the trigger :(
$('#test').on('click', function(){
setTimeout(function(){
$('#upload').trigger('click');
}, 3000);
});
if you remove the delay: http://jsfiddle.net/cavax/K99gg/8/ it works
Any idea to get this work?
If I remember correctly, mouseenter and mouseleave are specific to IE, not standard events. Maybe they were extended, but don't think they became a standard. So the event itself may generate you some problems.
To resolve this you can use a lib (like jQuery for example), that treats the browser differences (or you can check the code there and take what you need).
Second way... try mouseover... it worked better (again... didn't work with them for a while so things may have happened, but this is how I remember them to be).
There is no way to trigger click event of input file type, because of a security reason.
You may try a hack of this by setting your button/div position to absolute and top to -100px
It means positioning it outside the viewport by setting above style make it works.
But for mouseenter and mouseover i don't think it's going to work!
Edit:
Moved input outside the viewport and target click event
Example on click
Side note: Right now click occurs 2 times as you have written
$('#upload').trigger('click').click();
You just need
$('#upload').trigger('click'); // $('#upload').click()
unless you want it to fire more than single time.
Currently trying to fix an issue with a WordPress site. The site has the ATBar plugin installed which is an accessibility plugin with a toolbar at the top of every page. This toolbar overlaps the normal Wordpress Toolbar and therefore I have added some CSS to the WP toolbar to push it down a bit:
top: 40px;
As 40px is the height of the ATBar. Unfortunately when the ATBar is closed (via a button on the toolbar) the gap is left at the top.
I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on page load. Therefore, I've tried only binding the event when the window is ready, as opposed to the document, but no effect either!
The site is here: http://simp.daveclarke.me/, you will see the two bars if you visit this page.
Any advice appreciated
I've tried binding a click event to the ATBar close button but it has no effect, possibly because the ATBar is dynamically loaded with JS on pag
I think it's not a problem with loading the JS dynamically but the fact that the wordpress bar has an !important in the CSS top attribute. If you can remove the !important tag and then do something like:
document.getElementById('at-lnk-atkit-unload').addEventListener('click', function(){
document.getElementById('wpadminbar').style.top = "1px"
});
That should fix the issue
Can't you do something like
$('#at-lnk-atkit-unload').click(function(){ //when ATbar close btn is clicked
$('#wpadminbar').css({ "top": "0"});
});
try to use $('#at-lnk-atkit-unload').on('click', function(){ ...
Answering my own question..
Managed to fix this in the end, by tweaking their JS a little.
Rather than importing the JS source from their server, I made a copy at my end and added the addEventListener call that #emilioicai suggested just after the ATBar was rendered. This adds the event listener and functionality required.
Thanks!
I think, that problem lies in that: ATBar loaded after your code, so event listeners didn't attach.
And if you don't want to copy foreign code to your server (which is not appropriate decision, 'cause it will not work all the time, API of ATBar may evolve and so on), you may use timeouts
setTimeout(yourfunc,0); //if loading takes a lot of time, then
// change 0 to 50 or whatever
Or just use jQuery .on function (or even deprecated .live function)
This is the privacy button that shows on your status updates on your Facebook wall.
When you click on that icon, you get these options.
I am trying to make a Greasemonkey script to automatically click on one of those selections. My script works fine, with the only caveat being that I have to hover my mouse over that icon before running the script, or else it won't work. I don't even have to actually open the dialog by clicking on it, I just have to move my mouse over the icon.
So I'm trying to find a way to use Javascript to hover the mouse over that icon, or click on it, so that I don't have to manually do it. I've tried the .click() and .trigger() methods, but they don't seem to be of any help here.
I think this is the code for the button.
<a rel="toggle" data-tooltip="Your friends; Except: Restricted" data-length="30"
data-label="" aria-haspopup="1" href="#" ajaxify="/ajax/timeline/show_story_options.php?profile_id=707236195&story_fbid=10150597306856196&story_row_time=1331626509&permalink=1&story_div_id=stream_story_4f6620b08c1851b03797773&story_dom_id=stream_story_4f6620b08c1851b03797773&small_icon=1"
role="button" class="uiSelectorButton uiButton uiButtonSuppressed uiButtonNoText"
tooltip-alignh="right" title="" data-hover="tooltip" id="js_1"><i class="mrs defaultIcon customimg img sp_4uwvrx sx_bff9bf"></i><span class="uiButtonText"></span></a>
I tried using jQuery to get the url specified in the ajaxify tag, because I noticed that that's one of the things that happens when I hover my mouse over the button. Even though I can successfully GET the page, it doesn't seem to make any difference either.
How can I use Javascript to make this button do whatever it does when I manually hover my mouse over it?
I think what your after is something like the do click function found int the link below you could mix in with some query.
http://www.codeproject.com/Articles/17241/Capturing-the-Enter-key-to-cause-a-button-click
I'm in a hurry, so I can't in-depth with my answer, but I thought dropping this might be of some help.
There is this module called Selenium that lets you use a browser with javascript to do whatever you want on a webpage.
Guide: https://www.browserstack.com/automate/node
Module: https://www.npmjs.com/package/webdriver
Another Module: https://www.npmjs.com/package/selenium-webdriver
I know this is not a direct answer, but hopefully, it comes in handy.