如何在HTML中按钮单击时更改django中的值?

时间:2018-04-27 21:26:04

标签: python html django button

我正在尝试实现一个函数,当我单击“激活”按钮时,我的Django数据库中该字段的值将更改为“活动”,并在HTML页面上显示为活动状态。如果单击“停用”,则文本将在django数据库中更改为“deactive”及其值。

这是我当前的HTML页面:

   <div class="col-sm-5">
    <div class="panel panel-primary">
    <div class="panel-heading">
       <h3 class="panel-title">Job activation status</h3>
    </div>
       <div class="panel-body">
          <b>Status</b>: Active
          <span style="padding-left:20px;"></span>
          <button type="button" class="btn btn-primary">Activate</button>
          <button type="button" class="btn btn-primary">Deactivate</button>
          <button type="button" class="btn btn-primary">Dissolve</button>

      </div>
     </div>
     </div>

我的models.py如下:

class Job(models.Model):
    def __unicode__(self):
        return self.name
    name = models.CharField('Job Name',max_length=128)
    # when the job was created
    date_created = models.DateTimeField('Date Created', auto_now=True)
    # what entity/organization needs this job?
    client_organization = models.CharField('What organization do you represent?', max_length=64)
    # short description
    description = models.TextField('Job Description', max_length=256)
    # end product to be delivered
    deliverable = models.TextField('Deliverable', max_length=256)
    # when Job is due for completion
    duedate = models.DateTimeField('Date Due')
    # all persons who may be affected by project
    #stakeholders = models.TextField('Stakeholders')
    # important technical requirements
    #additional_information = models.TextField('Additional Information', blank = True)
    # budget estimate
    #budget = models.CharField('Budget', max_length=64)
    # file attachments
    #attachments = models.FileField(upload_to='job', blank = True)
    creator = models.ForeignKey(User,related_name = 'jobs')
    organizations = models.ManyToManyField(Organization, through = 'JobRequest', blank=False, null=True)
    #organizations = models.CharField(default="nothing",null=True,max_length = 256)
    contact_information = models.CharField('Contact Information', max_length = 256, blank = False, null=True)
    skill_required = models.CharField('Volunteer skills required', max_length=256, blank = False, null=True)
    hours_day = models.CharField('Number of hours per day', max_length=256, blank = False, null=True)
    #  Job is closed after a jr is confirmed
    closed = models.BooleanField(default = False)
    # some tags to determine what organizations to submit job to
    categories = models.ManyToManyField(Category, related_name = 'jobs')
    #categories = models.CharField(default="nothing",null=True, max_length = 256)
    status = models.IntegerField(default = 0, choices = ((0, 'Pending'), (1, 'Approved'), (2, 'Disapproved'), (3, 'Closed')))
    class Meta:
       permissions = (
           ( 'view_job','Can view Job' ),
           ( 'edit_job','Can edit Job'),
           ( 'is_creator', 'Is a creator of Job')
           )

我需要帮助向models.py添加一个字段,该字段根据HTML中的按钮单击而变化,并根据单击的按钮在HTML页面中显示active / deactive。我还需要帮助相应地修改HTML页面

1 个答案:

答案 0 :(得分:5)

如果您只需要两种状态(有效且无效),则需要BooleanField,因此在您的模型中添加以下内容:

active = models.BooleanField(default = False)

然后,您需要在views.py中创建一个函数来更新数据库中的模型(我将其命名为ajax_change_status):

from django.http import JsonResponse
from xxx.models import Job

def ajax_change_status(request):
    active = request.GET.get('active', False)
    job_id = request.GET.get('job_id', False)
    # first you get your Job model
    job = Job.objects.get(pk=job_id)
    try:
        job.active = active
        job.save()
        return JsonResponse({"success": True})
    except Exception as e:
        return JsonResponse({"success": False})
    return JsonResponse(data)

然后,在urls.py中为你的ajax函数添加url:

url(r'^ajax/change_status/$', views.ajax_change_status, name='ajax_change_status')

最后在你的HTML中,每次单击按钮都需要调用该函数:

<script>
    $("#button_id").on('click', function () {
      var username = $(this).val();
      var active = <true> // or false, you have to set it
      var active = <id> // you have to set it
      $.ajax({
        url: '/ajax/validate_username/',
        data: {
          'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val(),
          'active': active
          'job_id': username
        },
        dataType: 'json',
        success: function (data) {
          if (data.success) {
            alert("ajax call success.");
            // here you update the HTML to change the active to innactive
          }else{
            alert("ajax call not success.");
          }
        }
      });

    });
  </script>

最后,不要忘记将csrf标记放在HTML中:

{% csrf_token %}