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>