CODEWITHSUNDEEP
javascriptjquerydjango
user1903663
user1903663

Reputation: 1725

javascript and django

I am converting from PHP to Django and it's proving a real struggle. I want to do an inline edit (a breeze with PHP and Ajax) but I am really, really stuck. Sorry, in advance, for the large amount of code that follows.

I have rendered a 2 divs which contains a number of fields, all the same. One is displayed and the other hidden. When you click on the edit button the div to be updates is dispalyed and the data is in input boxes and a select dropdown so the user cna make changes. The HTML follows"

<div id="display1">
    <span style="width:50px;">
      <button class="edit" onclick="javascript:toggle('1')">EDIT</button>
    </span>
    <span>
        <a href="/recruit/1/">Blair Leighton</a>
    </span>
    <span>
        Intertrust Private Partners 
    </span>
    <span>
        Japan 
    </span>
    <span>
        hands off 
    </span>
    <span>
        not connected 
    </span>
    <span>
        notes 
    </span>
</div>
<div class="noshow" id="edit1">
    <span style="width:100px;"><button class="update" id="1">update</button></span>
    <span>
        Blair Leighton
    </span>
    <span style="width:220px;">
        <input type="textfield" style="width:210px;" id="new_company" value="Intertrust Private Partners" />
    </span>
    <span>
        <input type="text" id="new_country" value="Japan" />
    </span>
    <span>
        <select id="new_status">
            <option value="no contact">no contact</option>
            <option value="no contact">hands off</option>
            <option value="no contact">ongoing</option>
            <option value="no contact">sent email</option>
            <option value="no contact">waiting</option>
            <option value="no contact">trash</option>
        </select>
    </span>
    <span>
        <input type="text" id="new_connection" value="not connected" />
    </span>
    <span style="width:220px;">
        <input type="textfield" style="width:210px;" id="new_notes" value="notes" />
    </span>
</div>

There are, in fact, many other divs which have a sequential id display2, edit2 and so on.

Once the edit div is displayed by clicking the toggle button I want to collect the data from each field (in a jquery array) and then pass it to a django view to update the database.

Then, remain on the same page which is refreshed to show the updated values.

How can I do this?

models.py is:

from django.db import models

class recruit(models.Model):
    first_name = models.CharField(max_length=25)
    last_name = models.CharField(max_length=35)
    position = models.CharField(max_length=55)
    company = models.CharField(max_length=55)
    country = models.CharField(max_length=125)
    connection = models.CharField(max_length=55)
    status = models.CharField(max_length=55)
    phone = models.CharField(max_length=55)
    placed = models.CharField(max_length=55)
    placed_with = models.CharField(max_length=55)
    skype = models.CharField(max_length=55)
    notes = models.TextField()
    company_url = models.CharField(max_length=125)

All help very gratefully received. Thank you.

Richard

Upvotes: 2

Views: 269

Answers (2)

Daniel Roseman
Daniel Roseman

Reputation: 599450

I can't see how this is any different in Django from PHP. The principles are exactly the same: the JS collects up the data, POSTs it via Ajax, and updates the HTML with the response. The server-side code simply does the saving and returns the result for the Ajax: either as JSON, or as pre-rendered HTML fragments.

Upvotes: 0

Jakob
Jakob

Reputation: 808

there are django apps which can do the job for you, although i never used them.

quick googling gave me this: http://pypi.python.org/pypi/django-inplaceedit, maybe there are more or even better solutions.

if you really want to code it all by yourselt i'd suggest using a django-ModelForm instead of putting all the fields together manually.

then you can just hook your form-submit with some javascript to make it being submitted with AJAX. i am using jQuery for tasks like this, but any other js library (prototype, dojo, mootools, ...) can do the job too.

in django just safe the data as descibed in the docs for ModelForm and pass it back rendered in the response. onSuccess of your AJAX call update the page with your response text and you are done.

for the views you can also use django's generic update views

you might also be interested in this: https://stackoverflow.com/questions/708801/whats-the-best-edit-in-place-plugin-for-jquery

Upvotes: 1

Related Questions