JQuery Question/Help

[kevindougans]

Hi there,

I'm sure there is an easy way to do this so let me ask.

I have an "admin" page full of video thumbnials that I want to allow the user to sift through and pick which videos should be enabled or disbaled. To keep with current trends I'm using a little JQuery iphone ON/OFF switch/selector. Because there is no guarentee the amount of videos per page (its pulled form db, so could be 3 or could be 50) I would like to do the JQuery code for these selectors which is:

$('#vid-1').iphoneSwitch("on", 
    function() {
       $('#ajax').load('/handle.php?vid_id=1&status=on');
    },
    function() {
       $('#ajax').load('/handle.php?vid_id=1&status=off');
    },
    {
        switch_on_container_path: '/img/iphone_switch_container_off.png'
    });

Instead of repeating this x amount of times on the page for each video is there a generic way of enabling all divs ids that start with "vid-". I'm sure there is and I'm sure I've seen and used it before but can't think of the syntax.

Thanks,

Kevin

[stbuchok]

Lets assume the that vid-1 is a div (just for argument sake). Add an attribute to the div called data-id and then try the following:

JavaScript

$('[data-id]').iphoneSwitch("on", 
    function() {
       $('#ajax').load('/handle.php?vid_id=' + $(this).attr('data-id') + '&status=on');
    },
    function() {
       $('#ajax').load('/handle.php?vid_id=' + $(this).attr('data-id') + '&status=off');
    },
    {
        switch_on_container_path: '/img/iphone_switch_container_off.png'
    });

HTML

<div data-id="1"></div>
<div data-id="2"></div>
<div data-id="3"></div>
<div data-id="4"></div>
<div data-id="5"></div>
<div data-id="6"></div>

This should allow for any number of videos. All you need to do is add the data-id attribute with the id of the video you want to display when rendering out all the videos.

[kevindougans]

Hi there,

Thanks for the assistance.

The console shows this however:

GET /handle.php?vid_id=undefined&status=off

Any ideas?

[stbuchok]

Please show all the code.

[kevindougans]

Please excuse the messiness as I've been working on this section all day and testing lots of different bits and pieces and its due a bit of a cleanup. I can't see how any of the messiness would affect the jquery though but I could be wrong.

<ul id="test-list"><li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="1">sebastian ingrosso smashing mamboooooo!</div><div id="vid-1" data-id="1"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="2">pete tong closing 2011</div><div id="vid-2" data-id="2"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="3">Afrojack & Paris Hilton</div><div id="vid-3" data-id="3"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="4">unknown</div><div id="vid-4" data-id="4"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="5"></div><div id="vid-5" data-id="5"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="6"></div><div id="vid-6" data-id="6"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="7"></div><div id="vid-7" data-id="7"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="8"></div><div id="vid-8" data-id="8"></div></div></li>
<li><div><img class="handle" src="http://placehold.it/45x45" /><div class="editable" id="9"></div><div id="vid-9" data-id="9"></div></div></li>
<form action="/en/madmin/ajax/update_video_order/" method="post" name="sortables"> 
  <input type="hidden" name="test-log" id="test-log" /> 
</form></ul> <div id="ajax"></div>
					  <div class="clear"></div>			
			
<pre>
<div id="sortinfo">Waiting for update</div>
</pre>


		<script type="text/javascript">
  // When the document is ready set up our sortable with it's inherant function(s)
  $(document).ready(function() {
  	
  $('[data-id]').iphoneSwitch("on", 
    function() {
       $('#ajax').load('/handle.php?vid_id=' + $(this).attr('data-id') + '&status=on');
    },
    function() {
       $('#ajax').load('/handle.php?vid_id=' + $(this).attr('data-id') + '&status=off');
    },
    {
        switch_on_container_path: '/img/iphone_switch_container_off.png'
    });
    
    	
  	
   $("#test-list").sortable({
		update : function () {
			serial = $('#test-list').sortable('serialize');
			$.ajax({
				url: "/en/madmin/ajax/update_video_order/",
				type: "post",
				data: serial,
				error: function(){
					alert("theres an error with AJAX");
				}
			});
		}
		});
		
    
    $(".editable").editable("/en/madmin/ajax/update_video_name", { 
    indicator : '<img src="/img/indicator.gif">',
    type   : "text",
    submit : "OK",
    style  : "inherit",
  });
});
</script>

[stbuchok]

What do you get when you add alerts for the following inside the function calls of iphoneSwitch

alert($(this).attr('data-id'));
alert($(this).prop('data-id'));
alert($(this).attr('id'));
alert($(this).prop('id'));
alert(this);

[kevindougans]

all undefined except the last one which says "[object domwindow]"

[stbuchok]

Where did you get this plugin from?

[kevindougans]

here:

and sorry forgot to paste the code from the include

/************************************************ 
*  jQuery iphoneSwitch plugin                   *
*                                               *
*  Author: Daniel LaBare                        *
*  Date:   2/4/2008                             *
************************************************/

