Rewriting existing code to be efficient

[LinusIT]

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.

[daveVk]

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

[LinusIT]

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.

[daveVk]

Ops we need to pass the reponse in

var successFn = function(response) {

and call

if (response.result === "success" ) {
successFn(response);
} else ...

[LinusIT]

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