Javascript expand all items

Javascript has always confused me… I’d rather be coding in PHP… :slight_smile:
Anyway, can someone give me advice on how to have the
complete list of people expanded on page load without having to click expand?
Code is below…

<ul class="tree">
	<li>(<a href="javascript:;" rel="{{ affiliate_id }}"{% if top_count > 0 %} class="load_subs" title="{{ text_expand }}"{% endif %}>{{ top_count }}</a>)  <strong>{{ text_self }}</strong><img src="{{ image_loading }}" class="loading" style="display:none;" /></li>
</ul>

<script type="text/javascript">
$(document).ready(function() {
	$(document).on('click', '.load_subs', function() {
		//$(this).attr('title', ($(this).attr('title') == '{{ text_expand }}' ? '{{ text_collapse }}' : '{{ text_expand }}'));
		var _p = $(this).parent();
		var _this = $(this);
		if($(_p).find('ul').length < 1) {
			$(_p).find('.loading').show();
			$.ajax({
				url: 'index.php?route=extension/module/mta/downline/l&affiliate_id='+$(_this).attr('rel'),
				dataType: 'json',
				success: function(_r) {
					$(_p).append('<ul></ul>');
					for(var i = 0; i < _r.length; i++) {
						var _li = '<li>(';
						if(_r[i].c > 0) _li += '<a href="javascript:;" class="load_subs" rel="'+_r[i].affiliate_id+'">';
						_li += _r[i].c;
						if(_r[i].c > 0) _li += '</a>'
						_li += ') <span class="aff_name">'+_r[i].name+'</span> ';
						
						{% if show.email %}
						_li += '<a href="mailto:'+_r[i].email+'" class="mailto-link">'+_r[i].email+'</a> ';
						{% endif %}						
						{% if show.phone %}
						_li += ' '+_r[i].telephone+' ';
						{% endif %}						
						_li += ' <img src="{{ image_loading }}" class="loading" style="display:none;" />';
						
						{% if show.earnings %}
						_li += '<span class="help">';
						_li += '{{ text_abbr_te }}: ' + _r[i].e_te + ' / ' + '{{ text_abbr_elm }}: ' + _r[i].e_elm;
						_li += '</span>';
						{% endif %}
						_li += ' </li>';
						$(_p).find('ul').append(_li);
					}
					$(_p).find('.loading').hide();
				}
				});
		} else {
			$($(_p).find('ul')[0]).toggle();
		}
	});
	if($('.load_subs').length > 0) $('.load_subs').trigger('click');
}
);
</script>

Following some best practices with regards naming conventions would be a good start. I see lines like the following and just want to run a mile.

if(_r[i].c > 0) _li += '<a href="javascript:;" class="load_subs" rel="'+_r[i].affiliate_id+'">';

What is _r[i].c?

_r is the response, but what does that data look like? Could it not have a more descriptive name? What is .c?

The term for this code is obfuscation.

Just to add the underscore is traditionally used in OOP to indicate this is a _privateVariable.

With regards var _this = $(this); you could used var self, var that or maybe even target.

1 Like

Hi @sidtherrien, I guess the easiest solution would be to just trigger a click event programmatically:

// Add click event listener as before
$(document).on('click', '.load_subs', function () {
 // ...
})

// Trigger click event right away
$('.load_subs').click()

A better approach though would be to extract the expand logic to a named function, so that you can call it directly… this would however require some adjustment regarding the this binding etc.

Also, it seems like you’re using a PHP template engine to inject conditions into your JS? This is a very bad idea, JS has control structures by itself. ;-) The code will become much less confusing then.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.