I want to implement simple pub/sub pattern with jQuery.
So I add some code like this on parent page:
Parent page:
$(document).bind('custom', function() { ... });
And it's working fine when I trigger on same page like this:
Same Page:
$(document).trigger('custom'); // Working.
But when I trigger this on popup page, it's not working.
Popup page:
opener.$(document).trigger('custom'); // Not working.
$(opener.document).trigger('custom'); // Not working.
If I bind event to <body> element, it works find.
Parent Page:
$('body').bind('custom', function() { ... });
Popup Page:
opener.$('body').trigger('custom'); // Working.
Why binding to document is not working on Popup?
As #11684 said, the answer to make it work is:
opener.$(opener.document).trigger('custom');
The #Rory's answer:
$(opener.document).trigger('custom');
is not working because the popup's $ doesn't have the event handler of opener.document.
And this one:
opener.$(document).trigger('custom');
is not working because the document is popup's document so it's different from the opener.document.
And lastly,
opener.$('body').trigger('custom');
is working because the opener's $ has event handler and the argument(body) is just string(not a object like document).
You need to place the whole opener.document in to a jQuery object. Try this in the popup:
$(opener.document).trigger('custom');
Related
Is it possible to make javascript click on a div when the div exists in the browser?
For example, the script could refresh a webpage until a div shows up (with content), and than if the div is clickable, let javascript click it (or just follow the link, if there is one).
using jquery . use $(window).load(); function which attach all event after body load all content in web page . see below code : here you can read document of load();
working example on fiddle
<div id="yourDivId"></div>
$(window).load(function () {
$(document).on('click',"#yourDivId",function () {
// Some code here
});
});
Yes, it’s possible.
You can add a click event handler function using jQuery as mentioned above.
To fire the click event of that div, do
$("#mydiv").click()
this is the correct one
<div id="mydiv></div>
$(window).load(function () {
$(document).on('click',"#mydiv",function () {
// Some code here
});
});
I'm trying to use AJAX loading a set of sucessive pages in a main page, as I show you in the next picture:
I learned (thanks to this community!) to call other pages' content, by assigning the load() function to the onclick event of a button, like this:
$(document).ready(function() {
$('#btn').click(function() {
$('#result').load('./poi-data-no-heading.html');
});
});
But what if I have one button with id="btn" on every page? The functionality of any button with that id will be the same always, because (I think) the document.ready is not triggered when I use the load() method, so it's never replaced with new functionality.
E.g. initial functionality should be navigate from page 1 to page 2, and when page 2 is loaded, the functionality should be to navigate from page 2 to page 3.
As Js developer, I would do the following:
<!-- In the HTML file -->
<button id="btn" onclick="loadContent()">Load</button>
<div id="result"></div>
/* In the JS file */
function loadContent(){
/*the code to retrieve content*/
$('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
}
This way I could assign the functionality to every button, no matter what's the ID or if the document.ready is triggered. But mixing Js with JQuery is not an option... So, how do you think I should manage to do something similar with JQuery?
Thanks in advance.
P/d: Here is a useful fiddle I used to try ideas: http://jsfiddle.net/gal007/vkcug7t7/1/
You could use the on() event from jQuery, which can listen for events on elements dynamically rendered (you can't do that with the click() method). So in this case you have to listen to the event on a parent element, one that doesn't change with the load method. On that button, use an HTML5 data-* attribute to define the id that you wish to load.
HTML:
<btn id="result" data-load-id="1">Load</btn>
Javascript:
$('#container').on('click', '#result', function() {
var id_to_load = $(this).data('load-id');
load('/url?' + id_to_load);
});
I've updated your fiddle : jsfiddle
i have two windows.
One parent and the second an iframe. When a link is clicked inside of the iframe, i am able to effect the element in the parent window, but only certain things.
I am able to add Class without any problems, but when i want to trigger a click then it won't work.
Here is the working code for adding class:
parent window:
Name1
Name2
Name3
Name4
Name5
Iframe:
<div class="page5">link</div>
<script>
$('.page5').click(function(){
parent.top.$('#page5').addClass('classadded');
});
</script>
But when i try
<script>
$('.page5').click(function(){
parent.top.$('#page5').trigger('click');
});
</script>
nothing happens.
Any ideas?
Thanks
Jan
PS: their both on the same domain
Not a jQuery guy, but based on my testing at http://jsfiddle.net/kB3Jz/4/ , even when within the same frame, trigger is only working with jQuery-attached events, not the default click nor directly-DOM-attached events....
HTML:
Name5
<div class="page5">link</div>
JS:
$('.page5').click(function(){
$('#page5').trigger('click');
});
$('#page5')[0].addEventListener('click', function () {
alert('hello'); // Won't be triggered
});
$('#page5').click(function () {
alert('hello2'); // Will be triggered
});
The docs do say:
"For both plain objects and DOM objects other than window, if a
triggered event name matches the name of a property on the object,
jQuery will attempt to invoke the property as a method if no event
handler calls event.preventDefault()"
...so it would seem trigger should work (since clicking on the DOM object via $('#page5')[0].click() works), but for some reason, it doesn't--maybe it's simply that jQuery's expressed "attempt to invoke" has failed for some reason...
I'd therefore suggest changing window.location via a jQuery-added click handler on #page5
I would try
parent.location = parent.top.$('#page5').attr('href');
or
parent.location = parent.$('#page5').attr('href');
I have very simple jQuery Accordion, it is working fine, now the issues are if i load the accordion content dynamically either from DB or from JSON to page, It is not working, because there is no information to DOM to understand the class or ID which newly injected. so i am trying to use Jquery ON instead live or delegate to capture the injected elements. my sample code is..
jQuery("#header").on("click", function () {
.... my accordion code here
});
but jquery "on" will trigger on any event like click or something, so how to process the accordion html content to keep open in initial level and do further click.
How is this possible? i couldn't fine any solution
Check this: http://jsfiddle.net/RMBpt/
What i added:
var isActive = $(this).is('.on');
if(!isActive) { .. if active, it shouldn't collapse? }
//First element should be active, needs to be after the hide()
$('.accordionButton:first').addClass('on').next().slideDown('normal');
Try using it like this:
$("#wrapper").on("click", ".accordionButton", function(event){
//Your accordian code here
});
i am modifying the inner html through javascript, and the inner html involves a button
but when i put in the jquery code to run on the button click event it fails to do so ..
sorry but im a newb when it comes to javascript
content im adding into the html ..
function add()
{
var val=document.getElementById("ans").value;
document.getElementById("answers").innerHTML+="<tr><td>"+val+"<br/><p align=\"right\"><button class=\"replyb\">replies</button></p>"+"</td></tr>";
document.getElementById("ans").value="";
}
jquery code ...
enter code here
At a guess, because we don't have your jQuery, I would say you need to use .live() instead of .click() when you change the HTML the button will be NEW to the DOM.
When you apply your jQuery code, it adds any calls like .click() to any DOM item, when the page loads. So any NEW element doesn't have a .click() handler added to them.
Do solve this, you can change your .click():
$('#someitem').click(function() {
.....
});
To something like this:
$('#someitem').live('click', function() {
.....
}
Add the following in your page at some place and it will handle clicks to all .replyb buttons whether you add them with javascript at any time, or not.
$(function(){
$('button.replyb').live('click', function(){
alert('clicked on button');
});
});
have a look at jquery .live() method