Sorting datatables using a particular field - javascript

I'm using datatables as show here http://railscasts.com/episodes/340-datatables
The default field for sorting is id and that is fine.
However, I also need to be able to redirect to this page from another page so that table must be sorted by another field. I find out what GET query is sent to a server, by it's very long, therefore, there must be another standard way.
So, how do I redirect to a page where this table located to that it causes it sort itself using a particular field?

You can find a solution on this post:
How can I get query string values in JavaScript?
Basically, it's exactly what you're trying to achieve, which is finding out what's coming on the query string.

Related

Can I control handstontables autocomplete edtors initial value?

With Handsontable, I use autocomplete columns to let users choose from a list of pre defined names. But when the user selects a name I don't actually store that name on my data object, I store an id connected to the name. The id is also what is available on the data when the table is loaded initially.
This means that I need a function to go from id to name and vice versa which I have. I use the id to name function in my renderer and I use the name to id function in beforeChange, so that the output contains the id.
Here is my problem:
If I select a cell with a name rendered and I press enter, I now see the id instead of the name. Is there some way I can change the behavior of the editor so that the name is shown instead of the id?
Everything else seems to work. If I for instance select a cell and start typing, it now contains what I typed and the autocomplete works as expected. I would like to have the same behavior when pressing enter on a cell.
I ended up using a solution where I do the translation on all the data when it is loaded. When I then extract data from the sheet I translate it back.
I encountered a similar problem with the date editor where I wanted to go back and forth between the user date format and our normalized date format. Handsons editors are not that easy to work with and especially the date editor receives dates in different formats on setValue.
The solution feels a bit hacky but at the same time there will only be on these two occasions when data is transformed which makes it less plausible that there will be any errors compared to if I were to transform on render, data entry, validation etc. With this solution I know that as long as we are in the sheet, the data is what the user sees.

Save sort order to hidden field with sortable jQuery plugin

I am using this plugin (http://farhadi.ir/projects/html5sortable/) to create a feature for a website where a user can add form fields on the fly.
The idea is that they will give the form a name (title), and then add a series for form fields. These form fields need to be drag and drop sortable (thus the plugin) so the user can rearrange the order.
Once they are satisfied with the order, they will click the "Create Form" button, and the data to create the form will be submitted.
The data itself will be stored in three tables. Table 1: Forms, Table 2: Fields, and Table 3: Forms_Has_fields. The Forms_Has_fields table will includes a sort_order column, which tells the system in what order to display the fields.
That's where this question is important: when a field is re-sorted using the drag and drop feature, I need a way to save the sort order in an or some other form control so I can parse it with PHP and create the fields properly.
If this was in PHP, I would just keep everything in an associative array: ($fieldname => $sortorder), but that doesn't seem like it's an option in javascript. Ideally, I could keep this in an array in Javascript, and then when sumit was clicked, dump that array as a JSON to an field, and POST it to PHP. But if that's possible, I don't know how to do it.
If there is another (more elegant) way to handle this, I am open to suggestions.
Turns out, I was making it more complicated than it needed to be. I am giving you the points because you answered my question; however I did find a more elegant way of doing it. The is, in fact, the order and array already. There is no reason to create a separate array to manage what is being saved in what order because the does it already. All you have to do is itterate through it with .each().
And, best of all, I didn't have to use global variables

InputRichText to display output

I want inputRichText to display the output from the database which it was inputted earlier. The reason is the user get chance to input and display the data in same page. After inputting the data he can save it and retrieve it in the same inputRichText. Can you let me know if this work by in built or should i customize the js code? If so i would appreciate if someone have the js scripts. Also alternate idea are appreciated too. Right now i am using Icefaces component for inputRichText.
You can use the value attribute to set the content of inputRichText as string, also can use binding with the backing bean component of type InputRichText, but previous is more preferable way.
You can re-use the same object used for persisting data, to display the content later. It will be having the value fetched from the database & the same will be displayed as text. You have to initialize the string before displaying the page.

Updating GridView without postback using javascript

I have a gridview and a dropdownlist on my page.
The gridview is binded through code behind with some columns. Among these price is also a column.
My scenario is to change the price field based on the dropdown criteria.
The price column consists of values in "lakhs", and i need to change them as crores or usd or some other format as per dropdown.
I don't want to go for postbacks. I want these to be implemented using javascript.
(These changes are for user conversion. They need not to be saved on database)
Thanks in advance
Madhu
You have two options. If you don't want to go for any response from the server (i.e. you don't want to make an AJAX call), you could populate a hidden field with a list of comma-delimited values that correspond to your dropdown values. It's an ugly approach, but it would work.
The other option is to make an AJAX call to a web method on the server (or possibly a financial service like Yahoo! Finance). When your dropdown selected value changes, that event fires a call to the server.
If you were able to indicate what platform you're using (PHP, .Net or other), someone will likely be able to provide more relevant examples and code samples.
Since the grid is rendered as an HTML Table, you can actually manipulate anything on the client.
I would pickup jQuery for the task

