how to navigate the data between pages in query mobile without using external library. I have searched on google but i can't get the proper answer which is working correctly.
Okay, so preferably do this:
In the page from which you want to pass set the sessionStorage item and in the other page get that item: (this works for persisting data untill the session is cleared)
window.sessionStorage.setItem("param1","12345");
window.sessionStorage.getItem("param1");
Or simply use data-param="12345" in the element (div, listview etc..):
<div id="divId" data-param1=""></div>
$("#divId").data("param1", "12345");
and read it in other page:
$("#divId").data("param1");
Related
I am using ASP.NET MVC with Kendo UI. I want to export grid to an HTML page and print it. Online help is not available. What have your done previously. Thanks in advance.
Did you find a solution to this? I'm looking at the same thing currently and have found a couple of options:
Firstly Telerik have a Javascript example which renders your grid to a new print window, see https://docs.telerik.com/kendo-ui/controls/data-management/grid/print-export
Just alter the name of
var gridElement = $('#grid'),
to your own existing grid name and omit the function:
$(function () {
var grid = $('#grid').kendoGrid({
...
};
};
However, this only renders what is currently displayed on screen (so if your grid has multi pages it may not be suitable).
The second option that I'm exploring is exporting to pdf (and then user can then print that if they wish). There are example of this at
https://demos.telerik.com/aspnet-mvc/grid/pdf-export and https://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export
This does have multi-page printing support (although I haven't got it to work just yet, they have examples which show it working). They do mention potential problems if you have a lot of data as it needs to load all the data on the client side (even if you have paging). There are some example projects to work on data server side in the above links.
In the end our requirements didn't need the paging but I've gone with the pdf option as that delivers quite a nice layout that you can template further.
I'm developing an application using jQuery mobile, that will be using HTML5 offline capabilities (cache manifest, etc).
Basic program is for on-field technicians to view/modify their orders on a tablet with no internet connection. I'm using a local browser database to store the orders.
I have an orders.html page which can view any order - but to pass a parameter to it, I can't use GET parameters, because the program is offline and I can't list every single order in the manifest.
So I have to use hash parameters - eg orders.html#o4572. But jQuery mobile doesn't play nice with this scheme - it uses hash parameters for it's own schemes. When I'm on list.html and there's a link to orders.html#o4572 - it turns the link into list.html#o4752 and stays on the same page.
I can turn off jQuery mobile's link handling by setting $.mobile.linkBindingEnabled = false; but this prevents all ajax navigation - you lose the nice transitions, and pop-up dialogs don't 'just work' anymore, you have to do them manually. And there may be other issues.
Is this the only way of getting this to work properly? I'm just starting to use jQuery mobile, so I feel like I'm missing something.
I have done something similar using the jquery-mobile-router plugin with a single page app that has a offline mode, however it should work the same for a multipage app since with a multi-page app the default behavior (ajax-enabled set to true) of JQM is that it pulls in the second page and attaches it to the DOM of the current page.
Using the JQM router you should be able to do something like this
var router;
var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
var params = router.getParams(matchObj[1]);
//use your params to pull data from localStorage
};
router = new $.mobile.Router({
'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
, {orderHandler: orderHandlerRoute }
});
You should indeed not use hash parameters for anything else than selecting pages when using jquery mobile.
The standard way to proceed is to pass your parameter with file.html?parameter=value and to retrieve the value through javascript.
You can then process this value with a js function that can for instance retrieve the data with an ajax call if you are online, or read it from local storage if you are offline.
This can be done either by binding the changepage event if you want to generate your pages dynamically based on the data associated to the parameter, or by binding the pageinit event if you want to alter the page after it has been displayed (for instance fill in form elements)
Alternatively, if the use of the cache manifest prevents you from usingthe ?parameter=value syntax, you can use the following approach:
- write your target link as file.html#pagename_itemvalue
- bind the pagechange event in order to override the default behaviour, and instead parse the target value, retrieve pagename and itemvalue, and generate/access the content you want to display. You can see an example of that on this page
So I've just started learning jQuery Mobile, and I've learned how it loads all links via ajax without actually loading the next page. Several of my pages use forms and GET to pass data on to the next page-- How can I do this while using jQuery Mobile?
One thing that I think is cool about JQM is that you don't have to use parameters to pass data between pages. Since you're in the same DOM as the first page, you can access data using plain old variables, i.e.
field1 = $('[name=field1]').val();
field2 = $('[name=field2]').val();
And so long as you're using the ajax feature of JQM you could do the following in the next page:
$('.title').text(field1);
I made a jsfiddle example for you.
Other ways would be to use the localStorage or sessionStorage api or there are also some plugins mentioned in the docs.
page params
JQM router plugin
Commonly, there 2 method for transfer parameter between jQuery Mobile page.
Modify Ajax address at first page, and parse the ajax to get parameter in next page.
Using HTML5 sessionStorage, a kind of WebStorage, to transfer parameter.
This is the method use ajax address to transfer parameter.
How to pass and get Parameters between two Pages in Jquery Mobile?
Using sessionStorage/localStorage to transfer parameter, you can add this code at first page,
<a href="#page_Parameter1" onclick="sessionStorage.ParameterID=123">
Before go to next page, parameter id is storaged into sessionStorage.
</a>
In next page, you can use this method to take parameter content,
$('#page_Parameter1').live('pageshow', function(event, ui) {
alert('Parameter ID: ' + sessionStorage.ParameterID);
});
I might be making this more difficult than I need to but I am in some need of assistance. I have some jquery ui tabs which are added via the add functionality. these tabs are via ajax.
I have a tabTemplate set as follows on the initial addition of the tabs.
tabTemplate: "<li><a href='#{href}'>#{label},/a><li>"
And the add tab functionality is done via
$tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var)
If a form is submitted on that tab, data is written to the database. The response gives an ID of the row added to the database.
Next time that specific tab is visited the link should actually be 'http://thanksforyourhelp/greatly/appreciated/ID' where the ID is now known since the response from the form (ajax here as well) sent it back. This will pre-populate the forms on the page based off the data in the database for "ID."
I've looked at the example here, but my href is an id for the tab in question (and not a url). Where is the actual url stored?
The tab looks like this.
new
I have tried changing the href on that, but upon clicking the tab the content is loaded without ajax instead of within the tab as desired. What might I be doing wrong here? Thanks for your help.
Edit: removed edits with references of no longer existent urls.
I haven't worked with AJAX-powered tabs too much, but I think you want the url method:
$("#tabs").tabs("url", index, url)
Change the url from which an Ajax
(remote) tab will be loaded. The
specified URL will be used for
subsequent loads. Note that you can
not only change the URL for an
existing remote tab with this method,
but also turn an in-page tab into a
remote tab.
Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have to do something like this
var tabs = $("#tabs");
var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]);
tab.find('.ui-tabs-anchor').attr('href', "NEW_URL");
// If cached initially. Remove cache then
tab.data( "loaded", false);
tabs.tabs( "option", "active", TAB_INDEX);
tabs.tabs("load", TAB_INDEX);
This will change the URL of tab at particular index and load that tab.
I have used the Telerik RadDock in the past, and although it's pretty good, it is a little bit clunky and bloated. One nice feature is the ability to save the state of a page (all dock locations, etc) in the database and recover them at a later date.
I'm wondering if there is a way in MVC and jQuery to save the state of the jQuery UI Drag Drop panels. Basically each user would be able to edit their own "dashboard" and place items wherever they want, and the state gets saved to SQL Server under their profile for later re-use.
Thanks in advance
I think Peol is generally correct. The only way to simulate the behavior of the Telerik RadControls in this case is to manually track and persist changes to your Panel layout. Specifically, for panels you'll probably want to:
Handle the dragStop event
In that event, get the current position/size/offset information for the current panel
Persist the new location - either locally in a Hidden Input or via a Web Service
If you persist locally in a hidden field, you can then persist long term on the next page POST or via single service call when (for example) the user clicks a "Save" button.
The Telerik RadDock simplifies the process by serializing its state to XML, which makes it easy to save and load, but I don't think the jQuery panels provide the same functionality. Maybe this will be added to the Telerik Extensions for MVC in the future...
We recently solved a similar issue (in a non-MVC project though) by simply adding a HTML5 data attribute with the widget id, looping through all the li's, and retrieve their id and push them to an array. E.g.:
HTML structure:
<ul>
<li data-id="1"></li>
<li data-id="2"></li>
<li data-id="3"></li>
<li data-id="4"></li>
<li data-id="5"></li>
<li data-id="6"></li>
</ul>
jQuery (inside the stop callback):
var widgets = [];
$('li').each(function() {
widgets.push( this.getAttribute("data-id") );
});
WebService.UpdatePositions(widgets);
We did this on the stop callback on a sortable, but should be applicable here as well.
The WebService then receives a int[], which you know will contain the id's in their new positions using the int[] index they're in.