6.22-6.27 JLL--实习日志--Ajax+js 端实现

实现的效果图如下

其中遇到的问题

1.1 怎么实现初始化的时候自动的跳转到 对应的Yes/No 的界面，我的理解是前端需要自动的改变class=”switch-right switch-primary switch-small” switch-right变成 switch-left 是需要通过js ？
解决方案是写一个js ,应该
注意延迟加载，
注意jquery的写法$(b).removeClass('switch-on');
注意 getElementsByClassName("switch-on")[0];
得到的结果是list类型的数据
注意 有一个层次性 先通过id 然后通过class获得对应下面的对象

 <script type="text/javascript">
  setTimeout(function(){
var b  = document.getElementById("{{ field.html_name }}").getElementsByClassName("switch-on")[0];
 $(b).removeClass('switch-on');
 $(b).addClass('switch-off');
  },2000);

错误的方式 ：
达成的效果，所有的标签都是变成off 的状态

   setTimeout(function(){ 
 var b  = document.getElementById("{{ field.html_name }}").getElementsByClassName("switch-on")[0];
$(b).removeClass('switch-on');
$(b).addClass('switch-off');
 },2000);

1.2 调用一次以后没有办法持续的跟踪。现在的js 只能实现一次
解决的方案：写js 的地方不正确，应该写在每一个生成标签的下面，需要注意作用区间

1.3 change_condition 函数里面怎么取前端对应的属性值 现在没有传到后端，ajax 的方式是第一次尝试，

前端
注意 利用jquery 找到某id 下 的label 标签的js 写法var c = $("#{{ field.html_name }}").find("label[for ='a']"); 这也是一个list类型的
注意 ajax的get方式传递函数的方式 $.get("",function(){})

  <script type="text/javascript">
setTimeout(function(){
 value_of = '';
 var c = $("#{{ field.html_name }}").find("label[for ='a']");
 for (var i = 0; i < c.length; i++) {
 c[i].addEventListener('click',function(){
 var b  = document.getElementById("{{ field.html_name }}").getElementsByClassName("switch-on")[0];
if (b!==undefined) 
 {
     value_of = 'NO';
  } else{
    value_of =  'True';  
};                                     $.get("/property/change_conditon/{{property_instance.id}}/?a={{field.html_name}}&b="+value_of,function(){});
   });
  }},100)
  </script>                                        

view 端
注意点 传入property_id这个值找到property_instance，然后去Property_Extension里面filter 如果没有property_extension_instance，就需要自己创建一个 ？？？怎么会没有呢

注意点 ：python 通过string 类型找到对应的attribute ，使用内置函数#__dict__['color'] 就可以了 ！！

def change_condition(request, property_id):
  if request.is_ajax():
        html_name =str(request.GET.get('a'))
        value_of = str(request.GET.get('b'))
property_instance=get_object_or_404(Property,pk=int(property_id),RecordEndDate="NULL")     property_extension_instance=Property_Extension.objects.filter(Q(Property=property_instance)).first()
  if not property_extension_instance:
  property_extension_instance = Property_Extension(Property=property_instance)
        if not can_control(property_instance, request):
            return views.page_not_found(request)
        print property_extension_instance.__dict__[html_name]
        property_extension_instance.__dict__[html_name] = value_of   
        property_extension_instance.save()
        return HttpResponse()

1.4 form 的检查机制有问题 formFieldLocalisation 的 函数 ，会报错
因为了leon 改动了 locsation 增加了一个 data_model_label_interface 作用是可以替换 用户 替换不同的 语言显示
在 localisation.py里面增加一行 default_label_setting = localisation.data_model_label_interface
在 form 端 error_messages={'required': data_model_label_setting.get('PleaseEnterNewPassword') },
在 model u端 EmployeeDepartment = models.CharField(data_model_label_setting.get('EmployeeDepartment'), max_length=255, default="")

1.5 出现 点击一次，后台传输两次的情况，因为change 捕捉到滑动这个动作是一个持续性问题，在一段时间内持续触发 所以有两次的情况
前端触发的方式不正确 ，一开始用change 的方式触发，因为这是一个持续性动作，所以某个时间内持续，会被认为触发两次 ，改动的方式是通过其他的方式进行触发 ，
注意bind 事件和 on ,ready 三者区别 ???
注意 mouseup touchend 两个 事件 和change 的区别， 前者是有一个过程的，后者是一个 瞬间的变化

  $('#{{ field.html_name }}').bind("mouseup touchend",function() {setTimeout(function(){
 var value_of = '';
 var b  = document.getElementById("{{ field.html_name }}").getElementsByClassName("switch-on")[0];
if (b!==undefined) 
{
value_of = 'NO';                                 }
else{
  value_of =  'True';  
 };                                      
 $.get("/property/change_conditon/{{property_instance.id}}/?a{{field.html_name}}&b="+value_of,function(){
 });
 },100)
 });

1.6 空白框部分点击没有反应 ！ 原因是因为没有绑定事件在这个上面，我们需要手动绑定
注意 利用jquery 找到某id 下 的label 标签的js 写法var c = $("#{{ field.html_name }}").find("label[for ='a']"); 这也是一个list类型的
注意 通过循环的方式给label 标签增加 事件的方式！！

  <script type="text/javascript">
setTimeout(function(){
 value_of = '';
 var c = $("#{{ field.html_name }}").find("label[for ='a']");
 for (var i = 0; i < c.length; i++) {
 c[i].addEventListener('click',function(){
 var b  = document.getElementById("{{ field.html_name }}").getElementsByClassName("switch-on")[0];
if (b!==undefined) 
 {
     value_of = 'NO';
  } else{
    value_of =  'True';  
};
                                      $.get("/property/change_conditon/{{property_instance.id}}/?a={{field.html_name}}&b="+value_of,function(){});
 });
  }
 },100)
 </script>