Improve performance in jquery when change in drop down value

Question

I have a drop down list , when changing value hiding and displaying some other fields.Currently its executing 1s in 8GB , some other PC with 2G or 4G it takes 5s to execute the code. In firefox it takes some more time compared to chrome , safari.

My Code:

 <?php 
         $this->widget('application.extensions.select2.XSelect2', array(
           'model'=>CampaignPostCodeModel::model(),
           'attribute'=>'crm_campaign_post_code_id',
           'data'=> $tt_fields,
           'events'=>array(
           'change'=>"js:function (element) {            
               recalldelay(this);}"),             
           'htmlOptions'=>array(
                'style'=>'width:220px', 'id'=>'postcode', 'prompt'=>utf8_encode(yii::t('operator','SelectField'))       
            ),));
 ?>

<script type="text/javascript">

function recalldelay(elem){
    $('#ok').attr('disabled',true);
    $.ajax({
        type: 'POST',
        url: "<?php  echo  CController::createUrl('operator/RecallDelay'); ?>",  
        update:  '#postcode_id',
        data: {"postcode_id":document.getElementById("postcode").value,"taskid":'<?php echo $taskid?>',"team":'<?php echo $is_team?>'}, 
        success: function(data){

            $('#recallby').select2('destroy');
            $('#recallby').prop('disabled', true);
            $("#recallby").html('');
            $('#recallby').select2();
            $('#recalldate').attr('disabled','disabled');
            $("#trans_recallby").html('');
            $("#trans_recalldate").val('');
            $('#recalldate').val('');
            $('#lbl_trans_recalltime').hide();
            $('#trans_recalldate').hide();
            $('#lbl_trans_recallby').hide();
            $('#trans_recallby').select2('container').hide();
            $('#fld_set').hide();
            $('#fld_trans_set').hide();


        if (data.trim() != "" && data != null)
        {
            var obj = data.split(",");
            if(obj[0] == "Standard"){
                $('#fld_set').show();

                $("#recallby").html("");
                $('#recallby').select2('destroy');
                if (<?php echo $is_team?>  != 1)
                $('#recallby').prop('disabled', true);
                else
                    $('#recallby').prop('disabled', false);
                $('#recallby').select2();
                var $str = $.trim(obj[1]).substr (0,$.trim(obj[1]).lastIndexOf (" ") + 1);
                var $date = $str.split("-");
                var $str1 = $.trim(obj[1]).substr ($.trim(obj[1]).lastIndexOf (" ") + 1,$.trim(obj[1]).length);
                var $time = $str1.split(":");
                  $("#recalldate").datetimepicker({  
                        dateFormat: 'yy-mm-dd H:i'
                    }).datetimepicker("setDate",new Date($date[0],$date[1]-1,$date[2],$time[0],$time[1] ));

            }
            else if(obj[1] == "Assigned"){
                $('#fld_set').show();

                $("#recallby").html(obj[0]);
                $('#recallby').select2('destroy');
                $('#recallby').prop('disabled', false);
                $('#recallby').select2();
                $('#cal_btn').show();
                var str = $.trim(obj[2]).substr (0,$.trim(obj[2]).lastIndexOf (" ") + 1);
                var date = str.split("-");
                var str1 = $.trim(obj[2]).substr ($.trim(obj[2]).lastIndexOf (" ") + 1,$.trim(obj[2]).length);
                var time = str1.split(":");
                  $("#recalldate").datetimepicker({  
                        dateFormat: 'yy-mm-dd H:i'
                    }).datetimepicker("setDate",new Date(date[0],date[1]-1,date[2],time[0],time[1] ));
            }
            else if($.trim(obj[0]) == "Previous"){
                $('#fld_set').show();
                $('#cal_btn').hide();
                if (<?php echo $is_team?>  != 1)
                    $('#recallby').prop('disabled', true);
                    else
                        $('#recallby').prop('disabled', false);
                $('#recalldate').prop('disabled','disabled');
            }
            else if(obj[1] == "Transfer"){

                if (obj[2] == 1)
                {
                    $('#fld_trans_set').show();
                    $('#lbl_trans_recalltime').show();
                    $('#trans_recalldate').show();
                }
                if (obj[3] == 1)
                {
                    $('#fld_trans_set').show();
                    $('#lbl_trans_recallby').show();
                    $("#trans_recallby").html(obj[0]);
                    $('#trans_recallby').select2('destroy');
                    $('#trans_recallby').prop('disabled', false);
                    $('#trans_recallby').select2();
                    $('#trans_cal_btn').show();
                }
                if (obj[3] == 0 || obj[3] == 2)
                {
                    $('#fld_trans_set').show();
                    $('#lbl_trans_recallby').show();
                    $("#trans_recallby").html(obj[0]);
                    $('#trans_recallby').select2('destroy');
                    $('#trans_recallby').prop('disabled', true);
                    $('#trans_recallby').select2();
                    if (obj[3] == 2) 
                        $('#trans_cal_btn').show();
                    else
                        $('#trans_cal_btn').hide();
                }

            }
            else if($.trim(obj[0]) == "SuccessRecall")
            {

                $('#fld_trans_set').hide();
                $('#fld_recallby').hide();
                $('#fld_set').show();
                $('#recalldate').removeAttr('disabled');
                  $("#recalldate").datetimepicker({  
                        dateFormat: 'yy-mm-dd H:i',
                            timeFormat: 'hh:mm'
                    }).datetimepicker("setDate",new Date());
            }
            else{
                $('#fld_set').show();               
                $("#recallby").html(obj[0]);
                $('#recallby').select2('destroy');
                if (<?php echo $is_team?>  != 1)
                    $('#recallby').prop('disabled', true);
                    else
                        $('#recallby').prop('disabled', false);
                $('#recallby').select2();
                $('#cal_btn').show();
                var str = $.trim(obj[1]).substr (0,$.trim(obj[1]).lastIndexOf (" ") + 1);
                var date = str.split("-");
                var str1 = $.trim(obj[1]).substr ($.trim(obj[1]).lastIndexOf (" ") + 1,$.trim(obj[1]).length);
                var time = str1.split(":");
                  $("#recalldate").datetimepicker({  
                        dateFormat: 'yy-mm-dd H:i'
                    }).datetimepicker("setDate",new Date(date[0],date[1]-1,date[2],time[0],time[1] ));

            }


            if($.trim(obj[0]) != "Previous")
            $('#recalldate').removeAttr('disabled');
        }
        else{
            $('#fld_set').hide();

            $('#fld_trans_set').hide();
        }               
        $('#ok').attr('disabled',false);
            } 
        });
}
</script>

