Welcome to WebmasterWorld Guest from 23.22.182.29

Forum Moderators: open

Message Too Old, No Replies

Rewriting existing code to be efficient

     
3:14 pm on Oct 2, 2012 (gmt 0)

Full Member

5+ Year Member

joined:Aug 3, 2010
posts: 243
votes: 0


I'm not sure if anyone will be able to help me with this, hopefully someone can.

I have written some code that does the following:

- Data from a form gets sent to PHP through AJAX
- Data is checked to see if the reference already exists
- If the reference doesn't exist then insert the data and do stuff on the page
- If the reference does exist then show a dialog asking to confirm yes/no.
- If yes is selected then input the data and do stuff on the page (repeated code from a previous step)

It's working fine but as I have repeated the same code I'm wondering if there is a better way of doing it. I have posted the full code so you can see what I've done.

<script language="javascript">
$(function() {
$("#exists-form").hide();
$(".till_insert").click(function() {
var ref = $("input#ref").val();
var inn = $("input#in").val();
var out = $("input#out").val();
var detail = $("input#detail").val();
var dataString = 'ref='+ ref + '&inn=' + inn + '&out=' + out + '&detail=' + detail + '&till_insert1="true"';
$.ajax({
type: "POST",
url: "includes/process.php",
data: dataString,
dataType: "json",
cache: false,
success: function(response) {
//alert (JSON.stringify(response)); //Show JSON Alert
if (response.result === "success" ) {
$( "#till tbody" ).append( "<tr>" +
"<td>" + ref + "</td>" +
"<td>" + response.inn + "</td>" +
"<td>" + response.out + "</td>" +
"<td>" + detail + "</td>" +
"</tr>" );
$('#insert-form')[0].reset();
$("#balance").html("Balance: &pound;" + response.balance);
$("#balance").removeClass('red orange green').addClass(response.colour);
$("#out").attr("disabled", "").css({ "border": "2px solid #D9D9D9" }),
$("#label_out").css({ "color": "#454545" });
$("#in").attr("disabled", "").css({ "border": "2px solid #D9D9D9" }),
$("#label_in").css({ "color": "#454545" });
}
else if (response.result === "exists") {
$("#exists-form").html("<div class=\"warning\">Reference already exists</div>");
$('#exists-form').dialog({
autoOpen: false,
draggable: false,
modal: true,
resizable: false,
title: "Warning",
buttons: {
"Yes": function() {
$(this).dialog('close');
var dataString = 'ref='+ ref + '&inn=' + inn + '&out=' + out + '&detail=' + detail + '&till_insert_exists="true"';
$.ajax({
type: 'POST',
url: 'includes/process.php',
data: dataString,
dataType: "json",
cache: false,
success: function(response) {
if (response.result === "success" ) {
$( "#till tbody" ).append( "<tr>" +
"<td>" + ref + "</td>" +
"<td>" + response.inn + "</td>" +
"<td>" + response.out + "</td>" +
"<td>" + detail + "</td>" +
"</tr>" );
$('#insert-form')[0].reset();
$("#balance").html("Balance: &pound;" + response.balance);
$("#balance").removeClass('red orange green').addClass(response.colour);
$("#out").attr("disabled", "").css({ "border": "2px solid #D9D9D9" }),
$("#label_out").css({ "color": "#454545" });
$("#in").attr("disabled", "").css({ "border": "2px solid #D9D9D9" }),
$("#label_in").css({ "color": "#454545" });
}
}
});
},
"No": function() {
$(this).dialog('close');
}
}
});
$('#exists-form').dialog('open');
}
else if (response.result === "error") {
alert("There has been an error");
}
}
});
return false;
});
});
</script>


If any further explaining is needed let me know. I'm thinking maybe a function to insert the data could be written then called when required, just an idea.
11:33 pm on Oct 2, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


for starters define common success function say prior to first ajax call.

var successFn = function() {
$( "#till tbody" ) ...
$("#label_in").css({ "color": "#454545" });
};

success test becomes

if (response.result === "success" ) {
successFn();
} else ...
8:48 am on Oct 3, 2012 (gmt 0)

Full Member

5+ Year Member

joined:Aug 3, 2010
posts: 243
votes: 0


Thanks for that daveVK. I have put the function in place and tested it but it doesn't work. It is coming back with the result as "success", just is not doing anything within the function.

Just to clarify, here's the complete function:

var successFn = function() {
$( "#till tbody" ).append( "<tr>" +
"<td>" + ref + "</td>" +
"<td>" + response.inn + "</td>" +
"<td>" + response.out + "</td>" +
"<td>" + detail + "</td>" +
"</tr>" );
$('#insert-form')[0].reset();
$("#balance").html("Balance: &pound;" + response.balance);
$("#balance").removeClass('red orange green').addClass(response.colour);
$("#out").attr("disabled", "").css({ "border": "2px solid #D9D9D9" }),
$("#label_out").css({ "color": "#454545" });
$("#in").attr("disabled", "").css({ "border": "2px solid #D9D9D9" }),
$("#label_in").css({ "color": "#454545" });
}


I have placed this just before the first ajax call as suggested.
1:33 am on Oct 4, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Ops we need to pass the reponse in

var successFn = function(response) {

and call

if (response.result === "success" ) {
successFn(response);
} else ...
7:43 am on Oct 6, 2012 (gmt 0)

Full Member

5+ Year Member

joined:Aug 3, 2010
posts: 243
votes: 0


Thank you for that, it's working great now.