Add a loading state

[pimpreneil]

Hi all, I think it could be nice to add a loading state to the switch. For example, in my projet, I am using the switch to trigger an Ajax action (using the onSwitchChange event). But my async action tends to take up to 1sec to process, so I figured it could be interesting to introduce a loading state (disabled state with a loader on it) that I would enable when my call starts and disable when it is done.

[ghostofrecon]

I believe you could accomplish this by using the callback on your ajax request. I.e. bind the following func to your triggering event function () { $(switchelement).bootstrapSwitch({disabled:true}); $.ajax({ url: someurl.html }).done(function () {}) .always(function () { $(switchelement).bootstrapSwitch({disabled:false}); }) }

just a thought...

[shahzadthathal]

Hi @ghostofrecon , how can I do this in this code?

 $(function() {

	$("[name='my-checkbox']").bootstrapSwitch();
	$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', 
	    function(event, state) {
	    	var beforeUpdateState = state;	        
	        var item = $(this);
	        var id = item.data('id');
	        console.log(state);
	        //item.bootstrapSwitch(toggleState, true)

	        $.post('test.php',{id:id,status:state})
	        .done(function(res){
	        	console.log('res',res);
	        	if(res=='notupdated')
	        		item.bootstrapSwitch('toggleState', beforeUpdateState);
	        });
	});

});

Thanks

[deevus]

Came here looking for an actual loading state, whereby the switch can display a loading icon while a promise is running. Is this a possibility?