Please anyone help me to improve the performance of code to execute in 1S in all PCs.

Please advise how to improve this code $("#recalldate").datetimepicker({ dateFormat: 'yy-mm-dd H:i' }).datetimepicker("setDate",new Date(date[0],date[1]-1,date[2],time[0],time[1] )); It leads slow down performance — Silviaa, Jun 04 '15 at 08:15

MaxZoom · Answer 1 · 2015-06-04T04:23:33.517

1

Try find out on which code fragment the time is spend in big volume. You can insert time stamp before and after some code block to find out how long it takes or use 3rd party program (such as Yslow).
Then you need to analyze that fragment to see if it could be optimized.
From what I noticed by looking at the code:

eliminate duplicate jQuery searches by reusing variable i.e.

var $recallBy = $('#recallby');
$recallBy.html(obj[0]);
$recallBy.select2('destroy'); // etc

instead of using if (val=1) else if (val=2) .. use switch(val) i.e.

   switch(obj[1]) {
   case 'Standard' :  <code>
   case 'Previous' :  <code> 
   case 'SuccessRecall' : <code>
   // etc
  }

edited Jun 04 '15 at 04:23

answered Jun 04 '15 at 04:15

MaxZoom

6,949
5
24
41

using switch it executes same time – Silviaa Jun 04 '15 at 05:24
Are you [sure?](http://stackoverflow.com/q/2922948/4454454) For more then one if-else the switch is better. – MaxZoom Jun 04 '15 at 11:50
Just for curiosity, did you run some tool to measure performance of your code fragments? – MaxZoom Jun 04 '15 at 12:00

Improve performance in jquery when change in drop down value

1 Answers1