JQuery Question/Help

stbuchok · 2011-11-29T20:01:33+00:00

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 2 Junior Poster · 2011-11-29T21:36:59+00:00

Hi there,

Thanks for the assistance.

The console shows this however:

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

Any ideas?

stbuchok · 2011-11-29T21:49:15+00:00

Please show all the code.

kevindougans 2 Junior Poster · 2011-11-29T21:56:53+00:00

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 · 2011-11-29T22:02:24+00:00

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 2 Junior Poster · 2011-11-29T22:06:59+00:00

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

stbuchok · 2011-11-29T22:10:08+00:00

Where did you get this plugin from?

kevindougans 2 Junior Poster · 2011-11-29T22:15:05+00:00

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 2 Junior Poster · 2011-11-29T22:21:08+00:00

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

stbuchok · 2011-11-29T22:22:32+00:00

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 2 Junior Poster · 2011-11-29T22:28:45+00:00

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 · 2011-11-29T22:51:28+00:00

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 2 Junior Poster · 2011-11-29T22:59:00+00:00

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

stbuchok · 2011-11-30T00:51:07+00:00

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).