jQuery.fn.iphoneSwitch = function(start_state, switched_on_callback, switched_off_callback, options) {

	var state = start_state == 'on' ? start_state : 'off';
	
	// define default settings
	var settings = {
		mouse_over: 'pointer',
		mouse_out:  'default',
		switch_on_container_path: '/img/iphone_switch_container_on.png',
		switch_off_container_path: '/img/iphone_switch_container_off.png',
		switch_path: '/img/iphone_switch.png',
		switch_height: 27,
		switch_width: 94
	};

	if(options) {
		jQuery.extend(settings, options);
	}

	// create the switch
	return this.each(function() {

		var container;
		var image;
		
		// make the container
		container = jQuery('<div class="iphone_switch_container" style="height:'+settings.switch_height+'px; width:'+settings.switch_width+'px; position: relative; overflow: hidden"></div>');
		
		// make the switch image based on starting state
		image = jQuery('<img class="iphone_switch" style="height:'+settings.switch_height+'px; width:'+settings.switch_width+'px; background-image:url('+settings.switch_path+'); background-repeat:none; background-position:'+(state == 'on' ? 0 : -53)+'px" src="'+(state == 'on' ? settings.switch_on_container_path : settings.switch_off_container_path)+'" /></div>');

		// insert into placeholder
		jQuery(this).html(jQuery(container).html(jQuery(image)));

		jQuery(this).mouseover(function(){
			jQuery(this).css("cursor", settings.mouse_over);
		});

		jQuery(this).mouseout(function(){
			jQuery(this).css("background", settings.mouse_out);
		});

		// click handling
		jQuery(this).click(function() {
			if(state == 'on') {
				jQuery(this).find('.iphone_switch').animate({backgroundPosition: -53}, "slow", function() {
					jQuery(this).attr('src', settings.switch_off_container_path);
					switched_off_callback();
				});
				state = 'off';
			}
			else {
				jQuery(this).find('.iphone_switch').animate({backgroundPosition: 0}, "slow", function() {
					switched_on_callback();
				});
				jQuery(this).find('.iphone_switch').attr('src', settings.switch_on_container_path);
				state = 'on';
			}
		});		

	});
	
};

[kevindougans]

would you recommend i have a browse around for perhaps a newer version of something similar? just realised that was from 2008

[stbuchok]

I'm going to see if I can duplicate the issue, for now though can you add an ending ul tag to your list (there is a possibility this could be screwing something up).

[kevindougans]

I'm going to see if I can duplicate the issue, for now though can you add an ending ul tag to your list (there is a possibility this could be screwing something up).

not the ul, just tested :(

[stbuchok]

So I played around a bit and found that the issue is witht he plugin. When it calls the function for on and off, the context of the this object is being set to window instead of the element that you'd normally like. Below is the revised plugin:

jQuery.fn.iphoneSwitch = function(start_state, switched_on_callback, switched_off_callback, options) {

	var state = start_state == 'on' ? start_state : 'off';

	// define default settings
	var settings = {
		mouse_over: 'pointer',
		mouse_out: 'default',
		switch_on_container_path: '/img/iphone_switch_container_on.png',
		switch_off_container_path: '/img/iphone_switch_container_off.png',
		switch_path: '/img/iphone_switch.png',
		switch_height: 27,
		switch_width: 94
	};

	if (options) {
		jQuery.extend(settings, options);
	}
	
	// create the switch
	return this.each(function() {

		var container;
		var image;

		// make the container
		container = jQuery('<div class="iphone_switch_container" style="height:' + settings.switch_height + 'px; width:' + settings.switch_width + 'px; position: relative; overflow: hidden"></div>');

		// make the switch image based on starting state
		image = jQuery('<img class="iphone_switch" style="height:' + settings.switch_height + 'px; width:' + settings.switch_width + 'px; background-image:url(' + settings.switch_path + '); background-repeat:none; background-position:' + (state == 'on' ? 0 : -53) + 'px" src="' + (state == 'on' ? settings.switch_on_container_path : settings.switch_off_container_path) + '" />');

		// insert into placeholder
		jQuery(this).html(jQuery(container).html(jQuery(image)));

		jQuery(this).mouseover(function() {
			jQuery(this).css("cursor", settings.mouse_over);
		});

		jQuery(this).mouseout(function() {
			jQuery(this).css("background", settings.mouse_out);
		});

		// click handling
		jQuery(this).click(function() {

			if (state == 'on') {
				jQuery(this).find('.iphone_switch').animate({ backgroundPosition: -53 }, "slow", function() {
				jQuery(this).attr('src', settings.switch_off_container_path);
				
					switched_off_callback.apply($(this).parent().parent(), []);
				});
				state = 'off';
			}
			else {
				jQuery(this).find('.iphone_switch').animate({ backgroundPosition: 0 }, "slow", function() {
					switched_on_callback.apply($(this).parent().parent(), []);
				});
				jQuery(this).find('.iphone_switch').attr('src', settings.switch_on_container_path);
				state = 'on';
			}
		});

	});

};

notice the use of apply on both switched_off_callback and switched_on_callback near the bottom.

This should work as expected now.

[kevindougans]

You are a legend!!! Works as expected!!!!

[stbuchok]

I do what I can. Just out of curiosity, where'd you get the plugin (it might be a good idea to point this out to the author).