Conflict with two functions

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
koolsamule
Forum Contributor
Posts: 130
Joined: Fri Sep 25, 2009 10:03 am

Conflict with two functions

Post by koolsamule »

Hi Chaps,

Scratching my head with this one, hopefully someone can tell me where I'm going wrong...my Javascript/jQuery skills are low.

Overview:
I have multiple jQuery 'connectedWith' sortable lists in a form, when groupItems are moved/connected, an updated SUM of two amounts is displayed, using the Net/Gross Calculation function.
The order of each group is added to the group array, using the groupItemOrder# functions.
Upon submitting the form, the correct group/groupItemOrder is displayed (for this demo, I'll add the MySQL scripts afterwards).

I have a problem the two functions, Net/Gross Calculation & groupItemOrder#, won't work on the same page.
They both work if the other is not 'active', so to speak.

Function: Net/Gross Calculation function:

Code: Select all

/* 
START OF Net/Gross Calculation function
- used to calculate the Net/Gross of each group
- won't work if the groupItemOrder# on-the-fly array updater are active
*/
$(document).ready(
function () {
    $('ul.connectedSortable').sortable({
	       update: function (ser) {
            $(".connectedSortable").each(function (i) {
                var total_net = 0;
				var total_gross = 0;
                $(this).find(".net").each(function () {
                    total_net += parseInt($(this).text());
                });
				$(this).find(".gross").each(function () {
                    total_gross += parseInt($(this).text());
                });
					$("div#total_net" + i).remove();
                if(total_net > 0){
					$(this).append($("<div id='total_net" + i + "'></div>").text('Total Net: ' + total_net));
				}
			        $("div#total_gross" + i).remove();
				if(total_gross > 0){
        			$(this).append($("<div id='total_gross" + i + "'></div>").text('Total Gross: ' + total_gross));
				}
            });
        },
    });
});
/* 
END of Net/Gross Calculation function
*/
Function: groupItemOrder#

Code: Select all

/* 
START of groupItemOrder# functions
- used to update each group array on-the-fly, to obtain the correct order of each group item, on submit of form
- won't work if Net/Gross Calculation function is active
*/
var groupItemOrder1 = '';
$(function() {
  $("#sortable1").sortable({
	update: function(event, ui) {
	  groupItemOrder1 = $("#sortable1").sortable('toArray').toString();
	}
  });
  $("#sortable1").disableSelection();
});

scriptAr1 = new Array();
scriptAr1[0] = "one";
scriptAr1[1] = "two";
scriptAr1[2] = "three";
function setValue1()
	{
	var arv1 = groupItemOrder1.toString();
	document.form.arv1.value=arv1;
}

var groupItemOrder2 = '';
$(function() {
  $("#sortable2").sortable({
	update: function(event, ui) {
	  groupItemOrder2 = $("#sortable2").sortable('toArray').toString();
	}
  });
  $("#sortable2").disableSelection();
});

scriptAr2 = new Array();
scriptAr2[0] = "one";
scriptAr2[1] = "two";
scriptAr2[2] = "three";
function setValue2()
	{
	var arv2 = groupItemOrder2.toString();
	document.form.arv2.value=arv2;
}

var groupItemOrder3 = '';
$(function() {
  $("#sortable3").sortable({
	update: function(event, ui) {
	  groupItemOrder3 = $("#sortable3").sortable('toArray').toString();
	}
  });
  $("#sortable3").disableSelection();
});

scriptAr3 = new Array();
scriptAr3[0] = "one";
scriptAr3[1] = "two";
scriptAr3[2] = "three";
function setValue3()
	{
	var arv3 = groupItemOrder3.toString();
	document.form.arv3.value=arv3;
}
/* 
END of groupItemOrder# functions
*/
FULL HTML:

Code: Select all

<?php 
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "sort-group")) {
	$original_groups = $_POST['original_groups']; // returns 3 for example
	$i = 1;
	do{
		$ss = $_POST['arv'.$i];
		$tok = explode(',',$ss);
		$order = 1;
		foreach($tok as $var) {
			$id = $var;
			if(is_numeric($id)){
				echo "(GROUP: $i) Item ID: $id (Order: $order)</br>";
				$order++;
			}
		}
	$i++;
	}while($i-1 < $original_groups);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script>
/* 
START OF Net/Gross Calculation function
- used to calculate the Net/Gross of each group
- won't work if the groupItemOrder# on-the-fly array updater are active
*/
$(document).ready(
function () {
    $('ul.connectedSortable').sortable({
	       update: function (ser) {
            $(".connectedSortable").each(function (i) {
                var total_net = 0;
				var total_gross = 0;
                $(this).find(".net").each(function () {
                    total_net += parseInt($(this).text());
                });
				$(this).find(".gross").each(function () {
                    total_gross += parseInt($(this).text());
                });
					$("div#total_net" + i).remove();
                if(total_net > 0){
					$(this).append($("<div id='total_net" + i + "'></div>").text('Total Net: ' + total_net));
				}
			        $("div#total_gross" + i).remove();
				if(total_gross > 0){
        			$(this).append($("<div id='total_gross" + i + "'></div>").text('Total Gross: ' + total_gross));
				}
            });
        },
    });
});
/* 
END of Net/Gross Calculation function
*/

/* 
START of connectWith function
- works with both functions
*/
$(function() {
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
/* 
END of connectWith function
*/

/* 
START of groupItemOrder# functions
- used to update each group array on-the-fly, to obtain the correct order of each group item, on submit of form
- won't work if Net/Gross Calculation function is active
*/
var groupItemOrder1 = '';
$(function() {
  $("#sortable1").sortable({
	update: function(event, ui) {
	  groupItemOrder1 = $("#sortable1").sortable('toArray').toString();
	}
  });
  $("#sortable1").disableSelection();
});

scriptAr1 = new Array();
scriptAr1[0] = "one";
scriptAr1[1] = "two";
scriptAr1[2] = "three";
function setValue1()
	{
	var arv1 = groupItemOrder1.toString();
	document.form.arv1.value=arv1;
}

var groupItemOrder2 = '';
$(function() {
  $("#sortable2").sortable({
	update: function(event, ui) {
	  groupItemOrder2 = $("#sortable2").sortable('toArray').toString();
	}
  });
  $("#sortable2").disableSelection();
});

scriptAr2 = new Array();
scriptAr2[0] = "one";
scriptAr2[1] = "two";
scriptAr2[2] = "three";
function setValue2()
	{
	var arv2 = groupItemOrder2.toString();
	document.form.arv2.value=arv2;
}

var groupItemOrder3 = '';
$(function() {
  $("#sortable3").sortable({
	update: function(event, ui) {
	  groupItemOrder3 = $("#sortable3").sortable('toArray').toString();
	}
  });
  $("#sortable3").disableSelection();
});

scriptAr3 = new Array();
scriptAr3[0] = "one";
scriptAr3[1] = "two";
scriptAr3[2] = "three";
function setValue3()
	{
	var arv3 = groupItemOrder3.toString();
	document.form.arv3.value=arv3;
}
/* 
END of groupItemOrder# functions
*/
</script>
<style>
#sortable1, #sortable2, #sortable3 {
	list-style-type: none;
	padding: 5px;
	margin-right: 10px;
	width: 300px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	display:block;
}
#sortable1 li, #sortable2 li, #sortable3 li{
	padding: 5px;
	font-size: 12pt;
	width: 200px;
	margin: 5px;
	cursor: pointer;
}
#sortable1 .net , #sortable1 .gross, #sortable2 .net , #sortable2 .gross, #sortable3 .net , #sortable3 .gross{
	float: right;
}
</style>
</head>
<body>
<form action="<?php echo $editFormAction; ?>" method="post" name="form" id="form" onSubmit="setValue1(), setValue2(), setValue3()">
<input type="submit" id="button" value="Sort Mulitple Lists" />
	<ul id="sortable1" class="connectedSortable">
    	<li class="ui-state-default" id="6411">
		6411
        <div class="net">100</div> - <div class="gross">250</div>
    	</li>
    </ul>
    <input name="arv1" type="hidden">
    <ul id="sortable2" class="connectedSortable">
    	<li class="ui-state-default" id="6230">
		6230
        <div class="net">100</div> - <div class="gross">250</div>
    	</li>
    </ul>
    <input name="arv2" type="hidden">
    <ul id="sortable3" class="connectedSortable">
    	<li class="ui-state-default" id="6434">
		6434
        <div class="net">100</div> - <div class="gross">250</div>
    	</li>
    </ul>
    <input name="arv3" type="hidden">
<input type="hidden" name="original_groups" value="3" />
<input type="hidden" name="MM_insert" value="sort-group" />
</form>

</body>
</html>
If anyone can help, it'll be hi-5-tastic.

Thanks in advance.
Post Reply