I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
Related
I have 2 dropdown in a view. First drop down is automatically populated when the view get's loaded with the list of options. when an item is selected I would like to populate the dropdown # 2.
What's the best way of doing this?
A couple ways of doing this. You can either do an AJAX call (responding to the selection of a value in dropdown #1). The downside to this is that it requires a round-trip call to the server, then updating the value of dropdown #2 with the result.
The other way is to pre-load all possible values for dropdown #2 when the page first loads, and just change it in the browser with JavaScript as soon as the value is changed (rather than making a call all the way back to the server to get the values).
Either way, you're modifying the DOM, most likely, so it'll be some kind of JavaScript solution. Whether you choose AJAX, or preload and change it immediately will probably depend on how it affects the original page load speed, how much data you want to load onto the client, etc. If it's a relatively small number of options possible in dropdown #2, then pre-loading might be your best bet.
I seem to be havign yet another problem with jqGrid :-( I am trying to get the current row data using getRowData, but all I get back is an array [object, Object]. What am I doing wrong?
This is what I'm using
var rowdata = $("#list").jqGrid('getRowData');
Can somebody help?
thanks
After reading in the comments additional information about your problem I would recommend you following.
If you need to print the page which contains jqGrid you could need to prepare additional CSS for media="print". See here for additional information.
The method getRowData called without parameters give back the array of rows which are array of visible cells. For every cell will be called unformatter, so the data could be not identical to to data which you posted to jqGrid. Moreover if you use data paging or filtering you can have another problem: only visible cells from the current page will be returned back.
I personally prefer to use export to Excel instead of printing the pages. In the case I add an custom button in the navigator bar. If the button will be clicked by the user the request to the corresponding MVC controller action will be sent. The server get all data for the corresponding grid from the database and generate XLSX Excel data as stream with respect of Open XML SDK. The corresponding code is not very small, but in the way one can generate perfect Excel file formatted like it is required. In the case you don't need install Microsoft Office on the server side. The user just opens Excel with all data if he/she clicks the "Export to Excel" button in the jqGrid. In Excel there are very good printing possibility. The most users knows Excel very good and can customize the data (hide some columns for example) before printing.
So my suggestion to you to spend some time in implementing export to Excel instead of implementing printing of jqGrid directly.
This may be a followup to this question Possible to make jqGrid Search Box Stay on Page? - Or it may be unrelated because clicking the search button manually shows the same behavior.
We have a dynamically generated grid that is created by a) making an ajax request to get the grid columns based on a report id and then b) setting up the grid model and fetching the data. When the page loads initially, we pass in a starting report id, but there is a dropdown box on the page that lets the user change reports.
When the dropdown changes, I unload any existing grid, make the ajax request to get the columns, set up the grid model, and then get the data. The columns change, the data changes, and everything looks correct - except the search columns do not change in the search dropdown.
If I close the search box and reopen it, it still has the old search columns. Likewise, if I click the reset button or reload the entire grid.
I found it after a bit more poking around. I needed to set the recreateFilter option to true
prmSearch = {recreateFilter:true,multipleSearch:true,overlay:false,sopt:['cn','eq','ne','lt','le','gt','ge','in','ni','nc']};
I have a View (block display) listing node titles of a certain content type displaying the latest 12 published items. It displays underneath all nodes of a specific type.
What I'd like to do is be able to load the next 12 items with AJAX (I know the pager does this but I was hoping to avoid it) and also control the offset based on the node title.
I think the second request can be achieved with the row number in the query but so far I'm having trouble achieving a working script.
you always can call view results from Drupal API:
$results = views_get_view_result('my_view',$display, $args)
and in arguments you can pass start/end number of items, or something else, depends how you sorting your results
Well, instead of that work, how about selecting the mini pager? I'm pretty sure it only shows previous and next links. If it's not the exact display you want to use, you can override theme_views_mini_pager (from views/theme/theme.inc, line 636) to only show what you need.
I have a request concerning Drupal 6.x
I'd like to have this behaviour:
imagine to have 2 columns, on the left a list of nodes (only titles for example) and on the right a view showing just one of the contents on the left.
My idea would be to achieve this with an AJAX-fashion: clicking a link in the list on the left updates the view on the right with the actual node.
Which is the best way to handle this?
My idea is to use Panels, make 2 column panel with 2 views, one (left) filtered on content type, with no arguments, and one on the right which takes in as an argument the node id to be displayed.
But how to link the 2 views with AJAX?
(or, better, how to update the view on the right with an AJAX call?)
is this possible?
Any help or idea is really welcome
Thanks!
Cheers
Mauro
You also can do a quick hack, which is quite flexible, because it allows you to change your views without changing code.
I have had a similar task recently and for your task I would do the following:
for your right column, create a exposed filter (node id) and hide whole exposed filter form using CSS.
using jQuery, attach a click behavior to titles on your left column.
the click behavior takes the node id, finds the attached exposed filter at the right column, enters the node id into the input field and executes form's .submit().
the .submit() triggers the build-into-views well debugged ajax request which refreshes your right column.
this is certainly possible, and not very difficult to do.
Your task can be divided into two main parts:
Providing a 'callback' URL in the Backend that takes a node id (nid) and returns the markup to display the node in the right panel in a format that can be processed by javascript. This will be done in PHP within a normal Drupal module. The main point is not to return a full Drupal page as usual, but only the markup for the node.
Create logic for the Frontend that, when triggered by clicking a link in the left panel, retrieves the new node markup via the URL callback above and replaces the content of the right panel with it. This needs to be done in javascript, using the Drupal javascript API with jQuery.
You can find an introduction and example for AJAX in Drupal here. (This does almost exactly what you want to do, only with images)
You should also look at this more general entry point for JavaScript in Drupal.