Solved

how do I stop javascript looping trough functions after button onclick event

Posted on 2013-02-01
59
402 Views
Last Modified: 2013-11-19
I an trying to run the codes below. When I click the button with class=button editaccounttransfer the case on line 115 is triggered as intended. Then it runs the codes in the unlockforupdate function on line 17. So far so good. But after that it triggers case "button updateaccounttransfer" on line 87 which re-locks all the fields. It looks like the code is looping through the onclick event after the button class has already changed. How do I stop that?

Thanks in advance

<script>
$(document).ready(function()
	{

		function lockafterupdate($currentrow, $currentbutton)
		{
			alert("start lock");
			$currentbutton.attr("class", "button editaccounttransfer");
			$currentbutton.attr("value", "Edit");
			$currentrow.find('input:text').css("background-color", "#FFC31E");
			$currentrow.find('input:text').attr('disabled', 'disabled');
			$currentrow.find('select').attr('disabled', 'disabled');
			$(".reset").removeAttr('disabled');

		}

		function unlockforupdate($currentrow, $currentbutton)
		{
			alert("start unlock");
			$currentbutton.attr("class", "button updateaccounttransfer");
			$currentbutton.attr("value", "Update");
			$currentrow.find('input:text').attr("readonly", false);
			$currentrow.find('input:text').css("background-color", "#ACEFB7");
			$currentrow.find('select').css("background-color", "#ACEFB7");
			$(".newaccounttransfer").attr('disabled', 'disabled');
			$currentrow.find('select.from').removeAttr('disabled');
			$currentrow.find('input.amount').removeAttr('readOnly').removeAttr('disabled');
			$(".editaccounttransfer").attr('disabled', 'disabled');

		}

		$(".button").click(function()
			{

				buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));

				return false;
			}
		);

		function buttonclick($buttonclass, $currentbutton, $currentrow)
		{

			switch ($buttonclass)
			{

				case 'button newaccounttransfer':

					var d = $currentrow.find("input.datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();

					$.get("scripts/newAccountTransfer.php",
						{
						fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
					);

					var $newrow = $currentrow.clone().appendTo('table');

					$newrow.find('input:text').val('');
					$newrow.find('select').val('');
                    lockafterupdate($currentrow, $currentbutton);

					$(".from").change(function()
						{

							var $from = $(this).val();
							selecttoaccount($from, $(this).closest('tr'));
							return false;
						}
					);

					$(".button").click(function()
						{

							buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));

							return false;
						}
					);
					break;

				case "button updateaccounttransfer":

					alert ("in update");
					var d = $currentrow.find("input#datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					var t = $currentrow.find("td.id").val();

					$.get("scripts/editAccountTransfers.php",
						{
						flTransactionId: t, fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function()
						{

							lockafterupdate($currentrow, $currentbutton);

						}
					);

					break;

				case "button reset":

					location.reload(true);
					break;

				case "button editaccounttransfer":

					unlockforupdate($currentrow, $currentbutton);
					break;
			}

			return false;
		}

		$(".from").change(function()
			{

				//some code here

			}
		);

		function selecttoaccount($from, $currentrow)
		{

			//some code here
			return false;

		}

	}
);

</script>

Open in new window

0
Comment
Question by:Sheils
  • 24
  • 15
  • 7
  • +3
59 Comments
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Have you check if the "unlockforupdate" case sets correctly the attributes? Maybe there is one or more wrong order in those commands.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I have checked with no luck. I used the xdebug on firefox and it is definitely going to back to the switch after the lockforupdate function and triggers case "button updateaccounttransfer" on line 87. Question is why is it going back to the switch function. I have break at the end of each case. I have even tried return false, still no luck.
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Consider that you have posted the only script; maybe in the HTML you have multiple events triggered, so that in some case you get redundancies.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I actually condensed the script and removed what I thought to be unrelated code.  On hind sight they may be the cause of the problem. The full codes js,php and html are as follows:-

html
<div class='subformdiv' id='newtransfer'>

    <form class="subform newtransfer">

        <table>

        <tr class="tableheader">
        <th class='id'>ID</th>
        <th class='headertd date'><input class='date' type='label' disabled  value='Date'></th>
        <th class='headertd from'><input class='from' type='label' disabled  value='From'></th>
        <th class='headertd to'><input class='to' type='label' disabled  value='To'></th>
        <th class='headertd amount'><input class='amount' type='label' disabled  value='Amount'></th>
        <th class='headertd currency'><input class='currency' type='label' disabled  value='Currency'></th>
        </tr>

        <?php

        $excludedaccount=6;
        include "scripts/accountoptions.php";

        ?>
            <tr class='record'>
            <td class='id'></td>
            <td class='texttd date'><input class='datepicker' type='text' ></td>

            <td class='texttd from'><select class='from'><?php echo $AccountsOption ?></select></td>
            <td class='texttd to'><select disabled class='to'><?php echo $AccountsOption ?></select></td>
            <td class='texttd amount'><input class='amount' type='text'></td>
            <td class='texttd currency'><input disabled class='currency' type='text' ></td>
            <td class='buttontd'><input type='submit' class='button newaccounttransfer' value='ADD' /></td>

            </tr>

        </table>

     </form>

</div>

Open in new window


