Develop Reference

Javascript function only runs once? Attempting to use same function multiple times

As that title says, I am attempting to use the same javascript function multiple times on the same page. Basically, I have 2 separate drop downs that call users via ajax so that even new users will be present. (The site is based off not having to always reload.) Anyways, the way I currently have it setup is something like this...
Javascript:
function getAllUsers() {
(function getAllUsers() {
$.ajax({
url: 'staff/getAllUsers.php',
success: function(data) {
$('#getAllUsers').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(getAllUsers, 5000);
}
});
})();
}
getAllUsers();
function getAllUsers2() {
(function getAllUsers2() {
$.ajax({
url: 'staff/getAllUsers.php',
success: function(data) {
$('#getAllUsers2').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(getAllUsers2, 5000);
}
});
})();
}
getAllUsers2();
I am sure that doing it like this is unpractical, hence why I am asking for some guidance now.
This is the current HTML setup for it on the dropdowns:
<select class="select2" name="user" id="getAllUsers" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
<select class="select2" name="user" id="getAllUsers2" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
Obviously the Loading Users... option is replaced when the ajax data is loaded.
Again though, I am sure that a better way of doing this exists.
But whenever I try to do something like this with the html... using the same javascript function, the second one just stays at "Loading Users..."
<select class="select2" name="user" id="getAllUsers" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
<select class="select2" name="user" id="getAllUsers" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
I would think that doing it the way I currently do with multiple functions all calling the PHP file constantly can cause load time issues after a while espically if I add more.
Thank you for any assistance!

Both select2's are using the same endpoint, why not just assign the value in the same ajax request?
Something like this will be okay:
function getAllUsers() {
$.ajax({
url: 'staff/getAllUsers.php',
success: data => {
$('#getAllUsers').html(data);
$('#getAllUsers2').html(data);
},
error: err => {
//$('#getAllUsers').html("<option>test</option>");
//$('#getAllUsers2').html("<option>test</option>");
},
complete: () => {
// Schedule the next request when the current one's complete
setTimeout(getAllUsers, 5000);
}
});
}
getAllUsers();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select2" name="user" id="getAllUsers" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
<select class="select2" name="user" id="getAllUsers2" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>

First, you need to understand why it doesn't work for you and then find a solution.
The problem is that, you are using the same element ID in two separate elements, this is not strictly forbidden and will not throw you any errors, but it points to a wrong implementation.
When you are trying to select elements with the ID getAllUsers using jQuery, it knows that there should be only one such element, so it selects only the first one. Any other elements with the same ID are ignored. That's why it worked only for the first one.
Now, let's try to find solutions.
One solution, as Miroslav Glamuzina suggested is correct and works, but not flexible enough.
Another solution would be using a selector that selects multiple element which is not an ID. The best option is to use element's class, that will be unique for your two (or more) select elements. So if you want to add another one in the future, you don't have to touch the JS code, but only the HTML part.
You can do something like this:
HTML
<select class="select2 getAllUsers" name="user" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
<select class="select2 getAllUsers" name="user2" required>
<option selected="true" disabled="disabled">Loading Users...</option>
</select>
(Note that I also changed the name attribute of the second select, to prevent issues in the future)
JavaScript
(function getAllUsers() {
$.ajax({
url: 'staff/getAllUsers.php',
success: function(data) {
$('.getAllUsers').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(getAllUsers, 5000);
}
});
}());
WARNING!
If you are planning to use this script publicly, you should pay attention on the security issue in this script.
This script is opened for XSS attacks. Because, you are requesting a remote content and applying its content as HTML without any data validations nor escaping.
I would suggest in your case, to generate a JSON in the PHP script, with the list of users and all the data you need, then on the JavaScript, create option elements using the data from the JSON list.
You should do something like this:
Let's say that this is the JSON received from staff/getAllUsers.php:
[
{"id": 14, "name": "User 1"},
{"id": 16, "name": "User 2"},
{"id": 17, "name": "User 3"}
]
JavaScript:
(function getAllUsers() {
$.ajax({
url: 'staff/getAllUsers.php',
success: function(data) {
try {
const list = JSON.parse(data); // Parse JSON from string to object
const selectEl = $('.getAllUsers').empty(); // Clear the content of both `select` elements
for ( let i=0; i<list.length; i++ ) { // Loop through each item in the JSON array
$('<option />') // Create an `option` element
.attr('value', list[i].id) // Set attribute `value` to `option` element
.text(list[i].name) // Set `option` text (this function also escapes any special characters, which prevents potential XSS attacks)
.appendTo(selectEl); // Add `option` element to both `select` elements
}
} catch (e) {
// Report any errors with the JSON parsing process to the developer console.
console.error(e);
}
},
error: function(jqXHR, textStatus, errorThrown) {
// Track any errors received from the server for debugging purposes
console.error(textStatus, errorThrown);
}
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(getAllUsers, 5000);
},
dataType: 'json' // Expect a `json` back from server
});
}());
I hope you can learn something from this.
Good luck!

