Dojo script simulate click on link with specific ID - javascript

is it possible to write script in DoJo that will automatically click on link with specific id? I have link:
<a href="overlay1" id="callMe" />
When you click on this link some dojo library will generate overlay with specific video etc. this is not important. So I need script that will call this link when you open page. How will it looks? So:
On load page find link with id callMe, simulate click on it.

You can use dojo/dom to select the link by it's ID and then call the links click() function
code example:
require(['dojo/dom', 'dojo/domReady!'], function(dom){
var callMe_link = dom.byId("callMe");
callMe_link.click();
})
working example: http://jsfiddle.net/kagant15/Ls41gecu/

Related

Why is trigger('click') not working?

I have a simple anchor element like below:
YahOO
Below is JS code:
$(document).ready(function() {
$(".foo").trigger('click');
});
Why is the click code not getting executed?
http://jsfiddle.net/L7vaLrwk/
Instead of using .trigger() try using .click() and target the element by type and classname.
HTML
YahOO
Javascript
$(document).ready(function() {
$('a.foo')[0].click()
})
You can try this way,
HTML
YahOO
JavaScript
document.getElementById('fooTest').click();
Added an id to the link to uniquely identify it, and using plain javascript to simulate a click.
Have replaced google.com with example.com as google doesn't open inside a iframe
You can check working example here on jsFiddle.

Loading a hyperlink opened in a div - in the same div

Following on my from my previous question here:
How to show a page by default on page load
I'm basically using jQuery to load links in a div - this works perfectly. However, what I want to now achieve, is when one of the pages (opened in the div) has a hyperlink, how can I open the hyperlink in the same div the page sits in now?
Let's say I have a menu:
Home | Service | About
If you click service - it loads the page inside a div - awesome.
But let's say service has a hyperlink to another page (on the same domain/setup) - currently using my code referenced in the question above, the link just opens in a new tab... This isn't the behaviour I want.
Here is the code:
$('[data-target]').click( function (e) {
$.get($(this).attr('href'), function(data){
$('#halloffame').empty();
$(data).find(".partner_body").appendTo("#halloffame");
});
e.preventDefault(); // prevent anchor from changing window.location
});
$.get( "pages/accounting-software/", function( data ) {
$('#halloffame').empty();
$(data).find(".partner_body").appendTo("#halloffame");
});
This lets me open hyper links in the div "halloffame". But it doesn't control the links in the pages - even if I use the same code on the master page:
<a data-target="#halloffame" href="pages/returns/">
If anyone can point me to where I'm going wrong, I would appreciate it :)
Have an awesome Friday, folks!
Your event listener is bound the the currently existing DOM, when you add new elements(from your ajax call) you need to either bind your event listener to the new elements aswell or use deferred event handling(eg jQuerys on).
See this answer for more details

jQuery mobile on click function

I am just starting with jQuery Mobile I want to create popup.
I found the following example on the jQuery Mobile site:
Open Popup
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
Link button
Link button
</div>
That works very well. What I need now is to change that from an href to an onClick function like this below:
Open Popup
Its not working like that. What should I put to onClick to make it work?
Really appreciate your help.
You can use as below:
Create javascript function :
function openPopUp(){
$('#popupBasic').popup('open');
}
call openPopUp() in click event as below :
Open Popup
JSFiddle

Executing an asynchronous AJAX call when a link is clicked, and then following the link

We have a link on our page of which we want to track the usage. Currently, it's not really a link. It's a <div> tag with a data attribute containing the destination and a click handler bound to it.
When clicked, we send data to Google Analytics, and then trigger a page load with window.location = url after a short delay, so that we're sure that the data has gone through.
This approach works, but it has a major flaw: the clickable element is not actually a link, and behaves like one only in part. For example, I can't use my mouse wheel to click on it and have the link open in a separate tab (as you'd expect), or I can't right click on it and get a menu that is contextual to the link (because it's not a link).
Is there a way to use an <a> tag and get the behavior of a real link, intercept the click event, interact with Google Analytics and then follow the link normally after a small delay (to make sure the data goes through), without having to redirect ourselves and without having to lose functionality?
You can use event.preventDefault() to prevent the link from being followed:
$('a').click(function(e){
e.preventDefault();
var href = this.href;
setTimeout(function(){
window.location = href;
}, 2000)
});
With new HTML5 standards, couldn't you wrap your <div> in an <a> tag? Then you could do:
Inline:
<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);">
<div id ="blah"></div>
</a>
jQuery:
$('gaEvent').on('click', function(){
_gaq.push(['_set', 'hitCallback', function(){
window.location = url; // you'll still have to define this somewhere
}]);
_gaq.push(['_trackEvent','category','action','label']);
});
I totally referenced this SO post - Track event in google analytics upon clicking form submit

How can I activate an internal page link with Javascript?

How do you activate a link when the page loads using javascript?
I am trying to open a lightbox when the page loads, here is the link I am trying to activate.
Replay Intro
All you need to do is
<script type="text/javascript">
$(document).ready(function() {
$("#linkID").bind('click',function()
{
$(this).facebox();
})
$("#linkID").click();
})
</script>
using vanilla javascript that would be to use window.location.href = 'your_link_here.html'
Using your lightbox, the code could be different. Please post a link to the lightbox you are using or show us some sample code. Usually they come with API's or documentations on how to use them.
Do you just want to trigger a 'click' event on the <a>?
That would be something like this:
$('#home_video').click();

Categories

Resources