JQuery Question/Help

Question

kevindougans 2 Junior Poster

12 Years Ago

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

ajax javascript jquery

2 Contributors
14 Replies
191 Views
15 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by stbuchok

All 14 Replies

stbuchok

12 Years Ago

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 commented: tried his best to help +3

stbuchok

12 Years Ago

Please show all the code.

stbuchok

12 Years Ago

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

stbuchok

12 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kevindougans 2 Junior Poster · Answer 1 · 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?

kevindougans 2 Junior Poster · Answer 2 · 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>

kevindougans 2 Junior Poster · Answer 3 · 2011-11-29T22:06:59+00:00

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

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

stbuchok

12 Years Ago

Where did you get this plugin from?

kevindougans 2 Junior Poster · Answer 5 · 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 · Answer 6 · 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 · Answer 7 · 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 · Answer 8 · 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 :(

kevindougans 2 Junior Poster · Answer 9 · 2011-11-29T22:59:00+00:00

kevindougans 2 Junior Poster

12 Years Ago

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

stbuchok · Answer 10 · 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).

JQuery Question/Help

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers