i have a div wich content is dinamically loaded into it with jquery .load event.
example:
<div data-role="content">
<!-- dinamic loaded content with .load-->
<input type="button" id="hi" />
<!-- end of loaded content-->
</div>
i Have on header a .js loaded contaning
$(function() {
$("#hi").click(function() {
alert("hi");
});
});
As the div is not there when the js is loaded, the click event is not triggering, the solucion is on jquerymobile click event? what can i do to workaround this ?
Thanks
Use jQuery .on()
$(document).on('click', '#hi', function(){
alert('hi');
})
I choose document but it should be the closest non-dynamic parent.
Related
I am trying to make the items within the div #h_red_printable (which are dynamically added when the page loads, and have a class "chart_container") sortable, but what happens is I can drag them around, but when I release the click, the div comes back where it was before. Any suggestions?
Dummy HTML:
*<div id="printable_charts" style="display:none;height:auto;">
<div id="printable_hw">
<img class="banner-img" src="/static/app/ihi/hardware.png" />
<div id="h_red_printable" class="cat_column">
<div class="chart_container">
<div class=".add_stuff" style="position:absolute;">Stuff here</div>
</div>
</div>
</div>
</div>*
The jQuery
$(document).ready(function(){
$( "#h_red_printable" ).sortable();
$( "#h_red_printable" ).disableSelection();
});
And yes, I have included these two scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
Try setting the inner div (Stuff here) absolute positioned.
<div class="chart_container">Stuff here</div>
Since elements are added on a button click, and thus after $("#h_red_printable" ).sortable(); is called, add an event handler to that button click event like this, in order to refresh the list of sortable elements:
$('#theButton').click(function (e) {
$('#h_red_printable').sortable('refresh');
});
Okay below I have posted the script I'm using and the #targetDiv, Basically my problem is when I move the link that is currently contained within the #targetDiv outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the #targetDiv and still have it load the page contents inside of the div.
Script
$(function(){
$('#targetDiv').on('click', 'a', function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
Div
<div id="targetDiv" class="collapse">
Load
</div>
The problem I have is that I want the load link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the targetDiv.
What I'm trying to achieve;
Load
<div id="targetDiv" class="collapse">
</div>
Add a class to any links you want to use to load content
<a class="content-link" href="/page.php">Load</a>
And modify event listener accordingly so it handles both types of links
$(document).on('click', '.content-link, #targetDiv a',function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
Try this:
$(function(){
$('#divLoad').click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
You can also do this (more difficult to be precise):
$(function(){
var divLoad = $('#targetDiv').prev('a');
//alert(divLoad.attr('href') );
divLoad.click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
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
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');
});
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();
});