Django

Code

YUI-Django-Dialog

(Under Construction)

This is an attempt glue together the folowing tutorial/example:

Requirements

* http://developer.yahoo.com/yui/ - used for AJAX and widget implementation.

Model

from django.db import models
import datetime

class Survey(models.Model):
    name = models.CharField(maxlength=20)
    description= models.CharField(maxlength=200)
    start_date=models.DateField("Effective from")
    end_date=models.DateField("Effective to")
    def __str__(self):
        return self.name
    def is_effective(self):
        if start_date<datetime.date.today()<end_date:
            return True
        else:
            return False
    class Admin:
        pass

class Poll(models.Model):
    survey=models.ForeignKey(Survey)
    question = models.CharField(maxlength=200,core=True)
    pub_date = models.DateField('date published',auto_now=True)
    def __str__(self):
        return self.question
    def was_published_today(self):
        return self.pub_date.date() == datetime.date.today()
    class Admin:
        pass

class Choice(models.Model):
    poll = models.ForeignKey(Poll, edit_inline=models.TABULAR, num_in_admin=5)
    choice = models.CharField(maxlength=200,core=True)
    votes = models.IntegerField(core=True)
    def __str__(self):
        return self.choice
    class Admin:
        pass

Template

{% extends "base.html" %}
{% block head-optionnal %}
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">	
<link type="text/css" rel="stylesheet" href="/yui/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="/yui/reset/reset.css">
<script type="text/javascript" src="/yui/yahoo/yahoo.js"></script>
<script type="text/javascript" src="/yui/event/event.js" ></script>
<script type="text/javascript" src="/yui/dom/dom.js" ></script>
<script type="text/javascript" src="/yui/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="/yui/connection/connection.js" ></script>
<script type="text/javascript" src="/yui/container/container.js"></script>
<link type="text/css" rel="stylesheet" href="/yui//container/assets/container.css">

<style>
	body { background:#eee }
	label { display:block;float:left;width:45%;clear:left; }
	.clear { clear:both; }
	#resp { font-family:courier;margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
</style>

<script>
		YAHOO.namespace("example.container");
		function init() {
			// Define various event handlers for Dialog
			var handleSubmit = function() {
				this.submit();
			};
			var handleCancel = function() {
				this.cancel();
			};
			var handleSuccess = function(o) {
				var response = o.responseText;
				response = response.split("<!")[0];
				document.getElementById("resp").innerHTML = response;
				eval(response);
			};
			var handleFailure = function(o) {
				alert("Submission failed: " + o.status);
			};

			// Instantiate the Dialog
			YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 							                                                                          { width : "300px",
                                                                                    fixedcenter : true,
										    visible : false, 
                                                                       		    constraintoviewport : true,														    buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },{ text:"Cancel", handler:handleCancel } ]										 } );
			
			
			// Wire up the success and failure handlers
			YAHOO.example.container.dialog1.callback = { success: handleSuccess,														     failure: handleFailure };
			
			// Render the Dialog
			YAHOO.example.container.dialog1.render();

			YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
			YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
		}

		YAHOO.util.Event.addListener(window, "load", init);
</script>


{% endblock %}

{% block main-first-column %}
{% if message %}
  <b>{{ message }}</ b>
  <p />
{% endif %}
 
{% if survey_list %}
<table>
  {% for survey in survey_list %}
  <tr bgcolor='{% cycle FFFFFF,EEEEEE as rowcolor %}'>
    <td>{{ survey.name }}</td>
    <td><a href='{{ request.path }}?edit_id={{ survey.id }}'>Edit</a></td>
    <td><a href='{{ request.path }}?delete_id={{ survey.id }}'>Delete</a></td>
  </tr>
  {% endfor %}
</table>
<p />
{% endif %}
 
<form action='{{ request.path }}' method='POST'>
<input type='hidden' name='edit_id' value='{{ edit_id }}'>
<table>
{{ form }}
<tr>
  <td colspan=2 align=right>
    <input type=submit name='submit_action' value='{{ submit_action }}'>
  </td>
</tr>
</table>
</form>
 
{% ifnotequal submit_action 'Add' %}
  <p />
  <a href='{{ request.path }}'>Add New Survey</a>
{% endifnotequal %}

<div>
	<button id="show">Show dialog1</button> 
	<button id="hide">Hide dialog1</button>
</div>

<div id="dialog1">

	<div class="hd">Please enter your information</div>
	<div class="bd">
		
		<form action='{{ request.path }}' method='POST'>
		<input type='hidden' name='edit_id' value='{{ edit_id }}'>
		<input type='hidden' name='submit_action' value='{{ submit_action }}'>
		<table>
		{{ form }}
		<tr>
		  <td colspan=2 align=right>
		    <!--
		    <input type=submit name='submit_action' value='{{ submit_action }}'>
		    -->
		  </td>
		</tr>
		</table>
		</form>
		
	</div>
</div>

<div id="resp">Server response will be displayed in this area</div>

{% endblock %}

View

def survey_cud(request):
    # initialize variables to send to template
    message = ''
    submit_action = 'Add'
    edit_id = ''
    # generate default form
    SurveyForm = forms.form_for_model(Survey)
    f = SurveyForm()
    # handle edit and delete events
    if request.method=="GET":
        if request.has_key("edit_id"):
            # replace default form with form based on row to edit
            survey = Survey.objects.get(pk=request.GET['edit_id'])
            SurveyForm = forms.form_for_instance(survey)
            f = SurveyForm()
            submit_action = 'Update'
            edit_id = request.GET['edit_id']
            message = 'Editing survey ID ' + request.GET['edit_id']
            
        if request.has_key('delete_id'):
            Survey.objects.get(pk=request.GET['delete_id']).delete()
            message = 'Survey deleted.'
            
    # handle add and update events
    if request.method == 'POST':
        if request.POST['submit_action'] == 'Add':
            # attempt to do add
            add_f = SurveyForm(request.POST)
            if add_f.is_valid():
                add_f.save()
                message = 'Contact added.'
            else:
                # validation failed: show submitted values in form
                f = add_f
 
        if request.POST['submit_action'] == 'Update':
            # attempt to do update
            survey = Survey.objects.get(pk=request.POST['edit_id'])
            SurveyForm = forms.form_for_instance(survey)
            update_f = SurveyForm(request.POST.copy())
            if update_f.is_valid():
                update_f.save()
                message = 'Survey updated.'
            else:
                # validation failed: prepare form for new update attempt
                submit_action = 'Update'
                edit_id = request.POST['edit_id']
                f = update_f
 
    # get existing surveys
    survey_list = Survey.objects.all()
 
    # return rendered HTML page
    return render_to_response('dj_survey/template/cud_survey.html',
                            { 'request': request,
                              'message': message,
                              'survey_list': survey_list,
                              'form': f.as_table(),
                              'submit_action': submit_action,
                              'edit_id': edit_id
                            })