js
<script>
$(document).ready(function()
	{
		$(".datepicker").datepicker(
			{
			dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
			}
		);


		$(".datepicker").attr('readOnly', 'true');


		function lockafterupdate($currentrow, $currentbutton)
		{
			alert("start lock");
			$currentbutton.attr("class", "button editaccounttransfer");
			$currentbutton.attr("value", "Edit");
			$currentrow.find('input:text').css("background-color", "#FFC31E");
			$currentrow.find('input:text').attr('disabled', 'disabled');
			$currentrow.find('select').attr('disabled', 'disabled');
		    $(".reset").removeAttr('disabled');


		}


		function unlockforupdate($currentrow, $currentbutton)
		{
			alert("start unlock");
			$currentbutton.attr("class", "button updateaccounttransfer");
			$currentbutton.attr("value", "Update");
			$currentrow.find('input:text').attr("readonly", false);
			$currentrow.find('input:text').css("background-color", "#ACEFB7");
			$currentrow.find('select').css("background-color", "#ACEFB7");
			$(".newaccounttransfer").attr('disabled', 'disabled');
			$currentrow.find('select.from').removeAttr('disabled');
			$currentrow.find('input.amount').removeAttr('readOnly').removeAttr('disabled');
			$(".editaccounttransfer").attr('disabled', 'disabled');

			$currentrow.find(".datepicker").datepicker(
				{
				dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
				}
			);

			$currentrow.find(".datepicker").removeAttr('disabled');
           

        }


		$(".button").click(function()
			{
				buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
				return false;
			}
		);


		function buttonclick($buttonclass, $currentbutton, $currentrow)
		{
			switch ($buttonclass)
			{
				case 'button newaccounttransfer':
					var d = $currentrow.find("input.datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					$.get("scripts/newAccountTransfer.php",
						{
						fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function(response)
						{
							$currentrow.find('t.id').html(response);
							//$("#output p#target").html(response);
						}
					);
					var $newrow = $currentrow.clone().appendTo('table');
					var id = 'dp' + new Date().getTime();
					$newrow.find('input:text').val('');
					$newrow.find('select').val('');
					$newrow.find(".datepicker").attr(
						{
						"id": id
						}
					);
					$newrow.find(".datepicker").val("");
					$newrow.find(".datepicker").removeClass("hasDatepicker");
					$newrow.find(".datepicker").datepicker(
						{
						dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
						}
					);
					$currentrow.find('select.from').attr("class", "from locked");
					lockafterupdate($currentrow, $currentbutton);

					$(".from").change(function()
						{
							selecttoaccount($(this).val(), $(this).closest('tr'));
							return false;
						}
					);

					$(".button").click(function()
						{
							buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
							return false;
						}
					);

                    break;

				case "button updateaccounttransfer":

                    alert ("in update");
					var d = $currentrow.find("input#datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					var t = $currentrow.find("td.id").val();
					$.get("scripts/editAccountTransfers.php",
						{
						flTransactionId: t, fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function()
						{
							lockafterupdate($currentrow, $currentbutton);
						}
					);
                    break;

               case "button editaccounttransfer":
					unlockforupdate($currentrow, $currentbutton);
                    break;
				case "button reset":
					location.reload(true);
                    break;

			}
			return false;
		}
		$(".from").change(function()
			{
				selecttoaccount($(this).val(), $(this).closest('tr'));
				return false;
			}
		);


		function selecttoaccount($from, $currentrow)
		{
			switch($from)
			{
				case "1":
					var $to = 4;
					break;
				case "2":
					var $to = 3;
					break;
				case "3":
					var $to = 2;
					break;
				case "4":
					var $to = 1;
					break;
			}
			$currentrow.find("select.to").val($to);
			$currentrow.find('select.to').removeAttr("selected");
			$currentrow.find("select.to").find("option[value=" + $to + "]").attr("selected", true);
			$a = $currentrow.find("select.to option:selected").text();
			var $ar = $a.split("_");
			var $c = $ar[1];
			$currentrow.find("input.currency").val($c);
			return false;
		}
	}
);
</script>

Open in new window


php
<?php

	error_reporting(E_ALL);

	include "connect.php";

	if (isset ($_GET['fldDate']))
	{
		$Date = $_GET['fldDate'];
		$WithdrawingAccount = $_GET['fldWithdrawingAccount'];
		$DepositingAccount = $_GET['fldDepositingAccount'];
		$Amount = $_GET['fldAmount'];
		$Currency = $_GET['fldCurrency'];

		$sql = "INSERT INTO `tbTransactions`";
		$sql = $sql . " (`fldDate`, `fldDepositAccount`,`fldWithdrawingAccount`,`fldType`) ";
		$sql = $sql . "VALUES (STR_TO_DATE('" . $Date . "', '%d %b %Y')," . $DepositingAccount . "," . $WithdrawingAccount .
		                      ",4)";

		mysqli_query($cnn, $sql) or die(mysqli_error($cnn));
		$result = mysqli_query($cnn, "SELECT @@IDENTITY");

		$row = mysqli_fetch_array($result);
		$TransactionId = $row[0];
		$response = $row[0];

        $sql = "INSERT INTO `tbTransactionDetails` (`fldTransactionId`,`fldAmount`,`fldCurrency`) VALUES (" . $TransactionId .
		                                           "," . $Amount . ",'" . $Currency . "')";

        mysqli_query($cnn, $sql) or die(mysqli_error($cnn));
		die($response);
	}

    mysqli_close($cnn);

?>

Open in new window

0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
I do not know PHP, I apologize.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
do a right click on the page in the web browser, choose view source and post it here
thanks
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
Can you post the snipet where the onclick is selecte, and the command that is being called?
Break; after each case statement terminates the switch match.
You might be getting into the look through other means.

Lines 32-36 seem to be what triggers the nclick event for 'button updateaccounttransfer' within 17.
I.e. on the first click the unlock function is called, line 20 you modify the button class. Line 32 you trigger a click function() is being passed out with the button class changed.
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
can you post or pm the url?
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
Is it that this line

$currentbutton.attr("class", "button updateaccounttransfer");

is re-triggering its event?
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
There is the code from view source
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <link rel="stylesheet" href="style/style.css" type="text/css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
  <link rel="stylesheet" href="/resources/demos/style.css" type="text/css">
  <link rel="stylesheet" href="themes/jquery-ui-1.9.2.custom/jquery-ui-1.9.2.custom/css/custom-theme/jquery-ui-1.9.2.custom.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

</head>


<body>

   
  <div id='headerdiv'>

    <p id='headertitle'>New Money Transfer</p>

  </div>


<div id=mainsidebar>
    <div>

        <form action="index.php" method="GET">



            <input type='submit' name='navbutton' class='mainbuttons' value='New Expenses'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Incomes'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Money Transfers'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Sales Persons'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Excursions'/>

            <br /><hr/><br />

            <input type='submit' name='navbutton' class='mainbuttons' value='Income'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Excursions'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Expenses'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Sales Person'/>

      </form>

  </div>

  <div id='calculator'>

  
  </div>

</div>

<div id='maindiv'><!--Main form starts here-->

<div class='subformdiv' id='newtransfer'>

    <form class="subform newtransfer">

        <table>

        <tr class="tableheader">
        <th class='id'>ID</th>
        <th class='headertd date'><input class='date' type='label' disabled  value='Date'></th>
        <th class='headertd from'><input class='from' type='label' disabled  value='From'></th>
        <th class='headertd to'><input class='to' type='label' disabled  value='To'></th>
        <th class='headertd amount'><input class='amount' type='label' disabled  value='Amount'></th>
        <th class='headertd currency'><input class='currency' type='label' disabled  value='Currency'></th>
        </tr>

                    <tr class='record'>
            <td class='id'></td>
            <td class='texttd date'><input class='datepicker' type='text' ></td>

            <td class='texttd from'><select class='from'><option VALUE=''></option><option  VALUE=3>CASH_EUR</option><option  VALUE=4>CASH_SR</option><option  VALUE=2>MCB_EUR</option><option  VALUE=1>MCB_SR</option></select></td>
            <td class='texttd to'><select disabled class='to'><option VALUE=''></option><option  VALUE=3>CASH_EUR</option><option  VALUE=4>CASH_SR</option><option  VALUE=2>MCB_EUR</option><option  VALUE=1>MCB_SR</option></select></td>
            <td class='texttd amount'><input class='amount' type='text'></td>
            <td class='texttd currency'><input disabled class='currency' type='text' ></td>
            <td class='buttontd'><input type='submit' class='button newaccounttransfer' value='ADD' /></td>

            </tr>

        </table>

     </form>

</div>


<div   id="output" style="float: left; clear: both">
   <p>This is the transaction id </p><p  id="transactionid">place holder</p>
   <p  id="target">This element gets the AJAX response</p>
</div>


<script>
$(document).ready(function()
	{
		$(".datepicker").datepicker(
			{
			dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
			}
		);


		$(".datepicker").attr('readOnly', 'true');


		function lockafterupdate($currentrow, $currentbutton)
		{
			alert("start lock");
			$currentbutton.attr("class", "button editaccounttransfer");
			$currentbutton.attr("value", "Edit");
			$currentrow.find('input:text').css("background-color", "#FFC31E");
			$currentrow.find('input:text').attr('disabled', 'disabled');
			$currentrow.find('select').attr('disabled', 'disabled');
		    $(".reset,.newaccounttransfer").removeAttr('disabled');


		}


		function unlockforupdate($currentrow, $currentbutton)
		{
			alert("start unlock");
            $currentbutton.attr("value", "Update");
			$currentbutton.attr("class", "button updateaccounttransfer");

			$currentrow.find('input:text').attr("readonly", false);
			$currentrow.find('select,input:text').css("background-color", "#ACEFB7");
			$(".newaccounttransfer").attr('disabled', 'disabled');
			$currentrow.find('select.from').removeAttr('disabled');
			$currentrow.find('input.amount').removeAttr('readOnly').removeAttr('disabled');
			$(".editaccounttransfer").attr('disabled', 'disabled');

			$currentrow.find(".datepicker").datepicker(
				{
				dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
				}
			);

			$currentrow.find(".datepicker").removeAttr('disabled');
            return false;

        }


		$(".button").click(function()
			{
				buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
				return false;
			}
		);


		function buttonclick($buttonclass, $currentbutton, $currentrow)
		{
			switch ($buttonclass)
			{
				case 'button newaccounttransfer':
					var d = $currentrow.find("input.datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					$.get("scripts/newAccountTransfer.php",
						{
						fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function(response)
						{
							$currentrow.find('t.id').html(response);
							//$("#output p#target").html(response);
						}
					);
					var $newrow = $currentrow.clone().appendTo('table');
					var id = 'dp' + new Date().getTime();
					$newrow.find('input:text').val('');
					$newrow.find('select').val('');
					$newrow.find(".datepicker").attr(
						{
						"id": id
						}
					);
					$newrow.find(".datepicker").val("");
					$newrow.find(".datepicker").removeClass("hasDatepicker");
					$newrow.find(".datepicker").datepicker(
						{
						dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
						}
					);
					$currentrow.find('select.from').attr("class", "from locked");
					lockafterupdate($currentrow, $currentbutton);

					$(".from").change(function()
						{
							selecttoaccount($(this).val(), $(this).closest('tr'));
							return false;
						}
					);

					$(".button").click(function()
						{
							buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
							return false;
						}
					);

                    break;

				case "button updateaccounttransfer":

                    alert ("in update");
					var d = $currentrow.find("input#datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					var t = $currentrow.find("td.id").val();
					$.get("scripts/editAccountTransfers.php",
						{
						flTransactionId: t, fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function()
						{
							lockafterupdate($currentrow, $currentbutton);
						}
					);
                    break;

               case "button editaccounttransfer":
					unlockforupdate($currentrow, $currentbutton);
                    break;
				case "button reset":
					location.reload(true);
                    break;

			}
			return false;
		}
  		$(".from").change(function()
			{
				selecttoaccount($(this).val(), $(this).closest('tr'));
				return false;
			}
		);


		function selecttoaccount($from, $currentrow)
		{
			switch($from)
			{
				case "1":
					var $to = 4;
					break;
				case "2":
					var $to = 3;
					break;
				case "3":
					var $to = 2;
					break;
				case "4":
					var $to = 1;
					break;
			}
			$currentrow.find("select.to").val($to);
			$currentrow.find('select.to').removeAttr("selected");
			$currentrow.find("select.to").find("option[value=" + $to + "]").attr("selected", true);
			$a = $currentrow.find("select.to option:selected").text();
			var $ar = $a.split("_");
			var $c = $ar[1];
			$currentrow.find("input.currency").val($c);
			return false;
		}
	}
);
</script></div>


</body>
</html>

Open in new window

0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
It looks to me like the problem is that ".button" is being given a click handler in multiple places. A simple way to check would be to output different static strings from the two different occurrences (e.g. via "console.log()" or "alert()").

sb9, I really must caution you that adding raw data to a database is extremely insecure. At the very least you should run it through mysqli_real_escape_string() and it's better to run it through htmlspecialchars() with the flags "ENT_QUOTES | ENT_HTML401" as well  (unless you're using a PHP version older than 5.4.0, which won't recognize "ENT_HTML401", in which case just use "ENT_QUOTES").


@Sar1973, as far as I can tell, the PHP code is not related to the problem. It's just adding the raw data to the database.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Arnold,

Can you post the snipet where the onclick is selecte, and the command that is being called?

					$(".button").click(function()
						{
							buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
							return false;
						}
					);

                    break;

				case "button updateaccounttransfer":

                    alert ("in update");
					var d = $currentrow.find("input#datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					var t = $currentrow.find("td.id").val();
					$.get("scripts/editAccountTransfers.php",
						{
						flTransactionId: t, fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function()
						{
							lockafterupdate($currentrow, $currentbutton);
						}
					);
                    break;

               case "button editaccounttransfer":
					unlockforupdate($currentrow, $currentbutton);
                    break;
				case "button reset":
					location.reload(true);
                    break;

			}
			return false;
		}

Open in new window


Lines 32-36 seem to be what triggers the nclick event for 'button updateaccounttransfer' within 17.
I.e. on the first click the unlock function is called, line 20 you modify the button class. Line 32 you trigger a click function() is being passed out with the button class changed.

Agree but shouldn't it stop when it hit the break in the switch?
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
Is the issue that upon clicking edit it less through the prompts including locks?
The problem is that your row that needs editing, would eyed to change the button to the right of the from edit to update, and not use the click method.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Kravimir,

Thanks for the security tips. I will definitely incorporate your input once I sort the current problem.

It looks to me like the problem is that ".button" is being given a click handler in multiple places.


I had to add a second call to the click handler after adding a new row (line 77) because the new button was not reacting to the onclick event. Do you think that this is part of the problem
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Arnold,

I wanted the button to change to Update when I click Edit. This should also unlock the record for editing. Then after changing the data in that record click update and the record is locked again. Right now it is changing to update and then continue to lock before you click the update button. See behaviour on url  http://www.wowislandcharter.com/wowaccounts/index.php?navbutton=New+Money+Transfers
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
I do think it's because the Edit button is becoming the Update button, and therefore the event for the button is re-triggered.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
This looks to be the case but I can't think of a work around. Or maybe a completely new approach
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
It just means making the buttons visible and invisible, rather than having one button have multiple personalities.
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
I had to add a second call to the click handler after adding a new row (line 77) because the new button was not reacting to the onclick event. Do you think that this is part of the problem
Yes. I'd say it's even likely that it's the whole problem. Did you try testing it as I suggested?

I do think it's because the Edit button is becoming the Update button, and therefore the event for the button is re-triggered.
Having a single button is fine. There is a way to solve this without adding an additional button and swapping the visibility of two of the buttons.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I have used the breakpoint in firebug and it suggests that the update button is triggered after the edit button events.

Having a single button is fine. There is a way to solve this without adding an additional button and swapping the visibility of two of the buttons.

how do you suggest doing that?
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
joomla_php, if we make the button invisible there will be nothing to click. Maybe using an on/off variable will help I need to think about this a bit
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
I have used the breakpoint in firebug and it suggests that the update button is triggered after the edit button events.
Yes, that's what would happen if the event handler was called twice. Would you please confirm in the manner I suggested? Is there a particular reason why you are reluctant to do so?
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
You have a click directive within the function.
In your last post, line 3 is calling buttonclick within the section that is dealing when edit is hit.
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
I'm not saying the other posters are wrong, there are two ways to solve this. In the way I suggest, you would have a visibility attribute on the buttons, where at least one button is always visible, and where the visibility is set at the end of the unlock and lock routines. So say you start fresh with no data, you have Add visible. Upon clicking Add, Add becomes invisible and Update becomes visible. Upon clicking Update, Update becomes invisible and Edit becomes visible for the currently-edited row.
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Why don't you place some alerts between the lines of code you suspect generate double events and check with the different browsers?
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
IMHO, your click event in the unlockforupdate function that is called by buttonclick with 'button editaccounttransfer' is the cause for all this.
button editaccounttransfer calls update ...

Line 32
I think what you want to do is instead of .click (function()
You need to have is an .onclick(function)
this will let the user click on update when the changes are done following the update.
.click as a triggering event
.onclick is will await user input.
look for anything with.click() and see whether you want your javascript mimic user input, or whether it should be onclick() where you modify the attributes/settings of a button's behavior.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Kravimir,

Would you please confirm in the manner I suggested? Is there a particular reason why you are reluctant to do so?

I am not reluctant. Maybe I just do quiet understand what you are asking me to do.

Your suggestion was
A simple way to check would be to output different static strings from the two different occurrences (e.g. via "console.log()" or "alert()").

I thought I did just that with the alert. If not where should I put the code
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
If you are arguing about the updateaccounttransfer function, try a couple of alert one delayed of 1 second:
alert("Hello");
setTimeout("alert('Hello')", 1000);
so that you can check if there is a repeat in the code.
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
Visit the URL.
Upon clicking on edit, there are three alerts (one more than necessary) from a single click on the edit button.
Once edit is clicked:
unlock process.
update (The button attribute/class changed to update)
start lock

The issue is the click method on line 32 of the original code which I say should be an onclick method.
Currently as soon as you hit edit, the process begins that unlocks the row for update, the status of the button next to the row is changed from edit to update. The problem is that within this dynamic alteration, the mouse click is trigger by the
		$(".button").click(function()
			{

				buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));

				return false;
			}

Open in new window

at the time of the event the $(this).attr("class) is 'button updateaccountransfer'. the buttonclick('button updateaccountransfer',data,data1) is triggered and the updateaccounttransfer functionality processed without any additional input from the user.

The setup you have is analogus to three dominos set once the edit is tipped over, it topples  the unlock row for editing domino which topples the update domino.  You need to add additional spacing between the unlock row domino and the updateaccounttransfer domino which will necessitates the user intervention to proceed.
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
You very well articulated what I said -- changing the button triggers its click function.
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
joomla_php, the button change/relabeling is necessary to make it function as the update at the conclusion of the user modification process. The issue is that within the same scope/flow the javascript triggers the click event trigger rather than allowing the user the option to input/click on the update button themselves.

The current flow is like somewhat akin to having a spring in the public bathroom lock.
I.e. when it is switched to a locked position, upon the user letting go of the spring in the locking mechanism pushes the thing back to the unlocked step.
The "spring" needs to be removed.
0
 
LVL 13

Expert Comment

by:joomla_php
Comment Utility
arnold - thank you.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Alright guys,

I have been looking at the jQuery documentation and it does not seem to have an onclick function. So I take it that I have to set it as an attribute of the button to call the jquery function. I have tried this but it is not it working

<td class='buttontd'><input type='submit' onclick='buttonclick(this.class, this,this.rowIndex)' class='button newaccounttransfer' value='ADD' /></td>

Open in new window


Is that the wrong call
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I have also tried:

<td class='buttontd'><input type='submit' onclick='buttonclick(this)' class='button newaccounttransfer' value='ADD' /></td>

Open in new window


function buttonclick($currentbutton)
		{

           var $buttonclass=$currentbutton.attr("class");
           var $currentrow=$currentbutton.rowindex;

        switch ($buttonclass)
code...

Open in new window

0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
Try commenting out the line 32 down and see the behavior.  You handler is defined, for onclick. The class attribute is changed. The depression of the mouse should trigger the event with button update.

http://api.jquery.com/click/
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Hi Guys,

This is the new code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <link rel="stylesheet" href="style/style.css" type="text/css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
  <link rel="stylesheet" href="/resources/demos/style.css" type="text/css">
  <link rel="stylesheet" href="themes/jquery-ui-1.9.2.custom/jquery-ui-1.9.2.custom/css/custom-theme/jquery-ui-1.9.2.custom.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

</head>


<body>

   
  <div id='headerdiv'>

    <p id='headertitle'>New Money Transfer</p>

  </div>


<div id=mainsidebar>
    <div>

        <form action="index.php" method="GET">



            <input type='submit' name='navbutton' class='mainbuttons' value='New Expenses'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Incomes'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Money Transfers'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Sales Persons'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Excursions'/>

            <br /><hr/><br />

            <input type='submit' name='navbutton' class='mainbuttons' value='Income'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Excursions'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Expenses'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Sales Person'/>

      </form>

  </div>

  <div id='calculator'>

  
  </div>

</div>

<div id='maindiv'><!--Main form starts here-->

<div class='subformdiv' id='newtransfer'>

    <form class="subform newtransfer">

        <table>

        <tr class="tableheader">
        <th class='id'>ID</th>
        <th class='headertd date'><input class='date' type='label' disabled  value='Date'></th>
        <th class='headertd from'><input class='from' type='label' disabled  value='From'></th>
        <th class='headertd to'><input class='to' type='label' disabled  value='To'></th>
        <th class='headertd amount'><input class='amount' type='label' disabled  value='Amount'></th>
        <th class='headertd currency'><input class='currency' type='label' disabled  value='Currency'></th>
        </tr>

                    <tr class='record'>
            <td class='id'></td>
            <td class='texttd date'><input class='datepicker' type='text' ></td>

            <td class='texttd from'><select class='from'><option VALUE=''></option><option  VALUE=3>CASH_EUR</option><option  VALUE=4>CASH_SR</option><option  VALUE=2>MCB_EUR</option><option  VALUE=1>MCB_SR</option></select></td>
            <td class='texttd to'><select disabled class='to'><option VALUE=''></option><option  VALUE=3>CASH_EUR</option><option  VALUE=4>CASH_SR</option><option  VALUE=2>MCB_EUR</option><option  VALUE=1>MCB_SR</option></select></td>
            <td class='texttd amount'><input class='amount' type='text'></td>
            <td class='texttd currency'><input disabled class='currency' type='text' ></td>
            <td class='buttontd'><input type='submit' onclick='buttonclick(this)' class='button newaccounttransfer' value='ADD' /></td>

            </tr>

        </table>

     </form>

</div>


<div   id="output" style="float: left; clear: both">
   <p>This is the transaction id </p><p  id="transactionid">place holder</p>
   <p  id="target">This element gets the AJAX response</p>
</div>


<script>
$(document).ready(function()
	{
		$(".datepicker").datepicker(
			{
			dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
			}
		);


		$(".datepicker").attr('readOnly', 'true');


		function lockafterupdate($currentrow, $currentbutton)
		{
			alert("start lock");
			$currentbutton.attr("class", "button editaccounttransfer");
			$currentbutton.attr("value", "Edit");
			$currentrow.find('input:text').css("background-color", "#FFC31E");
			$currentrow.find('input:text').attr('disabled', 'disabled');
			$currentrow.find('select').attr('disabled', 'disabled');
		    $(".reset,.newaccounttransfer").removeAttr('disabled');


		}


		function unlockforupdate($currentrow, $currentbutton)
		{
			alert("start unlock");
            $currentbutton.attr("value", "Update");
			$currentbutton.attr("class", "button updateaccounttransfer");

			$currentrow.find('input:text').attr("readonly", false);
			$currentrow.find('select,input:text').css("background-color", "#ACEFB7");
			$(".newaccounttransfer").attr('disabled', 'disabled');
			$currentrow.find('select.from').removeAttr('disabled');
			$currentrow.find('input.amount').removeAttr('readOnly').removeAttr('disabled');
			$(".editaccounttransfer").attr('disabled', 'disabled');

			$currentrow.find(".datepicker").datepicker(
				{
				dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
				}
			);

			$currentrow.find(".datepicker").removeAttr('disabled');
            return false;

        }


		/*$(".button").click(function()
			{
				buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
				return false;
			}
		);*/


		function buttonclick($currentbutton)
		{
           alert ('in buttonclick function');
           var $buttonclass=$currentbutton.attr("class");
           var $currentrow=$currentbutton.rowindex;
           alert($currentrow);
        switch ($buttonclass)
			{
				case 'button newaccounttransfer':
					var d = $currentrow.find("input.datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					$.get("scripts/newAccountTransfer.php",
						{
						fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function(response)
						{
							$currentrow.find('t.id').html(response);
							//$("#output p#target").html(response);
						}
					);
					var $newrow = $currentrow.clone().appendTo('table');
					var id = 'dp' + new Date().getTime();
					$newrow.find('input:text').val('');
					$newrow.find('select').val('');
					$newrow.find(".datepicker").attr(
						{
						"id": id
						}
					);
					$newrow.find(".datepicker").val("");
					$newrow.find(".datepicker").removeClass("hasDatepicker");
					$newrow.find(".datepicker").datepicker(
						{
						dateFormat: "dd M yy", changeMonth: true, changeYear: true, Anim: "Clip"
						}
					);
					$currentrow.find('select.from').attr("class", "from locked");
					lockafterupdate($currentrow, $currentbutton);

					$(".from").change(function()
						{
							selecttoaccount($(this).val(), $(this).closest('tr'));
							return false;
						}
					);

					/*$(".button").click(function()
						{
							buttonclick($(this).attr("class"), $(this), $(this).closest('tr'));
							return false;
						}
					);*/

                    break;

				case "button updateaccounttransfer":

                    alert ("in update");
					var d = $currentrow.find("input#datepicker").val();
					var wa = $currentrow.find("select.from").val();
					var da = $currentrow.find("select.to").val();
					var a = $currentrow.find("input.amount").val();
					var c = $currentrow.find("input.currency").val();
					var t = $currentrow.find("td.id").val();
					$.get("scripts/editAccountTransfers.php",
						{
						flTransactionId: t, fldDate: d, fldWithdrawingAccount: wa, fldDepositingAccount: da, fldAmount: a, fldCurrency: c
						}
						, function()
						{
							lockafterupdate($currentrow, $currentbutton);
						}
					);
                    break;

               case "button editaccounttransfer":
					unlockforupdate($currentrow, $currentbutton);
                    break;
				case "button reset":
					location.reload(true);
                    break;

			}
			return false;
		}
  		$(".from").change(function()
			{
				selecttoaccount($(this).val(), $(this).closest('tr'));
				return false;
			}
		);


		function selecttoaccount($from, $currentrow)
		{
			switch($from)
			{
				case "1":
					var $to = 4;
					break;
				case "2":
					var $to = 3;
					break;
				case "3":
					var $to = 2;
					break;
				case "4":
					var $to = 1;
					break;
			}
			$currentrow.find("select.to").val($to);
			$currentrow.find('select.to').removeAttr("selected");
			$currentrow.find("select.to").find("option[value=" + $to + "]").attr("selected", true);
			$a = $currentrow.find("select.to option:selected").text();
			var $ar = $a.split("_");
			var $c = $ar[1];
			$currentrow.find("input.currency").val($c);
			return false;
		}
	}
);
</script></div>


</body>
</html>

Open in new window


As you can see I have comment out the .click functions on lines 157 and 215. I have added an onclick to the button attribute on line 88. But it is not triggering the onclick event as expected
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Do you get the alert, perhaps...? It could be necessary to set as argument "this.name".
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
Is the commenting out of the click entry the only change? The page stopped working.
The action parameter does not include the query string so any onclick event heads to index.php.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I have done some test and found out that call the function from the onclick event only works when I put the function outside the $(document).ready(function(). I tried to make the function call another function inside the $(document).ready(function() and the page stop working again after the first alert. So it seem that the problem is with call a function inside the $(document).ready(function().

Any work around
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
I think that's because you mix JS and JQuery.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
yes looks like it so are you saying that you can't call jQuery from js?
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I have just come across an exaqmple on this page

http://jquerybyexample.blogspot.com/2010/06/call-jquery-from-javascript-function.html

but it seem that there may be a performance issue in the long run when I got a lot of data. What do you guys think
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
one Thing I would suggest is move the javascript/script into its own file.
This way you can look at one and the other individually.

IMHO, at this point get the thing to work, then work on improving performance.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Hi Guys,

I have stripped the code to the minimum and the page source is now as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <link rel="stylesheet" href="style/style.css" type="text/css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
  <link rel="stylesheet" href="/resources/demos/style.css" type="text/css">
  <link rel="stylesheet" href="themes/jquery-ui-1.9.2.custom/jquery-ui-1.9.2.custom/css/custom-theme/jquery-ui-1.9.2.custom.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

</head>


<body>

   
  <div id='headerdiv'>

    <p id='headertitle'>New Money Transfer</p>

  </div>


<div id=mainsidebar>
    <div>

        <form action="index.php" method="GET">



            <input type='submit' name='navbutton' class='mainbuttons' value='New Expenses'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Incomes'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Money Transfers'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Sales Persons'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='New Excursions'/>

            <br /><hr/><br />

            <input type='submit' name='navbutton' class='mainbuttons' value='Income'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Excursions'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Expenses'/>

            <input type='submit' name='navbutton' class='mainbuttons' value='Sales Person'/>

      </form>

  </div>

  <div id='calculator'>

  
  </div>

</div>

<div id='maindiv'><!--Main form starts here-->

<div class='subformdiv' id='newtransfer'>

    <form class="subform newtransfer">

        <table>

        <tr class="tableheader">
        <th class='id'>ID</th>
        <th class='headertd date'><input class='date' type='label' disabled  value='Date'></th>
        <th class='headertd from'><input class='from' type='label' disabled  value='From'></th>
        <th class='headertd to'><input class='to' type='label' disabled  value='To'></th>
        <th class='headertd amount'><input class='amount' type='label' disabled  value='Amount'></th>
        <th class='headertd currency'><input class='currency' type='label' disabled  value='Currency'></th>
        </tr>

                    <tr class='record'>
            <td class='id'></td>
            <td class='texttd date'><input class='datepicker' type='text' ></td>

            <td class='texttd from'><select class='from'><option VALUE=''></option><option  VALUE=3>CASH_EUR</option><option  VALUE=4>CASH_SR</option><option  VALUE=2>MCB_EUR</option><option  VALUE=1>MCB_SR</option></select></td>
            <td class='texttd to'><select disabled class='to'><option VALUE=''></option><option  VALUE=3>CASH_EUR</option><option  VALUE=4>CASH_SR</option><option  VALUE=2>MCB_EUR</option><option  VALUE=1>MCB_SR</option></select></td>
            <td class='texttd amount'><input class='amount' type='text'></td>
            <td class='texttd currency'><input disabled class='currency' type='text' ></td>
            <td class='buttontd'><input type='submit' onclick=buttononclick(this) class='button newaccounttransfer' value='ADD' /></td>

            </tr>

        </table>

     </form>

</div>


<div   id="output" style="float: left; clear: both">
   <p>This is the transaction id </p><p  id="transactionid">place holder</p>
   <p  id="target">This element gets the AJAX response</p>
</div>


<script>
function buttononclick($currentbutton)
{
	alert ('in buttonclick outer function');
	$(document).ready(function()
		{
			alert("in Jquery");
			//var $buttonclass=$currentbutton.attr("class");
			//var $currentrow=$currentbutton.rowindex;
			//alert($buttonclass);
			alert("no class");
			
		}
	);
}
</script></div>


</body>
</html>

Open in new window


When I click the add button with the button on line 108 the code is triggered in the following sequence:

108, 109, JQuery functions, 109, JQuery functions, 111, 115, 116, JQuery functions, 109 , 118, crush.

I guest the problem here is that it has gone back to line 109 three times and I believe that it should have done this only once.Can you guys see any glaring error in the abbreviated code.
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
You do not return status for the called onclick event.
Return true;
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Arnold,

Where should I insert the return. I have tried on line 116 and 118 but did not see any difference
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
it should be before the closure of the function on line 119. or after the }; on line 118
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Still crushing. Have a look at http://www.wowislandcharter.com/wowaccounts/index.php?navbutton=New+Money+Transfers

It moves to the income page when you click the add button. This page is the home page and currently it is also acting as the error page.
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
Revert to what you had.  Take the script into its own external file that is included.

What tool are you using to create these?
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
I am using webuilder which is for all intensive purpose an enhenced notepad. All my codes are typed in raw.

The page file is currently as follows:
<!--Main form starts here-->

<div class='subformdiv' id='newtransfer'>

    <form class="subform newtransfer">

        <table>

        <tr class="tableheader">
        <th class='id'>ID</th>
        <th class='headertd date'><input class='date' type='label' disabled  value='Date'></th>
        <th class='headertd from'><input class='from' type='label' disabled  value='From'></th>
        <th class='headertd to'><input class='to' type='label' disabled  value='To'></th>
        <th class='headertd amount'><input class='amount' type='label' disabled  value='Amount'></th>
        <th class='headertd currency'><input class='currency' type='label' disabled  value='Currency'></th>
        </tr>

        <?php

        $excludedaccount=6;
        include "scripts/accountoptions.php";

        ?>
            <tr class='record'>
            <td class='id'></td>
            <td class='texttd date'><input class='datepicker' type='text' ></td>

            <td class='texttd from'><select class='from'><?php echo $AccountsOption ?></select></td>
            <td class='texttd to'><select disabled class='to'><?php echo $AccountsOption ?></select></td>
            <td class='texttd amount'><input class='amount' type='text'></td>
            <td class='texttd currency'><input disabled class='currency' type='text' ></td>
            <td class='buttontd'><input type='submit' onclick=buttononclick(this) class='button newaccounttransfer' value='ADD' /></td>

            </tr>

        </table>

     </form>

</div>


<div   id="output" style="float: left; clear: both">
   <p>This is the transaction id </p><p  id="transactionid">place holder</p>
   <p  id="target">This element gets the AJAX response</p>
</div>


<?php include "scripts/AccountTransfer.js"; ?>

Open in new window


So the js file is already external. Are you suggesting a further splitting of the file
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
You are including the file on the server meaning it is included in its entirety in the resulting page

<script src="/path/to/scripts/AccountTransfer.js"></script> at the top of your
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
By the top do you mean top of the body or in the head
0
 
LVL 76

Expert Comment

by:arnold
Comment Utility
You can include it in the header section before the</head> or right after the <body> tag.
The data will be retrieved/loaded, but will not be part of the page downloaded by the browser.
i.e. mypage.html will include a reference to the script file which the browser will load, but view source will not include the script while including the reference.
0
 
LVL 16

Author Comment

by:Sheils
Comment Utility
Hi Guys,

After a lot of goggling I have come up with a solution.

Instead of:

$(".button").click(function()

Use:

$(".button").unbind("click").bind("click", function()

and bingo no more looping everything works as intended. I don't think that anyone mentioned anything along this line but I will wait 24hr before closing to give the expert a chance to let me know if they had any suggestion leaning in this direction before I try to allocate any point. There have been a lot of contribution and I have learn a fair bit of stuff the posts relating to this question so I will try to share the points as fairly as I can
0
 
LVL 76

Accepted Solution

by:
arnold earned 500 total points
Comment Utility
The line in question was mentioned as likely the cause in several posts, but without the solution.
0
 
LVL 16

Author Closing Comment

by:Sheils
Comment Utility
I came up with the final answer
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now