I having trouble detecting clicks in an iframe(iframe id is '#ptifrmtgtframe' and tag id is '#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH'). I have tried:
$('#ptifrmtgtframe').click( function() {
$('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').click( function() {
console.log("clicked");
});
});
I have also tried
var htmlDocument = document.querySelector('#ptifrmtgtframe').contentDocument;
$(htmlDocument).contents().find('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').on('click', function() {
console.log("clicked");});
Iframes are a bit different in that you have to load them and get their contents before you can do anything with it:
$('#ptifrmtgtframe').on('load', function() {
var iframe = $(this).contents();
iframe.find('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').click( function() {
console.log("clicked");
});
});
Related
I am trying th get event when iframe document title changes.
This is my code
var iframeNode = $('<iframe>', {
src: url,
frameborder: 0,
style:"display:none",
scrolling: 'yes'
});
...
iframeNode[0].onload = function() {
$(iframeNode[0].contentWindow.document.title).change(function () {
console.log("Title has changed");
});
}
However, when iframe document title changes I don't get event.
I also tried :
$(iframeNode[0].contentWindow.document.head, "title").change(function () {
console.log("Title has changed");
});
but result is the same. How to do it?
Its my button:
<div id="page-wrapper"></div>
$("#index2").click(function(){
$(document).ready(function() {
$('#page-wrapper').fadeOut('fast', function(){
$('#page-wrapper').load("index2.php", function(){
$('#page-wrapper').fadeIn('fast');
});
});
});
});
Its successfully work and no problem but this does not work if the page refreshes
And that's when you refresh the page on the www.domain.com/index.php#index2 page
Now how can i load again index2.php to #page-wrapper on refresh?
It would be better approach to use hashchange event to handle # anchor changes. Try like this;
$(window).on('hashchange', function() {
var hash = window.location.hash;
var loadUrl = hash.substr(1) + ".php";
$('#page-wrapper').fadeOut('fast', function(){
$('#page-wrapper').load(loadUrl, function(){
$('#page-wrapper').fadeIn('fast');
});
});
});
To fire hashchange event at first page load you can try;
$( document ).ready(function() {
if (window.location.hash) {
$(window).trigger('hashchange')
}
});
So I'm using some parts of gentelella and there is a file custom.js. I have some problems with this file because some parts works and other don't.
The problem is with this method:
$(document).ready(function() {
console.log("custom.js inside document ready");
$('.collapse-link').on('click', function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
It write "custom.js inside document ready" but when I click nothing happened.
And if I look into the HTML I have the same classes as in the JS:
it might be that on document ready these specific elements are not found.
In general a best practice is to delegate the events to the document, like this:
$(document).ready(function() {
console.log("custom.js inside document ready");
$(document).on('click', '.collapse-link' /* <--- notice this */, function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$(document).on('click', '.close-link' /* <--- notice this */, function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
You have written the click event on the a tag. In general functional specific tags like submit button, a tag will do their default functionality on click. So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere. We can supress the default behaviour of these kinds using e.preventDefault(). Here e is the event. So change your function to
$('.collapse-link').on('click', function(e) {
e.preventDefault();
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
And
$('.close-link').on('click', function(e) {
e.preventDefault();
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
This is my code:
Full code here: http://notepad.cc/casperjsstack1
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
var el = $('#giftMessages.noCard');
el.onclick();
});
});
});
Look at the picture: I want check No Gift Message
I try so much method but all false
Code HTML page here: http://notepad.cc/casperjsstack1_html
Thank you !
Have you tried click()?
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
this.click('#giftMessages.noCard'); // Click the radio button.
});
});
});
Try this.
//jQuery version using evaluation page context
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.evaluate(function() {
$("#giftMessages.noCard").prop("checked", true).trigger("click");
});
});
});
//Casper version using click
this.thenOpen('https://www.1800flowers.com/webapp/wcs/stores/servlet/FDDeliveryOptionsDisplayCmd', function() {
this.waitForSelector('#BP-DeliveryCardMess_1', function() {
this.click("#giftMessages.noCard");
});
});
I have appended a iframe with youtube embed url in a div which id is div1. I want to do something when click happened on iframe.
i am using this jquery code but it is not working.
$('#div1 iframe').bind('click', function(){
alert('clicked on iframe');
});
I'm not sure whether you have id for iframe or not. but you can try to catch the click even of the document in the iframe:
document.getElementById("iframe_id").contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
Though this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:
$('#iframe_id').bind('click', function(event) { });
function iframeclick() {
document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
document.getElementById("theiframe").contentWindow.location.reload();
}
}
This we can use achive with jquery and its is also possible with javascript
$('.inner iframe').bind('click', function(){
alert('clicked on iframe');
});
Here is a solution that is vanilla JS - and resolved a similar issue for me where I needed to close some dropdowns on the parent if the iFrame was clicked
public static iFrameClickHandler = {
iFrame: undefined,
mouseOverIframe: false,
mouseOver: function() {
this.mouseOverIframe = true;
},
mouseLeave: function() {
this.mouseOverIframe = false;
window.focus();
},
windowBlur: function() {
if (this.mouseOverIframe) this.fireClickEvent();
},
fireClickEvent: function() {
// do what you wanna do here
},
init: function() {
this.mouseOver = this.mouseOver.bind(this);
this.mouseLeave = this.mouseLeave.bind(this);
this.windowBlur = this.windowBlur.bind(this);
this.iFrame = document.querySelector('class/id of your iframe wrapper');
this.iFrame.addEventListener('mouseover', this.mouseOver);
this.iFrame.addEventListener('mouseleave', this.mouseLeave);
window.addEventListener('blur', this.windowBlur);
window.focus();
},
destroy: function() {
this.iFrame.removeEventListener('mouseover', this.mouseOver);
this.iFrame.removeEventListener('mouseleave', this.mouseLeave);
window.removeEventListener('blur', this.windowBlur);
}
}