Save and retrieve options of select element to and from Json

Next is html for text, button ,select elements:
<input type="button" id="addNextProjectID" value=" Add next project"/>
<input id="setNewProjectID" type="text" value=" project name "/>
<br>
<select id="selectProjectID" onfocus="onFocusSelectProject()">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
</select>
</br>
Code which does add options to select element from text element on button click
function addNextProjectF(){
var x = document.getElementById("selectProjectID");
var option = document.createElement("option");
option.text = document.getElementById("setNewProjectID").value;
option.id = document.getElementById("setNewProjectID").value;
x.appendChild(option);
}
How to stringify all options from select and paste them to Json variable and then how to parse them back to select element.
My Select element has first 2 options set from html. I need to keep them.
Here i was thinking that the way would be to loop through the select element options and "append" each option to Json and reversal then to refill select element. But i did not meet any case of code to do this yet. Can you pleas help me with this code?
The case is also that i am not sure also how to use success function from ajax to fill the options of select. Anyway, maybe am thinking totally wrong approach to get to result i need.So how to proceed?
With next (code below) try i get
{"0":{},"1":{},"2":{}}
empty fields in DB. I presume "JSON.stringify(saveToprojectsList)" is wrong.
function saveToProjectsListF(){
whichProjectToSave=document.getElementById("selectProjectID").value;
saveToprojectsList=document.getElementById("selectProjectID");
var jsonProjectsListToPHP= JSON.stringify(saveToprojectsList);
console.log(jsonProjectsListToPHP);
$.ajax({
method:"POST",
url: '/wp-content/themes/mypage/PsaveJson.php',
data: {
"sendProjectsList":1,
"whichProjectToSave":whichProjectToSave,
"jsonProjectsListToPHP":jsonProjectsListToPHP
},
success: function(data){
}
});
}

