ajax button in cakephp 1.2 - ajax

I'm trying to make something like this:
an html form with 5 button (each one with a differn value). if you click one of this button will be dispayed an text input (with a default value depending to the clicked button value, so the buttons call an ajax/javscript function to generate the default value) and a submit button.
I'm unable to create this type of form. have any suggestion for me ? Thx in advance.

I wouldn't use CakePHP's AJAX features, just write it yourself. Cake's features are useful in limited situations (e.g. pagination) but as soon as you need flexibility, it becomes a limiting factor. I believe the JsHelper is actually being removed in future versions.
To get this done without Cake, take a look at http://jsfiddle.net/mjxWg/8/. It's not a complete working example (e.g. there is no <form> tag), but it should show you enough to get started on your own.

Related

Can I create quiz GUI with Django-Forms?

I'm new to django, and I'm working on a quiz project. The idea is to create something similar to this (http://www.stylemint.com/quiz). Basically, there will be a question on each page and the user clicks on an image with the answer. I was planning on using a django form with a radio select input type, however, I'd like the image to act as the radio button (ie, be clickable) and also a click on the image will take you to the next question (instead of having to click submit after each). Is this possible with django, or do I need java?
it's perfectly possible - if you just want a series of images, and clicking on them to take you to the next question you might achieve that by:
Having multiple input fields of type "image" which all submit the form. If you go down that route you'll have to template the forms out yourself or make your own widget.
Using javascript to replace radio buttons with images dynamically. If you do that, it'd be a good idea to make it fall back to a straight list selection for people who don't have javascript.
Ignoring forms altogether and just using a view with a parameter of what the choice is.
Yes, it's completely possible. My suggestion is if you want to save the result in the db use model and model form in django. So, my next suggestion is you can customize model field for combine radio button functionality and image together. But actually you must programming and use a little jquery and javascript to do it.
You may want to see:
https://docs.djangoproject.com/en/dev/topics/forms/modelforms/
https://docs.djangoproject.com/en/dev/howto/custom-model-fields/

COLDFUSION CFGRID Datapass with a post

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.

jQuery, AjaxForm and success option

I'm using the jQuery Form plugin and more specifically the ajaxForm method to hijack a normal form and post it using ajax. I have a form with lots of rows. Each row has edit and delete options and each section has an add option. Hijacking the form I can work out on the server whether to add, edit or delete but would like the ability to know which button was pressed in the success method back in my JS. Is this possible?
I know there are two params: responseText and statusText and that I can work out the button type in beforeSubmit but I need it when the data is returned which button has been pressed. The reason is that I want to display a form in a light box for edit and add but for delete I want to do something different. It seems a bit naff to check the data coming back to look for a certain string (not to mention flakey and unmaintainable).
Anyone know of a simple solution?
Look at the beforeSubmit option: it's a function that will get called, well, before submit. More importantly, it provides the data. You could look at the data and set a flag that would then be used within the success function. This isn't beautiful, but better than being coupled to the server's behavior.
In this situation, I have often just created two different forms-- one for update and one for delete. Then, instrument them separately.

Update Drupal views argument via AJAX

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.

How do I process a complex graphical UI element in a django form?

I have a few complex GUI elements (like a custom calendar with many days that can be highlighted) that appear along with standard django form input fields. I want to process the data I/O from these complex forms along with the Django forms.
Previously I would use AJAX requests to process these custom GUI elements on my HTML form after the Django form was saved or rendered, but this leads to a host of problem and customized AJAX coding. What is a good way to handle complex interactions widgets in a Django form?
Not sure if I understand completely, but you could have the value of your UI saved into a hidden element on the form via javascript. This can either be done as they select the values in the UI or when they submit the form. Pseudo-code assuming JQuery using submit() to save before the submit data is sent:
$('#myForm').submit(function(){
// get the value of your UI
var calendarValue = calendarWidget.getValue()
// #calendarData is the hidden field
$('#calendarData').val(calendarValue)
})
This obviously requires JS, but so does using your UI element.
Your question is very vague so I suggest you read the Django documentation on writing a custom field and hopefully that will help you get started. You might also want to investigate writing a custom widget. Unfortunately the documentation is bit lacking on that, but a Google search brings up several useful blog posts, including this one.
You have three options depending on how you output your Django Form subclass to the HTML page.
The first doesn't involve Form at all. Any html form inputs will end up in request.POST, so you can access them there. True, they won't be bound to your Form subclass, so you would have to manually inject the value either using a custom form constructor, or by setting some property on your Form object after instantiating it with request.POST. This is probably the least desirable option, but I mention it in case your use-case really doesn't support anything else.
The second is an option if you manually output the form fields in your HTML (ie: using {{ myform.field }} rather than just {{ myform }}. In this case, make a hidden variable to contain the value of your calendar GUI tool (chances are, your GUI tools already offer/require one). Add this hidden field, with the right name and ID, to the Form subclass itself, making sure it has a hidden django form widget. If necessary, use javascript as Rob suggests to populate the hidden field. When the form is posted, it will get bound to your form subclass as normal because, this time, you have a field on your Form subclass with that name. The machinery for clean() will work as normal.
The third, and best option, is to write a custom django field; Andrew's post has the link. Django fields have the ability to specify js and css requirements, so you can automatically encapsulate these dependencies for any page that uses your calendar widget.

Resources