Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Javascript menu : value javascript in php


Gyakutsuki

Recommended Posts

I try to implement this script http://tympanus.net/...nu-with-jquery/

 

It allow to show a specfic menu allowing to realise different actions (save, move, delete).

 

my problem is to know if i can have the value of the checbox in my sheet for erase it.

 

 

Script

 

<?php
 while ($products = tep_db_fetch_array($products_query)) {
$rows++;

if (strlen($rows) < 2) {
 	$rows = '0' . $rows;
}
// example
// the first line concern the checkbox
?>

[b]            	<td class="check"><input id="check_<?php echo $products['products_id']; ?>" name="<?php echo $products['products_id']; ?>" type="checkbox" value="1" AUTOCOMPLETE=OFF /></td>[/b]

  			<td class="dataTableContent"><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCTS_PREVIEW, '&pID=' . $products['products_id'] . '&origin=' . FILENAME_STATS_PRODUCTS_VIEWED . '?page=' . $_GET['page'], 'NONSSL') . '">' . tep_image(DIR_WS_ICONS . 'preview.gif', TEXT_IMAGE_PREVIEW) .'</a>'; ?></td>
<?php
 } // end while
?>

...
<!-- Display the menu -->
<div id="actionsBox" class="actionsBox">
<div id="actionsBoxMenu" class="menu">
	<span id="cntBoxMenu"></span>
	<a class="button box_action">Archive</a>
  		<?php echo '<a class="button box_action" href="' . tep_href_link(FILENAME_STATS_PRODUCTS_VIEWED, '&resetViewed=1&products_id=' . $products['products_id'] . '&action=delete_all&page=' . $page) . '">'. IMAGE_DELETE . '</a>'; ?>
	<a id="closeBoxMenu" class="button">X</a>
</div>
</div>

   	<script type="text/javascript">
       	$(function() {
           	/* tells us if we dragged the box */
           	var dragged = false;

           	/* timeout for moving the mox when scrolling the window */
           	var moveBoxTimeout;

           	/* make the actionsBox draggable */
           	$('#actionsBox').draggable({
               	start: function(event, ui) {
                   	dragged = true;
               	},
               	stop: function(event, ui) {
                   	var $actionsBox = $('#actionsBox');
                   	/*
                   	calculate the current distance from the window's top until the element
                   	this value is going to be used further, to move the box after we scroll
            			*/
                   	$actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop());
               	}
           	});

           	/*
           	when clicking on an input (checkbox),
           	change the class of the table row,
           	and show the actions box (if any checked)
    			*/
           	$('#mytable input[type="checkbox"]').bind('click',function(e) {
               	var $this = $(this);
               	if($this.is(':checked'))
                   	$this.parents('tr:first').addClass('selected');
               	else
                   	$this.parents('tr:first').removeClass('selected');
               	showActionsBox();
           	});

           	function showActionsBox(){
               	/* number of checked inputs */
               	var BoxesChecked = $('#mytable input:checked').length;
               	/* update the number of checked inputs */
               	$('#cntBoxMenu').html(BoxesChecked);
               	/*
               	if there is at least one selected, show the BoxActions Menu
               	otherwise hide it
        			*/
               	var $actionsBox = $('#actionsBox');
               	if(BoxesChecked > 0){
                   	/*
                   	if we didn't drag, then the box stays where it is
                   	we know that that position is the document current top
                   	plus the previous distance that the box had relative to the window top (distanceTop)
            			*/
                   	if(!dragged)
                       	$actionsBox.stop(true).animate({'top': parseInt(15 + $(document).scrollTop()) + 'px','opacity':'1'},500);
                   	else
                       	$actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) + 'px','opacity':'1'},500);
               	}
               	else{
                   	$actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() - 50) + 'px','opacity':'0'},500,function(){
                       	$(this).css('left','50%');
                       	dragged = false;
                       	/* if the submenu was open we hide it again */
                       	var $toggleBoxMenu = $('#toggleBoxMenu');
                       	if($toggleBoxMenu.hasClass('closed')){
                           	$toggleBoxMenu.click();
                       	}
                   	});
               	}
           	}

           	/*
           	when scrolling, move the box to the right place
    			*/
           	$(window).scroll(function(){
               	clearTimeout(moveBoxTimeout);
               	moveBoxTimeout = setTimeout(showActionsBox,500);
           	});

           	/* open sub box menu for other actions */
           	$('#toggleBoxMenu').toggle(
           	function(e){
               	$(this).addClass('closed').removeClass('open');
               	$('#actionsBox .submenu').stop(true,true).slideDown();
           	},
           	function(e){
               	$(this).addClass('open').removeClass('closed');
               	$('#actionsBox .submenu').stop(true,true).slideUp();
           	}
       	);

           	/*
           	close the actions box menu:
           	hides it, and then removes the element from the DOM,
           	meaning that it will no longer appear
           	//old 
           	$('#closeBoxMenu').bind('click',function(e){
               	$('#actionsBox').animate({'top':'-50px','opacity':'0'},1000,function(){
                   	$(this).remove();
               	});
           	});
           	*/

           	$('#closeBoxMenu').bind('click',function(e){
      			$('#actionsBox').animate({'top':'-50px','opacity':'0'},1000);
           	});



           	/*
           	as an example, for all the actions (className:box_action)
           	alert the values of the checked inputs
    			*/
           	$('#actionsBox .box_action').bind('click',function(e){
               	var ids = '';
               	$('#mytable input:checked').each(function(e,i){
                   	var $this = $(this);
                   	ids += 'id : ' + $this.attr('id') + ' , value : ' + $this.val() + '\n';
      			});
               	alert('checked inputs:\n'+ids);

           	});
       	});
   	</script>

 

I whish have the value of $this.attr('id') . this value concern the id checbox: <input id="check_<?php echo $products['products_id']; ?>" name="<?php echo $products['products_id']; ?>" type="checkbox" value="1" AUTOCOMPLETE=OFF /> for delete all data for example.

 

La valeur $_POST ou $_GET does'nt work.

 

thank you.


Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...