Am loading a page in a modal popup and before the modal completely loads i would like to display a loading message which hides even when the modal is not completly loaded
This is what i have tried
$('#modaltrucks').modal('show')
.find('#modalContent')
.before(function() {
$.noty.closeAll();
var n = noty({
text: 'Loading ...',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
}
});
})
//am trying to show the above noty before load
.load("view-report-trucks", params)
//after loading close the notif
.after(function() {
$.noty.closeAll();
});
What is wrong
Related
The Issue
Smoothstate.js keeps the <head> of the page that I was just on and injects it back into the home page when I navigate back to index.html.
For example: I click a link that takes me to proj1.html Then I want to leave that page by clicking the home link which directs back to index.html. Page directs back to home but the layout is broken because the home page <head> contains the contents from <head> of proj1.html..Thus making all my styles are broken on the home page.
Smoothstate is caching the <head> and I am not sure how to prevent this from happening...
I tried using the cache clearing method they have but no success. smoothState.clear();
Here is my JS
$(function(){
'use strict';
var $page = $('#main'),
options = {
debug: true,
prefetch: true,
cacheLength: 0,
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onStart: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
Fixed. The <head> loading issue was caused by not adding the appropriate classes to $page object.
#main contains all the content I wanted to fade.
head is our <head> element that contains all styles.
body entire body of the page.
var $page = $('#main','head','body')
$(function(){
'use strict';
var $page = $('#main','head','body'),
options = {
debug: true,
prefetch: true,
cacheLength: 1,
blacklist:'.luxbar-item',
onStart: {
duration: 250, // Duration of our animation
render: function ($container) {
// Add your CSS animation reversing class
$container.addClass('is-exiting');
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onStart: {
duration: 0,
render: function ($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass('is-exiting');
// Inject the new content
$container.html($newContent);
}
}
},
smoothState = $page.smoothState(options).data('smoothState');
});
I have the following javascript which opens a JQUERY Dialog box which contains a partial view:
html
<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>
javascript
$(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
});
$('#addressLookupBtn').click(function () {
$('#dialog').dialog('open');
});
});
When I first open the page and click the addressLookupBtn the dialog window opens up with the partial view, I then close it but the next time I try to open it I get:
Uncaught Error: cannot call methods on dialog prior to initialization;
attempted to call method 'open'
I've done looking around at this error message and it seems to be related to the $(this) I am using to load the partial view and I have tried declaring a variable which will keep the context like so:
var $this = $(this);
But im not really sure where this should go, I've tried putting it in the click function and in the open function and calling it rather than $(this) but It gives me the same error.
edit
If I add this:
$('#addressLookupBtn').click(function () {
$('#dialog').dialog().dialog('open');
});
The dialog will open and close as expected, but only do the fade effect the first time, from then on it will pop in and out.
The problem is that with the .load ajax call, you are replacing all content inside the DIV of the dialog, even things added by jQuery for it to work.
Add and empty DIV inside the dialog then call .load on that.
<div id="dialog" title="Address Finder">
<div style="overflow: hidden;"></div>
</div>
Then the JS:
$('> div', this).load("#Url.Action("AddressLookup")");
I needed to initialize a new dialog each time I clicked the botton, this did the trick:
<script type="text/javascript">
$(function () {
$('#addressLookupBtn').click(function () {
$('#dialog').dialog({
autoOpen: false,
title: 'Address Lookup Tool',
modal: true,
width: 700,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
},
open: function (event, ui) {
//Load the AddressLookup action which will return
// the partial view: _AddressLookup
$(this).load("#Url.Action("AddressLookup")");
}
}).dialog('open');
});
});
</script>
I've got a JQuery dialog with an internal iFrame, which uses a php document to be filled with an image and some info. It works correctly, but if I click one of the images to go to the complete size image and show it in the iFrame, the dialog doesn't resize.
This is how the iframe and dialog get created, I've erased some extra code, but here it's the important thingy:
$('<iframe id="frameProductos" width="100%" src="articulos_info.php?codigo_art='+val+'" name="frameProductos">').appendTo('body');
var dialog = $("#frameProductos");
dialog.dialog({
title: 'Revisión de producto',
resizable: false,
modal: true,
position: ['center',150],
overlay: {
opacity: 0.5,
background: "black"
},
open: function( event, ui ) {
$('#frameProductos').width('100%');
},
close: function( event, ui ) {
$(this).dialog('destroy').remove();
},
width: 500,
height: 500,
buttons: {
"Cerrar": function () {
$(this).dialog('destroy').remove();
}
}
});
I need the dialog and iFrame to change their sizes if the content's size changes (when the image gets clicked, and the full resolution image appears).
Important Tip: you must update size of iframe after load completed
$(document).ready(function () {
//do somthing like this
window.parent.resizeIframe();
});
I am having User Control in Jquery Dialog. When Page is loading for the first, User Control page load event is firing. On dialog popup, page load is not firing and eventually Button click events are not firing. Below is my Jquery code.
$(document).ready(function () {
$("#imgSearch").click(function (e) {
$("#divSearch").dialog({
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close");
},
title: "Search Employee",
modal:true,
width: 600,
height: 400
});
e.preventDefault();
});
});
I used a flowplayer tutorial to make some ajax tabbed content but the it doesn't use any kind of a loading indication in between content load. How can I add that to this script? http://pastebin.com/PebcJspn
<script>
$(function() {
$(".feed-tabs ul").tabs("div.feeds > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>
You can try add an element with a loading gif before call the method .load() and it will be removed when .load() inserts the html result.
<script>
$(function() {
$(".feed-tabs ul").tabs("div.feeds > div", {
effect: 'fade',
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(":empty")) {
//add this
pane.append("<img src='http://mentalized.net/activity-indicators/indicators/ilcu/roller.gif'/>")
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr("href"));
}
}
});
});
</script>