[SOLVED] Trigger toggle change in home menu bar

Hi,

I have been working with the Toggle Check button without and issue until I place it in the menu bar on the index.html.

Now I cannot trigger using $(’#night_mode_toggle’).on(‘toggle:change’, function ()

HTML

<div class="statusbar"></div>

<div class="panel panel-left panel-cover">

	<div class="page">

		<div class="page-content">
		
			<div class="block-title"></div>

			<div class="block">
				<img src="img/person.png" alt=""> 
				<p id="welcome_profile_name">Welcome David!</p>
			</div>

			<div class="block-title">My Menu</div>         
			<div class="list links-list">
				<ul>
								
				</ul>
			</div>
			
			<div class="list simple-list no-hairlines-md">
				<ul>
					<li>
						<span>Night Mode</span>
						<label class="toggle toggle-init" id="night_mode_toggle">
							<input type="checkbox" id="night_mode_toggle_box" checked>
							<span class="toggle-icon"></span>
						</label>
					</li>							
				</ul>
			</div>

		</div>

	</div>

</div>

<div class="view view-main"></div>	

SCRIPT

$(document).on('page:mounted', function (e) {

			
	night_mode = localStorage.getItem('night_mode');
	
	if (night_mode == "on")
	{
		console.log("on==");
		$('#night_mode_toggle_box').prop('checked',false);
		
	}
	else
	{
		
		console.log("off==");
		$('#night_mode_toggle_box').prop('checked',true);
		
	}
	
	$('#night_mode_toggle').on('toggle:change', function () {
		
		//console.log($('#status_toggle').prop('checked'));
		
		if ($('#night_mode_toggle_box').prop('checked') == true) 
		{					
			
			localStorage.setItem('night_mode', "on");
			document.body.classList.add("theme-dark");
			console.log("on");
			
		}
		else
		{					
			
			localStorage.setItem('night_mode', "off");
			document.body.classList.remove("theme-dark");
			console.log("off");
			
		}
	
	});
	
	
})

Any pointers? Thanks.

Without View in left panel it won’t be initialized and toggle-init just ignored. Init it then manually with app.toggle.create() method

1 Like

Hi

Your solution works! Thanks.

Posted code below.

var toggle = app.toggle.create({
el: '.toggle',
	on: {
		change: function () {
			
			if ($('#night_mode_toggle_box').prop('checked') == true) 
			{					
				
				localStorage.setItem('night_mode', "on");
				document.body.classList.add("theme-dark");
				//console.log("on");
				
			}
			else
			{					
				
				localStorage.setItem('night_mode', "off");
				document.body.classList.remove("theme-dark");
				//console.log("off");
				
			}
		}
	}
	
})