homepage Welcome to WebmasterWorld Guest from 54.161.191.254
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Rewriting existing code to be efficient
LinusIT




msg:4503022
 3:14 pm on Oct 2, 2012 (gmt 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.

 

daveVk




msg:4503229
 11:33 pm on Oct 2, 2012 (gmt 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 ...

LinusIT




msg:4503361
 8:48 am on Oct 3, 2012 (gmt 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.

daveVk




msg:4503789
 1:33 am on Oct 4, 2012 (gmt 0)

Ops we need to pass the reponse in

var successFn = function(
response) {

and call

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

LinusIT




msg:4504775
 7:43 am on Oct 6, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved