Jump to content

Conflict with two functions

kool_samule

By kool_samule
in Javascript Help

 Share

Recommended Posts

kool_samule Regular Member

kool_samule

Posted
Posted

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.

 

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.