Why is trigger('click') not working? - javascript

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.

Related

ready function triggers in every page

I have a rails app, if the user is not logged in, I am redirecting to a page, which has one br tag with a class. Like this
<br class="logged">
In the Javascript on ready of that function, I am triggering a modal as follows.
$(document).ready(function(){
$('.logged').ready(function(){
$('#open-login').click();
});
});
This is working fine, except this modal is getting triggered on every page of the app. I mean that br tag is there in only page of the app, how it is ready for every page is what I don't understand. If anyone can tell what went wrong with my approach, it would be of great help.
ps: It's rails application
You can try this:
$(document).ready(function(){
if ($('.logged').length > 0)
$('#open-login').click();
}
});
Into if condition you can declare an element of specific page and in only that page you can execute an action.
The jQuery .ready() method can only be called on a jQuery object matching the current document. Attaching it to a $('.logged') selector still makes its handler function get called when the document is ready - it doesn't care about the selector.
MarcoSantino's answer will work for your needs, although you may find it cleaner to add the logged-in class to the body tag instead of inserting a new br tag, and then use the following in your JavaScript:
$(document).ready(function(){
if ($(body).hasClass('logged-in')) {
$('#open-login').click();
}
})

hiding a link after first click in html.disable link.in html.java

I am passing some values through a link "Like",I want to set the property such that the link is hidden or disabled if it is clicked once..
have tried this code
onclick="this.style.display='none';"
But it does not seems to be working.Please help as where to put the js or any other alternate method..
Like;'
As it has been said this functions is better to be implemented with javascript.
First assign a valid id for the link and follow this:
//create a function for the click like:
$('#buttonId').click(hideButton);
Afterwards, in your javascript code:
function hideButton(){$('#buttonId').css({'visibility':'hidden'})};
Remember to import jquery library and import the .js when your code has been displayed if you does not use a .ready function.
Edit: note that in the way previously exposed you will still get the box where the link was, but it is displayed hidden.
If you need to pass some values as well as hide element i thing you should use ajax. As you are passing a url to href attribute it will redirect you to that page. A java script function can work better. Call a javascript function on onClick event like
Like
<script>
function hide(){
// ajax call to send parameter
// hide element
}
</script>
Define a class for anchor tag , and user ajax post to send the request and then you can just hide the element with hide().
See below example:
$(".like").on("click", function (e) {
e.preventDefault();
$.post(this.href);
$(this).hide();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" href="like1?sellerid=-1">Hide me</a>

Trying to load another html page into a div using jQuery. I looked at other posts but mine still isn't working

Please have a look. EDIT: here is a link to a fiddle for the entire code: http://jsfiddle.net/e77aqubx/
This is a section of the jQuery (everything above it seems to be working fine). I am trying to get portfolio.html to show up in the #portfolio div (which is not visible until you click the link for it). The portfolio.html is in the same folder in the directory so I don't think I have to worry about the link.
$("#portfolio_link").click(function(){
$(".header").hide();
$("#about").hide();
$("#portfolio").show();
$("#portfolio").load("portfolio.html");
});
I have a div set up for it in the html as
<div id="portfolio">ooh blah dee</div>
In the jQuery I also tried:
$("#portfolio").show(function(){
$("#portfolio").load("portfolio.html");
});
Have you considered using IFrames? If I understand your issue correctly you can simply change the display of the element on action using something like .toggle()
example: JSFiddle
Edit:
As far as the current code, i would really need to see some more info as your code appears, at a simple form anyway, correct. Can you provide your file structure, or the results from the networking tab in dev tools when you run the event? Or even give this a shot on your .load():
$( "#portfolio" ).load( "portfolio.html", function() {
alert( "Load was performed." );
});
However it's important to remember that .load() is an ajax call so everytime you run your display method you're rendering a view via ajax instead of that one time iframe.
Hmm, the problem might be that the #portfolio_link element is created in the DOM after you attempt to attach the event listener. This could be solved by attaching the event listener to the 'body' tag and filtering down to any click events on children matching the '#portfolio_link' DOM selector.
Try this:
$('body').on('click', '#portfolio_link', function(){
$('.header').hide();
$('#about').hide();
$('#portfolio').show();
$('#portfolio').load('portfolio.html');
});
Jquery works in chain.
Also try first to load and then hide.
Can you use Firebug or Chrome devoper tools to see
what is happening with DOM?

Dojo script simulate click on link with specific ID

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/

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