What is the best practice for passing variables from one HTML page to another?

I'm relatively new to web application programming so I hope this question isn't too basic for everyone.
I created a HTML page with a FORM containing a dojox datagrid (v1.2) filled with rows of descriptions for different grocery items. After the user selects the item he's interested in, he will click on the "Submit" button.
At this point, I can get the javascript function to store the item ID number as a javascript variable BUT I don't know how to pass this ID onto the subsequent HTML page.
Should I just pass the ID as an URL query string parameter? Are there any other better ways?
EDIT: The overall process is like a shopping cart. The user will select the item from the grid and then on the next page the user will fill out some details and then checkout.
I should also mention that I'm using grails so this is happening in a GSP page but currently it only contains HTML.
You could just use a hidden input field; that gets transmitted as part of the form.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function updateSelectedItemId() {
document.myForm.selectedItemId.value = 2;
alert(document.myForm.selectedItemId.value);
// For you this would place the selected item id in the hidden
// field in stead of 2, and submit the form in stead of alert
}
</script>
Your grid comes here; it need not be in the form
<form name="myForm">
<input type="hidden" name="selectedItemId" value="XXX">
The submit button must be in the form.
<input type="button" value="changeSelectedItem" onClick="updateSelectedItemId()">
</form>
</body>
</html>
It's good one, but better is to use some script language such as JSP,PHP, ASP....and you can use simple POST and GET methods.
The best method (imho) is to include it in the URL
href="http://NewPage.htm?var=value";
encodeUriComponent a string Value
One way to send over variables using POST to another page is to make the link to the subsequent page a submit input on a form where the action attribute is your target page. For every variable you have, you can include using inputs of attribute type "hidden" in this form, making only the button visible.
Another option is to dynamically generate links on the page with something like PHP where you basically repopulate the current GET queries.
Finally, you can always store this information in the PHP $_SESSION array and not have to worry about continually passing these variables through site navigation.
Your choice will depend on how many navigational options there are where you'd like to keep the same variables. It will also depend on how secure you'd like your back end to be and the amount you'd like to disclose to the advanced web user.
If you are only going to need the ID on the subsequent pages, then you can pass the id as a query string parameter.
But there will be times when you need to relay more information and passing a variety of parameters to different pages and having to maintain different sets of parameters for different pages can get a little hairy. When this is the case I'd suggest that you keep a hidden field on the form and create an argument object that stores each of your parameters. Serialize the argument object with JSON and store this in you hidden field. Post the form back to the server. When the next page loads, deserialize the object and retrieve the values you need.
Assuming that you are limited to using html pages, I think the best approach would be to pass the id along on the query string to the next page. It is relatively easy to pull that value back off the query string on the next page. If you need to be a little more stealthy about passing the variable (or you need the variable to persist for more than one page), you could also set a cookie and retrieve it on the next page.
Since you are trying to do this in a Grails application you do have a choice of using Flash scope. This might not make any sense if you want to go directly from one HTML page to the next as the scope would be defined in a controller. If you do not need to do any sort of processing between requests, I'd suggest using a hidden form field to keep it simple.
http://grails.org/Controllers+-+Controller+Scopes

Categories

Resources