The popup delays a long time to load in device.
How can I show a loading spinner before display a popup in jquery mobile?
This is a simplified version of my code:
HTML
<div data-role="page" id="fixed_numbers">
<div data-role="header">
Back
<h1>Header</h1>
</div>
<div data-role="content">
<div id="dlg_fix" data-role="popup" data-theme="a" data-overlay-theme="a"></div>
Click Here!
</div>
</div>
Javascript
$(document).on("pageinit", "#fixed_numbers", function() {
$("#fixed_numbers").on("click", "#fix_num_btn", function(e) {
e.preventDefault();
// value receive a data from input hidden
var value = $(this).attr("data-value");
$('#dlg_fix').html(value).popup('open');
});
});
Thanks
$(document).on("pageinit", "#fixed_numbers", function() {
$("#fixed_numbers").on("click", "#fix_num_btn", function(e) {
$.mobile.showPageLoadingMsg();
e.preventDefault();
// value receive a data from input hidden
var value = $(this).attr("data-value");
$('#dlg_fix').html(value).popup('open');
});
});
see more page loading msg options from jQuery Mobile
Try this:
$("#fixed_numbers").on("click", "#fix_num_btn", function(e) {
e.preventDefault();
$.mobile.showPageLoadingMsg(); //Show Sipnner
var value = $(this).attr("data-value");
$('#dlg_fix').html(value).popup('open');
});
Add a popupafteropen event listener, this will hide the spinner when the popup will be open.
$('#dlg_fix').on('popupafteropen', function (e) {
$.mobile.hidePageLoadingMsg();
});
live demo
for more popup events, check out JQM docs
jqm docs - popup events
Related
Thanks for the support! - Sory, my english is bad!
I use this code to get the DOM component from the page entry to display on the homepage.
When I click on open-ajax, it loads the DOM from the entrypage and display in ajax-outer, when clicked on ajax-overlay, it will delete the DOM.
But I discovered an error, if I clicked on an open-ajax link and clicked on ajax-overlay immediately, get () will still load the DOM and display in ajax-outer.
It seems that ajax-overlay is unable to stop get ()
How can I optimize the code?
Html from Homepage:
<div class="main_content">
<a class="open-ajax" href="/link/101">1</a>
...
<a class="open-ajax" href="/link/10n">n</a>
</div>
<div class="ajax-wrap">
<div class="ajax-overlay"></div>
<div class="ajax-outer"></div>
</div>
Html from Entry:
<div class="coupon_content">
<div class="abc">
....
</div>
</div>
Javascript:
$('.main_content').on('click', '.open-ajax', function(e) {
var gethref = $(this).attr('href');
e.preventDefault();
$('.ajax-wrap').addClass('active');
$.get(gethref, function(sch) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
});
});
});
$('.ajax-overlay').click(function(e) {
$('.ajax-wrap').removeClass('active');
$('.ajax-outer').children().remove();
$("body").removeClass('noscroll');
});
Ví dụ tương tự : https://dribbble.com/shots
You can't prevent a ajax request but you can prevent the appending using a global variable
var canAppend = true;
$('.main_content').on('click', '.open-ajax', function(e) {
var gethref = $(this).attr('href');
e.preventDefault();
$('.ajax-wrap').addClass('active');
$.get(gethref, function(sch) {
if(canAppend) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
canAppend = true;
});
}
});
});
$('.ajax-overlay').click(function(e) {
$('.ajax-wrap').removeClass('active');
$('.ajax-outer').children().remove();
$("body").removeClass('noscroll');
canAppend = false;
});
You could hide the ajax-overlay when you click open-ajax and show it in the success callback, this way you make sure that the overlay will not be clicked until all the code is loaded:
$('.main_content').on('click', '.open-ajax', function(e) {
e.preventDefault();
var gethref = $(this).attr('href');
$('.ajax-wrap').addClass('active');
$('.ajax-overlay').hide();
$.get(gethref, function(sch) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
$('.ajax-overlay').show();
});
});
});
I have a jQuery UI dialog whose content is populated using .load(), and then displayed. What I need to do is somehow bind to a button within the loaded HTML to close that dialog.
Code:
<div id="popup">
<div id="popupContent"></div>
</div>
<script>
$("#popupContent").load('some_URL_within_site_that_has_a_button', function () {
$("#popup").dialog("open");
});
</script>
I've tried a few different things, w/o success:
$("#popupContent").find(".CloseButton").on("click", function () {
alert("this worked");
});
$(".CloseButton").on("click", function () {
alert("this worked");
});
Any ideas on how to bind to the dynamically loaded control events?
You are close:
$("#popup")
.dialog("open")
.on("click", ".CloseButton", function() { ... });
I have looked at all the other answers similiar to this question but i can't make them fit my scenario.
i have a page that has a sidebar that contains 15 results that auto refreshes, which is fine.
There is a link that loads up an external page into a div with an overlay. then this new div with the FULL list of the results also auto refreshes whilst its open. (don't want both divs auto-refreshing in background uneccesarily)
in this full list div each result has a jquery slideToggle() function to display more information.
what i am TRYING(and failing) to do is make the auto refresh stop whilst this slideToggle is displaying information, cos otherwise when the page refreshes it goes back to display:none.
here is my latest attempt:
html
main page has div to load into...
<div id="full_list"> loading... </div>
external page with the full list
<div class="events_list"> <!--container for events -->
<ul><li>
<div class="full_event"> <!--each event in a list-->
#1<b> 500 m race </b> <!--this bit always seen -->
<div class="event_slide"> <!--this div is slideToggled() -->
<b>500m race </b><br>
<div class="evntdescription">
run 500mrun 500mrun 500mrun 500mrun 500mrun 500m
</div>
</div>
</div>
</li></ul>
</div>
now my attempted javascript
var refreshData;
var infodisplay = $('.event_slide').css('display');
function autoRefresh () {
if(infodisplay == 'none')
{
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 1000);
}
else
{
clearInterval(refreshData);
}
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
autoRefresh (); //thought it might work if i add the function
//here as well //
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
basically it doesnt do anything. i have made it work if i get rid of the second autoRefresh function, but it won't stop the function from going. just keeps on refreshing, also not sure how to stop the refresh when i close the div aswell.
let me know if you need more info.
thanx!
Try clearing the interval when the asynchronous loading has completed:
function autoRefresh () {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php', function() {
clearInterval(refreshData);
});
}, 1000); };
ok so i figured it out anyway. thanx for trying if you did tho.
put the if statement into a function after toggle is completed.
only downside is if it refreshes at same time that its still 'toggling' it will refresh. it won't clear the interval untill the toggle has completed. no idea how to get round that.
changed the code to this:
var refreshData;
function autoRefresh() {
refreshData = setInterval(function() {
$('#full_list').load('eventlist.php');
}, 10000);
};
$("#view_events").click(function(){ //this opens up the div //
overlay.fadeIn(1000).appendTo(document.body);
$('#full_list').load('eventlist.php'); //loads external page//
$('#full_list').fadeIn(800, function() {
autoRefresh (); //start the auto refresh/
$("body").on("click",".full_event", function(e){
$(this).children('div.event_slide').slideToggle(300, function() {
if($(this).css('display') == 'none')
{$('#full_list').load('eventlist.php');
autoRefresh();
}
else
{
clearInterval(refreshData);
};
});
});
});
$("body").on("click","#close", function(e){ //closes div//
overlay.fadeOut(300);
$("#full_list").fadeOut(300);
});
return false;
});
I'm using a lightweight jQuery popup plugin called 'bPopup'. I'm using it on my website at the moment to load multiple popup windows when clicked. I was recently told that my code was inefficient as I was loading multiple popups with multiple JavaScript 'listeners', i.e.:
<script type="text/javascript">
;(function($) {
$(function() {
$('#my-button_1').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up_32754925023').bPopup();
});
});
})(jQuery);
</script>
<script type="text/javascript">
;(function($) {
$(function() {
$('#my-button_2').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up_95031153149').bPopup();
});
});
})(jQuery);
^^ The multiple JavaScript 'listeners'. And, for the Popups:
<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>
<!-- Button that triggers the popup -->
<a class="main" id="my-button_1" href="#">Popup 1</a></b><br />
<!-- Element to pop up -->
<div id="element_to_pop_up_1">
// ...
</div>
He's probably right (sure of it), but not sure how to implement this, or whether this is even possible (small chance he's wrong).
Help? And thanks!
Since you are using jquery, you should use it's on() method to attach a single listener to the parent DOM element, and use the selector parameter to properly delegate the event to it's children (the button/popups).
If this sounds confusing, a simple example might help:
HTML:
<div id="parent">
Show popup 1
<div id="popup1" class="popup">1</div>
Show popup 2
<div id="popup2" class="popup">2</div>
Show popup 3
<div id="popup3" class="popup">3</div>
Non-popup link
</div>
JS:
$('#parent').on('click', 'a.button', function (event) {
event.stopPropagation();
event.preventDefault();
var popup = $(this).attr('href');
$('#'+popup).bPopup();
});
This adds a single event listener on the parent element, which only gets triggered if the child element which triggered the event matches the selector (in this case a.button). It determines which popup to show by retreiving the popup's id from the href attribute.
You can see this example working here.
The below function ( myFunction() ) takes the Id of anchor/div tag which is clicked and another id of div content to be display. And applies the same style for all popup models. And also it hides the old popup which already opened when u open new popup. All popup properties you can change.
Here i used only for two popups but you can use it for many as same did here.
<script type="text/javascript">
function myFunction(whId,whtDivContent,e) {
//var totWidth = $(document).width();
//var marTop = position.top;
var elt = $(whId);
var position = elt.position();
var marLeft = position.left - 130;
if(marLeft <= 1) {
marLeft = 10;
}
var openModal_profile ='#openModal_profile';
var openModal_menu ='#openModal_menu';
// Prevents the default action to be triggered.
e.preventDefault();
$(whtDivContent).bPopup({
position: [marLeft, 0] //x, y
,opacity: 0.9
,closeClass : 'b-close'
,zIndex: 2
,positionStyle: 'fixed' //'fixed' or 'absolute' 'relative'
,follow: [false,false] //x, y
,onOpen: function() {
if(openModal_profile == whtDivContent) {
$(openModal_menu).bPopup().close();
}
else if(openModal_menu == whtDivContent) {
$(openModal_profile).bPopup().close();
}
$(whId).css({'background-color':"#DFDFDF"});
}
,onClose: function() { $('.close').click(); $(whId).css({'background-color':""}); }
});
}
;(function($) {
// DOM Ready
$(function() {
// From jQuery v.1.7.0 use .on() instead of .bind()
//$(id_menu).on('click',function(e) {}
var id_menu = '#id_menu';
var openModal_menu ='#openModal_menu';
$(id_menu).toggle(function(e) {
//$(id_menu).css({'background-color':"#DFDFDF"});
myFunction(id_menu,openModal_menu,e);
},function(e){
//$(id_menu).css({'background-color':""});
$('.close').click();
$(openModal_menu).bPopup().close();
});
var id_profile = '#id_profile';
var openModal_profile ='#openModal_profile';
$(id_profile).toggle(function(e) {
//$(id_profile).css({'background-color':"#DFDFDF"});
myFunction(id_profile,openModal_profile,e);
},function(e){
//$(id_profile).css({'background-color':""});
$(openModal_profile).bPopup().close();
});
//ENDS HERE
});
})(jQuery);
</script>
I'm trying to use Reveal by Zurb to display a form, yet when I select the item that triggers the event the screen darkens like Reveal is working, but it will not show the pane. Any ideas? Thanks a lot for the help!
Planner.js
$(function() {
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').reveal('http://example.com/user/planner/update/'+this.id);
});
$('#updateForm').live('submit', function() {
var data = $('#updateForm').serialize();
var url = $(this).attr('action');
$.post(url, data);
return false;
});
});
From looking at the documentation online it seems there are no parameters for the reveal() method - the reveal method just shows a div on the screen, so
You would created markup on your page :
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
then reveal it ...
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
If you want to load something into the div and then reveal i suggest this approach :
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').load('http://example.com/user/planner/update/'+this.id,function() {
$('#update_view_content').reveal();
});
});
That should load in the contents and then once the load has completed call the reveal method. untested