How can i close a kendo ui mobile view and also unload all its content. This view contains a youtube video that needs to be stopped / unload once a user click on the back button at the top of the view or on android using the physical back button on the device?
Here is the code to my view, but i can't seems to get the view to close. When i use the back button the view goes away but it content does not unload.
<div data-role="view" id="showpostlayout" data-layout="defaultlayout" data-reload="true">
<div data-role="header">
<div data-role="navbar"><a data-click="closePost" data-role="button" data-align="right">Close</a> </div>
</div>
<div id="mypost">
</div>
</div>
<script>
function closePost() {
$("#showpostlayout").kendoMobileModalView("close");
}
</script>
Its stated in the documentation
<script>
function closePost() {
$("#showpostlayout").data("kendoMobileModalView").close();
}
</script>
give it a whirl.
Related
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);
}
});
Hi, I'm facing this issue on Onsen UI. How do I work around?
Intro: The following code creates an Onsen app interface that shows a start page. On the start page are two things (1) is the dynamic-content and (2) is the navigation button.
When the start page loads, pageinit event triggers and feed/populate dynamic-content to the start page. navigation button navigates to the start page every time.
The intention is to: Populate dynamic-content when a dynamic content becomes available (for this example it's at instant). The dynamic-content should be there for as long as the start page exist in DOM.
The issue: Happens when user try to navigate to the same page. While the animation kicks in, the pageinit does trigger for the start page. But the dynamic content went missing.
Perhaps... when navigator is trying to animate the page, it duplicate the start page and without the dynamic content
How should I work around?
Thanks for helping. ('',)V
<ons-sliding-menu
var="appMenu"
menu-page="menu.html"
main-page="navigator.html"
swipeable="true"
swipe-target-width="100px"
side="left"
type="overlay"
max-slide-distance="220px">
<div id="toast">
<div class="fly-wrapper">
<div class="fly-card z-depth-5" style="display:none;">
<div class="message"></div>
</div>
</div>
</div>
</ons-sliding-menu>
<script>
document.addEventListener("pageinit", function(e) {
if (e.target.id == "start") {
document.getElementById('dynamic-content').textContent = 'The start page was here';
}
}, false);
</script>
<ons-template id="navigator.html" style="display:none;">
<ons-navigator var="appNav" page="start.html"></ons-navigator>
</ons-template>
<ons-template id="start.html" style="display:none;">
<ons-page id="start" class="start">
<div id="dynamic-content"></div>
<a class="button" ng-click="appNav.pushPage('start.html',{animation:'simpleslide'})">
Load start again
</a>
</ons-page>
</ons-template>
<ons-template id="navigator.html" style="display:none;">
<ons-page></ons-page>
</ons-template>
Onsen tutorial about ons-navigator:
http://onsen.io/guide/overview.html#Pageinitevent
http://codepen.io/onsen/pen/IDvFJ
Right now I use the following work code:
<a class="trigger-pageload" app-href="start.html">Load start page</a>
$(document)
.on('tap','.trigger-pageload',function(){
var href = $(this).attr('app-href');
if(appNav.getCurrentPage().name!=href) appNav.replacePage(href);
});
SOLLUTION:
2 key steps as follows
prevent same page transition.
use replacePage instead of pushPage (don't follow onsen tutorial/example).
Additional step: Please update (Onsen tutorial and example).
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 am currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});
Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});
I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/