The question is rather broad, so I will only focus on the part where you have tried to address it with code, i.e. stringifying the options in the select list.
That code does not work as intended because saveToprojectsList is a DOM object, and will just yield an empty object when you try to stringify it to JSON. You can use map to extract the text contents of the option tags.
NB: As you use jQuery for $.ajax, you could use it in other places as well:
function onFocusSelectProject() {}
$('#addNextProjectID').click(function addNextProjectF(){
var value = $("#setNewProjectID").val();
$("#selectProjectID").append($("<option>").text(value).attr("id", value));
});
$('#save').click(function saveToProjectsListF(){
var whichProjectToSave = $("#selectProjectID").val();
var saveToprojectsList = $.map($("#selectProjectID>option"), function (op) {
return $(op).text();
});
var jsonProjectsListToPHP = JSON.stringify(saveToprojectsList);
console.log(jsonProjectsListToPHP);
$.ajax({
method:"POST",
url: '/wp-content/themes/mypage/PsaveJson.php',
data: {
sendProjectsList: 1,
whichProjectToSave: whichProjectToSave,
jsonProjectsListToPHP: jsonProjectsListToPHP
},
success: function(data){
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="addNextProjectID" value=" Add next project"/>
<input id="setNewProjectID" type="text" value=" project name "/>
<br>
<select id="selectProjectID" onfocus="onFocusSelectProject()">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
</select>
<input type="button" id="save" value="Save"/>
</br>

On change on multiple select jquery with Ajax and PHP

I have a multiple selection in my HTML page which is generated in an AJAX response: the format is like this:
<div>
<select class='myselect' idselect=1>
<option value='private'>Private</option>
<option value='public'>Public</option>
</select><button idfeed=1 class='change'>Change status</button></div>
<div>
<select class='myselect' idselect=2>
<option value='private'>Private</option>
<option value='public'>Public</option>
</select><button idfeed=2 class='change'>Change status</button>
</div>......
In my jquery/Ajax I have something like that (the code which generating the HTML above):
<script>
$( document ).ready(function() {
var id= $('#idUser').val();
//console.log('findAll');
$.ajax({
type: 'GET',
url: 'http://localhost/ws/api/getUserFeeds/'+id,
dataType: "json", // data type of response
success:function(data){
//alert(data[0].URL);
$.each(data, function (i) {
var toappend="<div><select class='myselect' idselect="+data[i].id+"><option value='private'>Private</option><option value='public'>Public</option></select><button idfeed="+data[i].id+" class='change'>Change status</button></div>";
console.log(toappend);
$("#foo").append(toappend+"<div id=rss"+i+ ">"+i+"</div>");
$('#rss'+i).FeedEk({
FeedUrl: data[i].URL,
MaxCount: 1,
DateFormat: 'MM/DD/YYYY HH:mm'
});
});
}
});
});
</script>
And when I want to retrive the value of selected by user which must either private or public I use this jquery code to select,but the problem is that it select only private all time.
<script type="text/javascript">
$(document).on('change','.myselect',function(){
var selectvar = $('.myselect').val();
console.log(selectvar);
});
</script>
As you can see I display in my console the value of the selected one,and using the JQuery change event.
I try by many ways to try to make it work but it always return private(My select is composed of two choice:private and public)
Thanks for your help!!!

You made a small mistake at the end. You should retrieve your select input with $(this), not $('.myselect') :
$(document).on('change','.myselect',function(){
var selectvar = $(this).val();
console.log(selectvar);
});

Try this
DEMO
$(document).on('change','.myselect',function(){
var selectvar = $(this).val();
console.log(selectvar);
});
$(this) = > the element changed
$(".myselect") => it can be any of the two select elements in your
given html

AJAX POST Won't Work With document.getElementById Variables

I have an html form and ajax call that store data in MySQL via a PHP page.
The code for all three is copied below. (Please note the //)
All three work fine as long as I have the variables hard coded in the function where the ajax call stores them. However, when I comment out the hard coded variables and run it with the regular variables, it does not work.
JavaScript AJAX Call
$("#buttonSubmit").click(function() {
//var questionID = obj.Questions[i].questionID;
//var shortAnswerValue = document.getElementById('txtShortAnswerValue').value;
//var longAnswerText = document.getElementById('txtLongAnswerText').value;
var questionID = "SampleQID";
var shortAnswerValue = "Sample Short";
var longAnswerText = "Sample Long";
$.ajax({
type: "POST",
url: "SaveUpdatesTemplate.php",
data: "questionID=" + questionID + "&shortAnswerValue=" + shortAnswerValue + "&longAnswerText=" + longAnswerText,
}); // end ajax function
document.getElementById("txtLongAnswerText").reset();
}); // end button submit function
Associated HTML
Select Inspection or Project Phase
Select Inspection or Project Phase
<label for="selectSection">Select Inspection or Project Phase</label>
<select class="form-control" id="selectSection" name="selectSection">
<option> Select Inspection or Project Phase</option>
</select>
<button type="button" class="form-control" id="buttonStart" name="buttonStart" value="List Questions">Start - Click to Populate Question List</button>
<label for="selectQuestion">Select Task or Question to Update</label>
<select class="form-control" id="selectQuestion" name="selectQuestion" >
<option> Select Task or Question to Update </option>
</select>
<!-- short answer below -->
<label for="txtShortAnswerValue">Short Answer</label>
<select class="form-control" id="txtShortAnswerValue" name="txtShortAnswerValue">
<option value="1" selected>worst</option>
<option value="3">middle</option>
<option value="5">best</option>
</select>
<!-- long answer below -->
<label for="txtLongAnswerText">Long Answer / Notes</label>
<textarea class="form-control" name="txtLongAnswerText" id="txtLongAnswerText" rows=3>
</textarea>
Associated PHP Code
// Assign PHP variables to POST results from client
$questionID = htmlspecialchars(trim($_POST['questionID']));
$shortAnswerValue = htmlspecialchars(trim($_POST['shortAnswerValue']));
$longAnswerText = htmlspecialchars(trim($_POST['longAnswerText']));
//SQL STATEMENT
$sql="INSERT INTO Updates (questionID, shortAnswerValue, longAnswerText)
VALUES
('$questionID', '$shortAnswerValue', '$longAnswerText')";

You could do this:
data: encodeURI("questionID=" + questionID + "&shortAnswerValue=" + shortAnswerValue + "&longAnswerText=" + longAnswerText);
The problem is the spaces in var questionID, and so on. Also you have an unnecessary comma before the end of the Object you passed to $.ajax(), right after your data property value.

How to structure the code to process multiple variables from mulitple form elements in JavaScript and remember the choices?

E.g. I have an HTML form:
<form role="search" method="get" id="searchform" action="" >
<!-- DIRECT SEARCH INPUT TO SEARCH STRING -->
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
<!-- DROPDOWN TO SELECT ONE CHOICE -->
<select name='country' id='country' class='postform' >
<option class="level-0" value="2">USA</option>
<option class="level-0" value="3">Canada</option>
<option class="level-0" value="4">Mexico</option>
<option class="level-0" value="5">Cuba</option>
</select>
<!-- CHECKBOXES TO SELECT MULTIPLE CHOICES -->
<div id="color">
<input type="checkbox" name="" value="21" />Beachfront
<input type="checkbox" name="" value="16" />TV
<input type="checkbox" name="" value="20" />Internet
<input type="checkbox" name="" value="17" />Pets Allowed
</div>
</form>
<div id="results"><!-- THE AJAX RESULTS GOES HERE --></div>
And I want to be able to make AJAX request every time the user:
1) write something in the search input box and click search button
OR
2) select one choice from the dropdown menu
OR
3) select one or multiple choices from the checkboxes that are checked
The problem is that I don't know how to structure my JavaScript code correctly and what is the best way to remember and manage choices that the user selected before, to take all things in account. For example, not just the search term when he write something and click search button, but also to take in count the dropdown choice (probably done one step before) and maybe the checked options from checkboxes if he has checked something before. Here is what I have so far:
jQuery(document).ready(function($){
// RESULTS SHOULD APPEAR IN #results DIV AFTER AJAX IS DONE
var $maincontent = $('#results');
// SEARCH INPUT PROCESSING
$('#searchsubmit').click(function(e){
e.preventDefault();
var searchval = $('#s').val();
$.post(
WPaAjax.ajaxurl,
{
action : 'ajax_search_action_do',
searchval : searchval
},
function( response ) {
$maincontent.empty();
$maincontent.append( response );
}
);
});
// COUNTRY DROPDOWN CHOICE PROCESSING
$('#country').on('change', function() {
var countryval = this.value;
$maincontent.animate({ opacity : '0.1' })
$.post(
WPaAjax.ajaxurl,
{
action : 'ajax_search_action_do',
countryval : countryval
},
function( response ) {
$maincontent.empty();
$maincontent.append( response );
$maincontent.animate({ opacity : '1' })
}
);
return false;
});
// CHECKBOXES PROCESSING
$('#color input[type=checkbox]').click(function() {
if (this.checked) {
// code if checked
}
else {
// nothing
}
});
});
As you can see, it's very bad. Because one "function" checks only click, one change and I don't know how to grab values from the checkboxes and make an array and send it via ajax ;(.
Any idea how to structure the JavaScript code so it is not so separated and the checks are somehow in one part (or more logical) instead of three separated parts?
Any ideas are welcome.

Create som logic :
var _do = {
bind: function() {
var self = this;
$('#searchsubmit').on('click', function(e){
e.preventDefault();
self.ajax('searchval', $('#s').val());
});
$('#country').on('change', function() {
self.ajax('countryval', this.value);
});
return self;
},
ajax: function(key, value) {
var data = {action: 'ajax_search_action_do'};
data[key] = value;
$.post(
WPaAjax.ajaxurl, data, function( response ) {
$maincontent.empty().append( response );
}
);
}
}
jQuery(document).ready(function($){
_do.bind();
});

Maybe use jquery.form.js?
http://malsup.com/jquery/form/
It's a great plugin, just structure the form like it was a normal redirection form, add array in name of checkboxes
<input type="checkbox" name="types[]" value="21" />Beachfront
Add target URL to the form, and then...
When u want to submit the form just do
$('searchform').ajaxSubmit({
success: function() {
// callback
}
)
Trigger this on checkboxes change, dropdown change etc. To make the code clean, use one selector
$('#country, #s, #color input').on('change', sendAjaxForm);