Conflict with two functions

kool_samule · July 4, 2012

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:

/* 
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#

/* 
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:

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

haku · July 4, 2012

You need to run the script with a javascript debugging console open, and see what javascript errors are being thrown. If you are using firefox, you can use the firebug plugin. Safari, Opera and Chrome all have their own debugging consoles built in. IE sucks.

kool_samule · July 4, 2012

Hi,

Yeah, I've already done that, should have mentioned.

FireBug > Console > Debug Info / FireBug > Script > Breakpoints / = Nothing

....?

haku · July 4, 2012

Did you try clicking around and making stuff happen (forcing an error)?

kool_samule · July 4, 2012

Yeah, clicked around to trigger an error, but nothing happened..got me baffled.

Sign In

Conflict with two functions

Recommended Posts

kool_samule

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

kool_samule

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

kool_samule

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information