Conflict with two functions
Posted: Wed Jul 04, 2012 7:01 am
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:
Function: groupItemOrder#
FULL HTML:
If anyone can help, it'll be hi-5-tastic.
Thanks in advance.
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
*/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
*/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>
Thanks in advance.