Hi i am using http://getuikit.com/docs/modal.html on my site,
my code as below
Click to open modal
<div id="my_modal" class="uk-modal">
<div class="uk-modal-dialog">
<h1>Title</h1>
<p>...body ...</p>
<div class="uk-modal-footer">
Cancel <!-- Just close the modal -->
<!-- Call external link -->
</div>
</div>
</div>
i want to refresh background when some one click Cancel, i am noob in js but done some research and found
location.reload(true);
this will help in reload page but don't know how can i use it, can any one help
Answer . add this in end of page
<script>
$('.uk-modal').on({
'hide.uk.modal': function(){
location.reload(true);
}
});
</script>
As per the documentation here, you may use the hide.uk.modal event, which is trigged whenever the modal is closed. In the event handler, you can use the reload functionality. Include jQuery file as well.
$('.modalSelector').on({
'hide.uk.modal': function(){
location.reload(true);
}
});
Related
I am making an application in Grails(in this app I am using AJAX and jQuery) in which I want to put spinner above all page when I change user.
However, it is working perfectly for some time(aprx. 10 minutes) and after some time of using this page without refresh spinner is not appearing anymore. Reason is that HTML element containing spinner is missing.
Can someone give me a clue why is this happening?
Here is shorter version of code:
MAIN PAGE(HTML):
<div class="container">
<div id="changeUserDiv">
<g:render template="/changeUser"/>
</div>
<div>
<div id="errorContainer"></div>
<g:render template="myTemplate"/>
</div>
<div id="loadingAllPage" class="modal-background" style="display:none;">
<i class="fa fa-5x fa-spinner fa-spin"></i>
</div>
</div>
MAIN PAGE(JS):
$("#changeUserDiv").change(function(){
$("#loadingAllPage").show();
ajaxAction();
});
myTemplate(JS):
function ajaxAction()
{
// some code
$.ajax({
// some code
success:function(data){
$("#loadingAllPage").hide();
});
}
First of all, this is not the correct way to show a loader.
You should check some other way to clear this out.
For this,
the issue may be due to the content is changing after some time
Other ajax call from another page with a time intervals
The content of the div updated in some other way
I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
home.html
This is home page
about.html
This is about page
contact.html
That one is content page
JAVASCRIPT
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.
Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.
How can I do that?
Thanks...
You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.
You can change DOM anytime you want without loading the page.
Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.
There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.
You have to check/set the value of your variable on the event onload of the page.
Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.
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
I'm developing a phonegap project, I wanna popup a dialog of error information. I learn some from the demos of jQuery mobile, here is the link http://demos.jquerymobile.com/1.4.0/popup/#&ui-state=dialog I used the code of it and in my js file I use popup('open') to open it.
Here is part of my html code
<div data-role="popup" id="dialogZ" data-overlay-theme="b" data-theme="a" data-dismissible="false" data-transition="pop">
<div data-role="header" data-theme="b">
<h1 align="center">Sign in failed</h1>
</div>
<div role="main" class="ui-content">
<p id="SigninError"></p>
<span align="center">OK</span>
</div>
</div>
And here is part of my js code
else if (data == "Error2") {
var message = '<p align="center">Wrong username or password</p>';
SigninError.empty().append(message);
$('#dialogZ').popup('open');
}
I wanna have the effect like the demo but it didn't work.
Anyone knows why? It seems I can not have the css work properly, but I have included the jquery.mobile-1.4.0.css. Need helps!!
ya i got same issue before 4 months finally i got a solution. when you append content inside the popupview at the time u must call like this.....
JS
$('#dialogZ').popup();
$('#dialogZ').popup('open');
or
$('#dialogZ').popup();
setTimeout(function(){
$('#dialogZ').popup('open');
},100);
HTML
your data-role popup must inside the content of your calling page
Ideally data-transition should be on the link which triggers popup. since you are opening the popup in code, there is an additional attribute for $(dialog).open function, u need to pass the transition as part of open function., jquery doc
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600