How to bind an iframe with 'on' method in jquery? - javascript

Bind an iframe with on method in jquery.
I am using jquery mobile lib with an iframe in page.
$(frame).contents().on('tap', 'div', function() { console.info('sucess')} )}
How to bind the iframe with on method?
Here I tried to get tap function bind to iframe contents with on method.
//Structure of HTML page
<div data-role="page" id="test" tabindex="0" class="ui-page ui-body-c" style="min-height: 491px;">
<iframe height="491" frameborder="0" width="100%" src="about:blank" name="test">
// ...
<div id="one" data-role="page">
<div data-role="content">
// Contents
</div>
</div>
// ...
</iframe>
</div>
The click method
$(frame).contents().click(function(e) { alert('sucess'); }) will work. But when it comes with mobile device click method doesn't works...

I would try to set an ID to the iFrame and bind on it like this :
$('#iFrameId).on('tap', 'div', function() { console.info('sucess'); });
Remember that you NEED to create your event binding in the script included in the first page loaded with JQuery mobile. By design, all JS scripts included in other files loaded later are ignored.

jsbin
you need attach the handler to iframe's contentDocument:
$($frame[0].contentDocument).on('click', '#tap', function(){
alert('success');
});

Related

onClick inside an in div loaded page

I load a page inside a div. This div supposed to trigger a function on a mouse click. I would like that this onClick event also works when you click on the loaded page.
If you load a page inside the div, the functions of the loaded page only works for that page.
How can I make it happen that also the onClick function get triggered for the loaded page?
This is a simple example of the code:
function load() {
var url_view = '<object type="text/html" data="http://www.example.com/"></object>';
document.getElementById("image").innerHTML=url_view;
}
window.onload = load;
function showbox() {
alert("test");
}
<div id ="frame" onclick="showbox()">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
To be clear
What I want to achieve is that when you load the page, you'll load data from example.com in a div with the id "image". This event happens with the function 'load()', on window.load.
When that is ready, I would like that you trigger the 'showbox()' function on a mouseclick when you click inside the div with the id "image" (the div where example.com is loaded into).
You can try something like this:
<div id ="frame">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
JS:
function showbox() {
alert("show box");
}
$(document).ready(function() {
$.get('https://jsfiddle.net/about', function(data) {
$('#image').html(data);
showbox();
});
$('#image').click(function() {
showbox();
});
});
Run it on jsfiddle due to CORS: https://jsfiddle.net/usn9qam7/1/

event.preventdefault() issues - Trying to stop an anchor tag from loading

I'm setting up a dynamic and responsive video gallery, where you click on a thumbnail and it loads the accompanying video in the larger <div> above it. The problem I'm running into is that the event.preventdefault() apparently isn't working, because it still links to YouTube rather than loading it. Any help is appreciated.
HTML
<div class="mainvideo">
<iframe src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen></iframe>
<div id="mainvideowords">
<h2>#</h2>
<h3>#</h3>
</div>
</div>
<div id="videogallery">
<div class="littlevideo">
<img src="assets/placeholder.png">
<div class="littlevideowords">
<h4>#</h4>
<p>#</p>
</div>
</div>
JS
$(".video1, .video2, .video3").on("click", function(event) {
event.preventDefault();
$(".mainvideo iframe").prop("src", $(event.currentTarget).attr("src"));
});
While not an answer as to why the event.preventDefault() isn't working, here's how I would approach this. I would adjust the html to look like this:
<div class="mainvideo">
<iframe id="playVideo" src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen ></iframe>
// notice ^^^^^^^^^^^^^^
<div id="mainvideowords">
// rest of your code
<div id="videogallery">
<div class="littlevideo">
<div data-link="https://www.youtube.com/embed/HsuzKk6udK8" class="video1">
// notice ^^^^^
<img src="assets/placeholder.png"></div>
Then your jquery would look like this:
$(function(){
$('div[class^="video"]').click(function(){
var src = $(this).data('link');
$('#playVideo').prop('src', link);
});
});
The selector at the beginning selects any div whose class begins with 'video', so you don't have to repeat video1, video2, etc. Then, we've added a custom html5 data attribute to our clicked div that we access with the .data('src') line. See docs here: http://api.jquery.com/data/ and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes.
Finally, by adding an id to our iframe we can select it directly and change the src of the video.
Here's a fiddle for you: http://jsfiddle.net/1sLdkyr2/1/

How to open an external html page as a popup in jquery mobile?

I have a link like this
COME HERE
I want to open the popup.html file as a jquery popup. And I cant have it inside the current page as a <div> with an id. I must have it out side the current file.
And I cant use dialog's as it reloads the current page. Any idea on how to do it?
Inside the popup.html I am using just a single header.
Or any methods through which I can avoid the page being reloaded when dialog is closed?
Use .load() to load popup.html into a placeholder (i.e <div id="PopupPH">). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
Moreover, in popup.html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
jQuery Mobile 1.4
Insert placeholder inside body tag or data-role="page" and load popup.html.
<body>
<div data-role="page">
</div>
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</body>
Or
<body>
<div data-role="page">
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</div>
</body>
Load popup.html into placeholder
$("#PopupPH").load("popup.html");
Inside popup.html popup div, add JS to create, open and remove popup once it's closed.
<div data-role="popup">
<!-- contents -->
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</div>
jQuery Mobile 1.3 and below
Do the same as above, except for popup placeholder should be inside data-role="page", because jQM 1.3 doesn't support external popup. Also, replace .enhanceWithin() with .trigger("create").
Using the frames & popups in jQuery mobile, you can simply include an iframe inside, although dialogs are still probably your better bet. (Especially as a click outside the popup.. kills it)
<div class="hidden">
<div data-role="popup" id="externalpage">
<iframe src="http://www.bbc.com"
width="480"
height="320"
seamless>
</iframe>
</div>
</div>
<a href='#externalpage'
data-rel="popup"
data-role="button">COME HERE</a>
<script>
$(document).on("pageinit", function() {
$( "#externalpage" ).on({
popupbeforeposition: function( event, ui ) {
console.log( event.target );
}
});
});
</script>
Demo: http://jsfiddle.net/tcS8B/
jQuery Mobile Dialogs don't refresh the page I don't think, it simply masks it with a new background for focused attention.
Try
Test

after open event of pop up not working

I have a jquery mobile popup. I want after it opened to perform some things. The problem is not coming to the event:
$(document).ready(function () {
$("#alertsPopup1").bind({
popupafteropen: function (event, ui) { alert('popup'); }
});
});
Here the pop up in the html:
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
I can not understand what the problem is, it passes the bind without problems (I tested in Chrome's console).
I'd appreciate some help.
First don't use document ready with jQuery Mobile, sometimes it will trigger before jQuery Mobile can process page correctly inside the DOM. Read here why.
Instead of document ready you should use proper jQuery Mobile page events. Read more about them in a previous link.
Also if possible use delegated event binding. Basically use on function to bind an event and bind it to a document level. Delegated event binding should solve the problem of document ready usage, mainly because it doesn't care if popup exist / don't exist inside the DOM.
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$(document).on("popupafteropen", "#alertsPopup1",function( event, ui ) {
alert('popup');
});
});
HTML :
<div data-role="page" id="index">
<div data-role="content">
Open Popup
<div data-role="popup" data-corners="false" class="alertsPopup"
id="alertsPopup1" data-theme="e" data-overlay-theme="b" class="ui-content">
<p>
aaaa</p>
</div>
</div>
</div>
Working example: http://jsfiddle.net/Gajotres/Jgajv/

How Do I make this SimpleModal to onLoad?

How do I make this SimpleModal script to load when the page loaded instead of clicking the button? Thank You =)
< div id='basic-modal' >
<a href='#' class='basic'>Demo</a>
</div>
< div id="basic-modal-content" >
Basic Modal Dialog
For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).
Examples:
$('#basicModalContent').modal(); // jQuery object; this demo
$.modal(document.getElementById('basicModalContent')); // DOM
$.modal('<p><b>HTML</b> elements</p>'); // HTML
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
jQuery offers the .ready() handler which fires when the browser DOM content was loaded.
$(document).ready(function(){
// code which executes on dom ready
});
short cut for this
$(function(){
});
There are several other ways/handlers. You could also deal with the window onload event, which fires if all content is loaded completly (images, iframes, etc.)
window.onload = function(){
alert('onload! yay!');
};
jQuery'ish
$(window).load(function(){
alert('onload! yay!');
});
Just put your code on load event of the window like this:
$(window).load(function(){
$('#basicModalContent').modal();
});

Categories