×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Jobs

Too much javascript make site slow?

Too much javascript make site slow?

Too much javascript make site slow?

(OP)
Hello,


I having my first project using php codeigniter and on my registration page I have a lot of js functions.

Like Onclick on change, Autosuggest, select2, tabs and maybe more during development..

I this may slow my page/site?

As of now when I check speed of my page it takes 1-3 secs to load.
But my project still on localhost and don't have a lot of data for now.



I attach my javascript structure here, I found some tips online but I don't know what should I follow they have different approach.
Anyone can give suggestions would be better.

CODE --> javascript

<link rel="stylesheet" href="assets/css/autocomplete/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
        <script src="assets/js/autocomplete/jquery.easy-autocomplete.min.js" type="text/javascript"></script>
        
        <script src="assets/js/bootstrap-datetimepicker.min.js"></script>
        <script src="assets/js/editable_table/mindmup-editabletable.js"></script>
        <script language="javascript">
    // init copy features
$(document).ready(function(){
    
    $('#copy-lang').click(function(){
        $('.tabbable .tab-pane.active select, '+
          '.tabbable .tab-pane.active input[type=checkbox], '+
          '.tabbable .tab-pane.active input[type=text], '+
          '.tabbable .tab-pane.active textarea').each(function(){
            
            if($(this).attr('id') == null)return;
            
            var option_id = $(this).attr('id').substr($(this).attr('id').lastIndexOf('_')+1);
            var lang_active_id = $(this).attr('name').substr($(this).attr('name').lastIndexOf('_')+1);
            var option_val = $(this).val();
            var is_input = $(this).is('input');
            var is_input_text = $(this).is('input[type=text]');
            var is_area = $(this).is('textarea');
            var r_id = $(this).attr('id');
            var is_level = false;
            var is_tree_input = $(this).hasClass('tree-input-value');
            var is_level_splited;
            var is_level_parent_id;
            var is_HTMLTABLE = $(this).hasClass('HTMLTABLE');
            var is_PEDIGREE = $(this).hasClass('PEDIGREE');
            var curr_level = 0;
            
            if($(this).hasClass('skip-input'))
                return;

            if(!$(this).attr('id'))return;
            
            //if(is_tree_input)
            //    console.log('test: '+r_id);
            
            if(r_id.indexOf("level") > 0)
            {
                is_level_splited = r_id.split("_"); 
                is_level = true;
                option_id = is_level_splited[2];
            }
            
            if(is_input)
            {
                if($(this).attr('type') == 'checkbox')
                {
                    option_val = $(this).is(':checked');
                }
                else
                {
                    
                }
            }
            else if(is_HTMLTABLE)
            {
                option_val = $(this).parent().find('table > tbody').clone();
            }
            else if(is_PEDIGREE)
            {
                option_val = $(this).parent().find('ul.tree');
            }
            else if(is_area)
            {
                option_val = $(this).val();
            }
            else if(is_level)
            {
                curr_level = parseInt(is_level_splited[4]);
                is_level_parent_id = 0;
                if(curr_level > 0)
                {
                    is_level_parent_id = $('.controls #inputOption_'+is_level_splited[1]+'_'+option_id+'_level_'+parseInt(curr_level-1)).val();
                }

                option_val = $(this).val();
            }
            else
            {
                option_val = $(this).prop('selectedIndex');
            }
            
//            console.log('option_id: '+option_id);
//            console.log('lang_active_id: '+lang_active_id);
//            console.log('option_val: '+option_val);
//            console.log('is_input: '+is_input);
            
            $('.nav.nav-tabs li.lang a').each(function(){
                if(!$(this).parent().hasClass('active'))
                {
                    var lang_key = $(this).attr('href').substr(1);
                    
//                    console.log('lang_key: '+lang_key);
//                    console.log('#inputOption_'+lang_key+'_'+option_id);
                    
                    if(is_input)
                    {
                        if(is_tree_input)
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).parent().parent().find('select').val('');
                            $('#inputOption_'+lang_key+'_'+option_id).val('');
                            
//                            console.log('#inputOption_'+lang_key+'_'+option_id);
//                            console.log($('#inputOption_'+lang_key+'_'+option_id).val());
                        }
                        else if(is_input_text)
                        {
                            if($('#inputOption_'+lang_key+'_'+option_id).val() == '' ||
                               $.isNumeric(option_val))
                                $('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                        }
                        else
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).prop('checked', option_val);
                        }
                    }
                    else if(is_PEDIGREE)
                    {
                        //$('#inputOption_'+lang_key+'_'+option_id).parent().find('ul.tree').html(option_val.html());
                    }
                    else if(is_HTMLTABLE)
                    {
                        // replace based on dropdown translation
                        // console.log('lang_from_id: '+lang_active_id);
                        // console.log('lang_to_id: '+lang_key);
                        // console.log(option_id);
                        
                        //col_1_76_0
                        var option_val_clone = option_val.clone();
                        option_val_clone.find('tr td').each(function( index ) {
                            var col_index = $(this).index();
                            var row_index = $(this).parent().index();
                            var cur_content = $(this).html();
                            var lang_col_from = $('#col_'+lang_active_id+'_'+option_id+'_'+col_index);
                            var lang_col_to = $('#col_'+lang_key+'_'+option_id+'_'+col_index);
                            
                            if(lang_col_to.length == 1 && cur_content != '')
                            {
                                var dropdown_index = lang_col_from.find("span:contains('"+cur_content+"')").index();
                                var rep_text = lang_col_to.find('span').eq(dropdown_index).html();
                                option_val_clone.find('tr').eq(row_index).find('td').eq(col_index).html(rep_text);
                                
                                //console.log(dropdown_index + '|' + $( this ).html() );
                                //console.log(rep_text);
                            }
                        });
                        
                        $('#inputOption_'+lang_key+'_'+option_id).parent().find('table > tbody').html(option_val_clone.html());
                        
                        table_add_events(option_id+'_'+lang_key);
                        save_changes_table(option_id+'_'+lang_key);
                    }
                    else if(is_area)
                    {
                        if($('#inputOption_'+lang_key+'_'+option_id).val() == '' ||
                           $('#inputOption_'+lang_key+'_'+option_id).val() == '<br>' )
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).val(option_val).blur();
                        }
                    }
                    else if(is_level)
                    {
                        if (typeof load_and_select_index === 'function') {
                            load_and_select_index($('#inputOption_'+lang_key+'_'+option_id+'_level_'+is_level_splited[4]), option_val, is_level_parent_id);
                        }
                    }
                    else
                    {
                        //console.log('#inputOption_'+lang_key+'_'+option_id);
                        //console.log(option_val);
                        $('#inputOption_'+lang_key+'_'+option_id).prop('selectedIndex', parseInt(option_val)); 
                        $('#inputOption_'+lang_key+'_'+option_id).trigger('change');
                    }
                }
            });
        });
        
        return false;
    });
    
    $('#translate-lang').click(function(){
        $('.tabbable .tab-pane.active select, '+
          '.tabbable .tab-pane.active input[type=checkbox], '+
          '.tabbable .tab-pane.active input[type=text], '+
          '.tabbable .tab-pane.active textarea').each(function(){

            if($(this).attr('id') == null)return;
            
            var option_id = $(this).attr('id').substr($(this).attr('id').lastIndexOf('_')+1);
            var lang_active_id = $(this).attr('name').substr($(this).attr('name').lastIndexOf('_')+1);
            var option_val = $(this).val();
            var is_input = $(this).is('input');
            var is_input_text = $(this).is('input[type=text]');
            var is_area = $(this).is('textarea');
            var r_id = $(this).attr('id');
            var is_level = false;
            var is_tree_input = $(this).hasClass('tree-input-value');
            var is_level_splited;
            var is_level_parent_id;
            var is_HTMLTABLE = $(this).hasClass('HTMLTABLE');
            var is_PEDIGREE = $(this).hasClass('PEDIGREE');
            var curr_level = 0;
            
            if($(this).hasClass('skip-input'))
                return;

            if(!$(this).attr('id'))return;
            
            if(r_id.indexOf("level") > 0)
            {
                is_level_splited = r_id.split("_"); 
                is_level = true;
                option_id = is_level_splited[2];
            }
            
            if(is_input)
            {
                if($(this).attr('type') == 'checkbox')
                {
                    option_val = $(this).is(':checked');
                }
                else
                {
                    
                }
            }
            else if(is_HTMLTABLE)
            {
                option_val = $(this).parent().find('table > tbody').clone();
            }
            else if(is_PEDIGREE)
            {
                option_val = $(this).parent().find('ul.tree');
            }
            else if(is_area)
            {
                option_val = $(this).val();
            }
            else if(is_level)
            {
                curr_level = parseInt(is_level_splited[4]);
                is_level_parent_id = 0;
                if(curr_level > 0)
                {
                    is_level_parent_id = $('.controls #inputOption_'+is_level_splited[1]+'_'+option_id+'_level_'+parseInt(curr_level-1)).val();
                }

                option_val = $(this).val();
            }
            else
            {
                option_val = $(this).prop('selectedIndex');
            }
            
            $('.nav.nav-tabs li.lang a').each(function(){
                if(!$(this).parent().hasClass('active'))
                {
                    var lang_key = $(this).attr('href').substr(1);
                    //console.log('lang_key: '+lang_key);
                    
                    if(is_input)
                    {
                        if(is_tree_input)
                        {
                            $('#inputOption_'+lang_key+'_'+option_id).parent().parent().find('select').val('');
                            $('#inputOption_'+lang_key+'_'+option_id).val('');
                            
//                            console.log('#inputOption_'+lang_key+'_'+option_id);
//                            console.log($('#inputOption_'+lang_key+'_'+option_id).val());
                        }
                        else if(is_input_text)
                        {
                            if($.isNumeric(option_val))
                            {
                                $('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                            }
                            else if($('#inputOption_'+lang_key+'_'+option_id).val() == '' && option_val != '')
                            {
                                $.getJSON($('#translate-lang').attr('rel'), {from: lang_active_id, to: lang_key, value: option_val}, function( data ) {
                                    if(data.result != '')
                                    {
                                        $('#inputOption_'+lang_key+'_'+option_id).val(data.result);
                                    }
                                    else
                                    {
                                        $('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                                    }
                                });
                            }  
                        }
                        else
                        {
                            //console.log('#inputOption_'+lang_key+'_'+option_id);
                            //console.log(option_val);
                            //$('#inputOption_'+lang_key+'_'+option_id).val(option_val);
                            $('#inputOption_'+lang_key+'_'+option_id).prop('checked', option_val);
                        }
                    }
                    else if(is_PEDIGREE)
                    {
                        
                    }
                    else if(is_HTMLTABLE)
                    {
                        // replace based on dropdown translation
                        //console.log('lang_from_id: '+lang_active_id);
                        //console.log('lang_to_id: '+lang_key);
                        //col_1_76_0
                        var option_val_clone = option_val.clone();
                        option_val_clone.find('tr td').each(function( index ) {
                            var col_index = $(this).index();
                            var row_index = $(this).parent().index();
                            var cur_content = $(this).html();
                            var lang_col_from = $('#col_'+lang_active_id+'_'+option_id+'_'+col_index);
                            var lang_col_to = $('#col_'+lang_key+'_'+option_id+'_'+col_index);
                            
                            if(lang_col_to.length == 1 && cur_content != '')
                            {
                                var dropdown_index = lang_col_from.find("span:contains('"+cur_content+"')").index();
                                var rep_text = lang_col_to.find('span').eq(dropdown_index).html();
                                option_val_clone.find('tr').eq(row_index).find('td').eq(col_index).html(rep_text);
                                
                                //console.log(dropdown_index + '|' + $( this ).html() );
                                //console.log(rep_text);
                            }
                        });
                        
                        $('#inputOption_'+lang_key+'_'+option_id).parent().find('table > tbody').html(option_val_clone.html());
                        
                        table_add_events(option_id+'_'+lang_key);
                        save_changes_table(option_id+'_'+lang_key);
                    }
                    else if(is_area && option_val != '')
                    {
                        if($('#inputOption_'+lang_key+'_'+option_id).val() == '' ||
                           $('#inputOption_'+lang_key+'_'+option_id).val() == '<br>' )
                        {
                            $.getJSON($('#translate-lang').attr('rel'), {from: lang_active_id, to: lang_key, value: option_val}, function( data ) {
                                if(data.result != '')
                                {
                                    $('#inputOption_'+lang_key+'_'+option_id).val(data.result).blur();
                                }
                                else
                                {
                                    $('#inputOption_'+lang_key+'_'+option_id).val(option_val).blur();
                                }
                            });
                        }
                    }
                    else if(is_level)
                    {
                        if (typeof load_and_select_index === 'function') {
                            load_and_select_index($('#inputOption_'+lang_key+'_'+option_id+'_level_'+is_level_splited[4]), option_val, is_level_parent_id);
                        }
                    }
                    else
                    {
                        //console.log('#inputOption_'+lang_key+'_'+option_id);
                        //console.log(option_val);
                        $('#inputOption_'+lang_key+'_'+option_id).prop('selectedIndex', parseInt(option_val)); 
                        $('#inputOption_'+lang_key+'_'+option_id).trigger('change');
                    }
                }
            });
        });
        
        return false;
    });
        
});


<?php if (isset($package_num_amenities_limit)): ?>
                $(document).ready(function () {

                    $('.control-group .controls input[type=checkbox]').change(function (event) {
                        var selected_checkboxes = $('.tab-pane.active .control-group .controls input[type=checkbox]:checked').length;

                        if (selected_checkboxes > <?php echo $package_num_amenities_limit; ?>)
                        {
                            $(this).prop('checked', false);
                            ShowStatus.show('<?php echo lang_check('Limitation by package'); ?>: ' + '<?php echo $package_num_amenities_limit; ?>');
                        }
                    });

                });
<?php endif; ?>

       

  
         


        </script>

       <script type="text/javascript">
    $(document).ready(function(){
    $('#inputOption_1_20').on('change',function(){
    if( $(this).val()==="1BR"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').show(); //bedroom
    $('#inputOption_1_1190').hide(); //no. of cheques
    $('#search_option_1000').show(); //Furnish
    $('#search_option_1070').show(); //Rent Status
    $('#search_option_1095').show(); //Vacancy On Transfer
    $('#search_option_1080').show(); //Main Direction
    $('#search_option_1081').show(); //Primary View
    $('#search_option_1003').show(); //Developer
    $('#inputOption_1_1169').hide(); //Period
    $('#search_option_1061').hide(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').show(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1004').hide(); //Year Completion
    $('#search_option_1071').hide(); //Authority 

    }
    else if($(this).val()==="2BR"){
    $('#inputOption_1_1169').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_1000').show(); //Furnish
    $('#search_option_20').show(); //bedroom
    $('#search_option_1041').show(); //no. of cheques
    $('#search_option_1070').hide(); //Rent Status
    $('#search_option_1095').hide(); //Vacancy On Transfer
    $('#search_option_1080').hide(); //Main Direction
    $('#search_option_1081').hide(); //Primary View 
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').show(); //Period
    $('#search_option_1061').hide(); //Fitted
    $('#search_option_1060_from').hide(); //Area Min
    $('#search_option_1060_to').hide(); //Area Max
    $('#search_option_1003').hide(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1071').hide(); //Authority   
    }

    else if($(this).val()==="Off Plan Re-Sale"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').show(); //bedroom
    $('#search_option_1041').hide(); //no. of cheques
    $('#search_option_1000').hide(); //Furnish
    $('#search_option_1070').hide(); //Rent Status 
    $('#search_option_1095').hide(); //Vacancy On Transfer
    $('#search_option_1080').hide(); //Main Direction
    $('#search_option_1081').hide(); //Primary View
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').hide(); //Period
    $('#search_option_1061').hide(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').show(); //Developer
    $('#search_option_1044').show(); //Year Launched
    $('#search_option_1071').hide(); //Authority  
    }

    else if($(this).val()==="Commercial Sale"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').hide(); //bedroom
    $('#search_option_1041').hide(); //no. of cheques
    $('#search_option_1000').show(); //Furnish
    $('#search_option_1070').show(); //Rent Status
    $('#search_option_1095').show(); //Vacancy On Transfer
    $('#search_option_1080').show(); //Main Direction
    $('#search_option_1081').show(); //Primary View 
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').hide(); //Period
    $('#search_option_1061').show(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').hide(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1071').show(); //Authority  
    }

    else if($(this).val()==="Commercial Rent"){
    $('#search_option_36_from').show(); //price min
    $('#search_option_36_to').show(); //price max
    $('#search_option_20').hide(); //bedroom
    $('#search_option_1041').show(); //no. of cheques
    $('#search_option_1000').show(); //Furnish
    $('#search_option_1070').hide(); //Rent Status
    $('#search_option_1095').hide(); //Vacancy On Transfer
    $('#search_option_1080').hide(); //Main Direction
    $('#search_option_1081').hide(); //Primary View 
    $('#search_option_70').show(); //Keywords
    $('#search_option_1067').hide(); //Period
    $('#search_option_1061').show(); //Fitted
    $('#search_option_1060_from').show(); //Area Min
    $('#search_option_1060_to').show(); //Area Max
    $('#search_option_1003').hide(); //Developer
    $('#search_option_1044').hide(); //Year Launched
    $('#search_option_1071').show(); //Authority
    }
});
    });

    </script> 



Thankyou!

RE: Too much javascript make site slow?

May not be a javascript problem: looks more like jquery. Don't know a lot about jquery - does it generate one query for every $('#search_option')?

RE: Too much javascript make site slow?

(OP)
Hello Xwb,

Actually on that functions I use for the dependent fields.


search_options are the div ID's of my form.
and call my values thru "{options_values_20}" Using Codeigniter.

Here's a example code

CODE --> html

<div class="col-md-2" id="search_option_2">
                <label>{options_name_2}</label>
                    <select class="form-control input-lg ">
                       {options_values_2}
                    </select>
                </div> 


So if I select a value on my dropdown list specific field will hide.


Do you think this can cause slow on my page?


Thank you




RE: Too much javascript make site slow?

Quote:

Too much javascript make site slow?

Yes it can.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close