Suppose i have a textarea in a form named urlslist where the user will input a list of urls , one on each line.I handle the submit via ajax with query as follows.
$(function () {
$("#urlslist").submit(function(e) {
//prevent Default functionality
e.preventDefault();
//get the action-url of the form
var actionurl = e.currentTarget.action;
//do your own request an handle the results
$.ajax({
url: actionurl,
type: 'post',
dataType: 'json',
data: $("#urlslist").serialize(),
success: function(data) {
//put the result in another textarea here
}
});
});
});
Then i display the result of my processing (i.e another url for each input) in another textarea. It works well but i want to improve it so that old urls don't get submitted to the server via ajax while not clearing either of the textareas.
Edit 1
I think i need to demonstrate this with an example.
Suppose that the urlslist textarea contain one url.I click on submit and i get a result.Now i add another url in the urlslist and click on submit again.Now there will be 2 urls in the post request.How can i make sure that only new urls are sent.
Using the Do something only once lib from Mozilla :
function executeOnce() {
var argc = arguments.length,
bImplGlob = typeof arguments[argc - 1] === "string";
if (bImplGlob) {
argc++;
}
if (argc < 3) {
throw new TypeError("executeOnce - not enough arguments");
}
var fExec = arguments[0],
sKey = arguments[argc - 2];
if (typeof fExec !== "function") {
throw new TypeError("executeOnce - first argument must be a function");
}
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
throw new TypeError("executeOnce - invalid identifier");
}
if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") {
return false;
}
fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
return true;
}
You can make the following :
// some custom helper
String.prototype.s2b64 = function() { // make base64 from string
return window.btoa(unescape(encodeURIComponent(this)));
}
String.prototype.replaceArray = function(find, replace) { // replace by array
var replaceString = this;
for (var i = 0; i < find.length; i++) {
replaceString = replaceString.replace(find[i], replace[i]);
}
return replaceString;
};
// here we start :
var output = [];
$.each($("#urlslist textarea").first().val().split(/\n/), function(index, value) {
alert(index + ": " + value);
if (value != '')
executeOnce(function(v) {
output.push(value);
}, null, value, 'urldone_' + value.s2b64().replaceArray(
["expires", "path", "domain", "secure"],
["e_xpires", "p_ath", "d_omain", "s_ecure"]) + '');
});
alert(output);
Some part may look a bit odd, but it's all about bullet-proofing the manual setCookie (like the use of b64 and the search & replace in case we are really unlucky and randomly get a cookie keyword from the b64 output)
And if you want to remove all the saved value, here is the code :
var cookieNames = document.cookie.split(/=[^;]*(?:;\s*|$)/);
// Remove any that match the pattern
for (var i = 0; i < cookieNames.length; i++) {
if (/^urldone_/.test(cookieNames[i])) {
document.cookie = cookieNames[i] + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
}
}
This is a Cookie based answer (by browser, refresh & restart proof).
Here is working example developed form this link http://jsfiddle.net/userdude/2hgnZ/
$('form#id').submit(function(e){
var form = $(this);
form.children('input[type=submit]').attr('disabled', 'disabled');
// this is just for demonstration
e.preventDefault();
$.ajax({
url: ' http://fiddle.jshell.net/_display/',
type: 'get',
success: function(data) {
alert(data);
form.children('input[type=submit]').removeAttr('disabled');
}
});
return false;
});
var map = []
map['www.google.com'] = 'www.google.com';
var urls = ['www.google.com', 'www.yahoo.com']; //this is form text area
for (var i = 0; i< urls.length; i++) {
if (map[urls[i]] !== urls[i]) {
console.log('post ' +);
map[urls[i]] = urls[i];
} else {
console.log('don not post ' + urls[i]);
}
}
Read the above console code you may got some idea
Here i keep
step 1) var map = [] global
step 2) map['www.google.com'] = 'www.google.com'; this line demonstrate already posted
step 3) loop through var urls which is your text area
step 4) if (map[urls[i]] !== urls[i]) check the current link already posted if not post else do not post