I'm having some difficulty here in importing up to 6 URLS into ajax. Essentially you take a form and enter into the form input field a URL. And then press 'load'. The jquery [see JS#1] will grab what was entered and load the Ajax call.
However if I press the 'add-more' button, it will add up to 5 more input fields. The problem here is when filling in the 5 more input fields and pressing 'load'
It doesn't load the ajax URLS separately. Just an empty array. I did some research into deferred js loading. But I'm obviously not doing something right.
I then tried a different approach [see JS#2]. Basically writing the ajax calls manually. And this gave me better results. However when I enter in three input fields, and press 'load' it then only grabs one of the input fields and loops that three times.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="tFormBox">
<div class="tInputTop">
<h1>Add Up to 6</h1>
</div>
<div class="tInputBottom">
<label class="sr-only" for="cInput">Enter Name</label>
<div class="c-input-fields">
<div id="cInput">
<input class="form-control" name="cInput" placeholder="Enter Name">
<div class="add-more"></div>
</div>
</div><button id="chInputBtn">LOAD</button>
</div>
</div>
</body>
</html>
JS #1
var feed;
var sURLs = document.getElementsByClassName('cInput');
$('#cInput').click(function() {
$(this).toggleClass('focused');
})
$('#cInput > .add-more').click(function() {
// -- Limit to 6 more Additional Input Boxes --//
var i = $('.InputBottom div').length;
var cInput = $('<div id="cInput ' + i + ' "><input class="cInput" class="form-control" name="cInput" placeholder="Enter Name"></input></div>');
$.each(cInput, function(i, val) {
alert(cInput[i]);
});
if (i <= 7) {
console.log('adding')
$(cInput).appendTo('.c-input-fields');
} else {
console.log('maxed')
}
})
$('#cInput').on('click', function(tags) {
getS();
})
function getS() {
// --grab URLS to a maximum of 6 --//
for (var i = 0; i < sURLs.length; i++) {
var sValue = sURLs[i].value;
}
function multipleAjax(number, deferredObject) {
$.ajax({
url: '/' + 'sValue',
type: "GET",
success: function(data) {
results.push(data);
deferredObject.resolve();
}
});
}
var deferreds = [];
var results = [];
var nothingImportant;
for (var i = 0; i < nothingImportant; i++) {
var deferredObject = new $.Deferred();
deferreds.push(deferredObject);
multipleAjax(i, deferredObject);
}
// check if all ajax calls have finished
$.when.apply($, deferreds).done(function() {
console.log(results);
console.log(sValue)
});
}
JS#2
function getS() {
// --grab URLS to a maximum of 6 --//
for (var i = 0; i < sURLs.length; i++) {
var sValue = sURLs[i].value;
}
var async2 = $.ajax({
type: 'GET',
url: '/' + sValue,
success: function(data) {
console.log(data)
},
error: function(data) {
alert('notworking')
}
})
var async1 = $.ajax({
type: 'GET',
url: '/' + sValue,
success: function(data) {
console.log(data);
},
error: function(data) {
alert('notworking')
}
})
var async3 = $.ajax({
type: 'GET',
url: '/' + sValue,
success: function(data) {},
error: function(data) {
alert('notworking')
}
})
$.when(async3, async2, async1).done(function(result3, result2, result1) {});
}
