We Keep Coding

Materialize autocomplete drop-down not working

I have been working with materialize autocomplete for my project and I have been running into issues with getting the dropdown to appear. It just fails to appear! I read that materialize version 0.98.2 might work, I used that CDN and it still doesn't work. I suspect there is some problem with triggering the dropdown. (I could be very wrong) another thing that could be wrong is that the data isn't being used because I messed up somewhere.
I am having no problem getting the data and using that, but the dropdown just wnt work.
html:
<div class="input-field">
<label for="country">Autocomplete</label>
<input type="text" id="company" class="autocomplete">
</div>
here is my js:
var company = document.getElementById("company");
company.addEventListener("input", function () {
$(function() {
var inputValue = $('#company').val();
var url = 'https://sandbox.iexapis.com/stable/search/'
+ encodeURIComponent(inputValue)
+ '/?token=****************';
$.ajax({
type: 'GET',
url: url,
success: function(response) {
var companyArray = response;
var dataCompany = {};
for (var i = 0; i < companyArray.length; i++) {
//console.log(countryArray[i].name);
console.log(url);
dataCompany[companyArray[i].securityName] = companyArray[i].symbol;
console.log(companyArray[i].securityName);
console.log(companyArray[i].symbol);
}
$('input.autocomplete').autocomplete({
data: dataCompany
});
}
});
});
});
Since someone requested the response I am putting some screenshots here!
this is when I enter "wa"
the problem is not that the data isn't there, it's just that the dropdown selector box fails to appear.

You can first intialize your autocomplete and store instance of that in some variable . Then , whenever user type inside input-box simply use that instance to update data inside your autocomplete i.e : instance.updateData(dataCompany) .
Demo Code :
//suppose this is response return from ajax
var response = [{
"securityName": "abc",
"symbol": "scsc"
}, {
"securityName": "abc2",
"symbol": "scsc2"
}]
$(function() {
$('input#company').autocomplete() //intialize your autocomplete
let instance = M.Autocomplete.getInstance($('input#company')); //get instance
$('input.autocomplete').on("input", function() {
var inputValue = $('#company').val();
/*var url = 'https://sandbox.iexapis.com/stable/search/' +
encodeURIComponent(inputValue) +
'/?token=****************';
$.ajax({
type: 'GET',
url: url,
success: function(response) {*/
var companyArray = response;
var dataCompany = {};
for (var i = 0; i < companyArray.length; i++) {
dataCompany[companyArray[i].securityName] = companyArray[i].symbol;
}
//updatedata
instance.updateData(dataCompany)
/* }
});*/
});
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field">
<label for="country">Autocomplete</label>
<input type="text" id="company" class="autocomplete" autocomplete="off">
</div>

Insert data into inputfield instead of textarea

I have a profile page, if i select a option from the dropdown the data will be inserted into the text area fields. But it doesn't work when i change my textarea type to input type.
$(document).ready(function(){
// code to get all records from table via select box
$("#profiel").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax({
url: 'getProfile.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#artiestnaam").text(employeeData.artistname);
$("#id").text(employeeData.id);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
Doesn't work
<input name="artiestnaam" placeholder="Artiestnaam" class="form-control" id="artiestnaam"></input>
This DOES work but i don't want to use this
<textarea name="artiestnaam" cols="1" placeholder="Artiestnaam" rows="1" style="resize:none;overflow:auto;background-color:white;" class="form-control" id="artiestnaam"></textarea>
I am curious what i am doing wrong with javascipt, i never use javascript(found this code online) so i apologise if this is a dumb question. Thanks for your time

Instead of
$("#artiestnaam").text(employeeData.artistname);
Do
$("#artiestnaam").val(employeeData.artistname);

You can user below
$("#artiestnaam").val(employeeData.artistname);
OR
$("#artiestnaam").attr('value',employeeData.artistname);
Instead of
$("#artiestnaam").text(employeeData.artistname);

How to make a popup form AJAX in leaflet and execute function on submit

What i'm basically trying to do,after clicking on each polygon a popup form appears where the user will input some values,press submit and after the php script and function runs ,it will supposedly show some markers on the map.I'm trying to make this form work as AJAX and execute the function within.
I already ajax successfully a html form before but it seems it needs some work to function properly within leaflet.
The form im trying to AJAX
var htmlformGuest = `
<h2>Search for parking slots</h2>
<form id="parkform" action="/findPark.php" method="post" >
Enter the polygon id:<br>
<input type="number" name="id_P" value="">
<br>
Max radius:<br>
<input type="number" name="Radius" min="50" max="500" value="" placeholder="50">
<br><b>
<input type="Submit" value="Submit">
<input id="form-polygon-id" type="hidden" name="PolygonID">
<input type="reset">
</form>
`;
The function i want to include when submitting the form ( which im not sure it works since i need to first ajax the form!)
function putMultipleMarkers(jArrayId, jArrayLat, jArrayLng) {
for (var i = 0; i < jArrayLat.length; i++) {
var multipleMarker = new L.marker(jArrayLat[i], jArrayLng[i])
.bindPopup(jArrayId[i])
.addTo(geojson);
}
}
What worked for me in a non-leaflet form previously was this code withing the function
$("#parkform").submit(function (e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: "findPark.php",
data: form.serialize(),
success: alert('Marker Map'),
})
});
Any help appreciated!

It's not really clean, but you can do $('body').html(data) on success:
$("#parkform").submit(function(e) {
e.preventDefault();
var dataForm = $(this).serialize();
var url = form.attr('action');
$.post(
url,
dataForm,
function(data) { // on success
$('body').html(data);
}
);
});
Because the data is the code response of your request, then it's the same page with POST array values.

jQuery updates DOM, browser does not

I am working on a project where for example field number 3 on the webpage should be updated with values from a database when a user enters data into field number 1. This already works fine without any problems.
But if the user modifies field number 3 first and field number 1 at a later time, just the DOM gets updated (as I can tell from Firebug) but there isn't any visible change on field number 3 to the user.
I created a very basic version of this problem and still I am not able to tell what's wrong here.
HTML
<div id="container1">
<textarea id="container1.1">Entry 1.1</textarea>
<textarea id="container1.2">Entry 1.2</textarea>
<textarea id="container1.3">Entry 1.3</textarea>
</div>
jQuery
$(document).ready(function() {
$('textarea').change(function() {
var clickedObject = $(this);
var id = $(this).attr('id').substr(9);
var value = $(this).val();
var dataString = "id=" + id + "&value=" + value;
$.ajax({
type: "POST",
url: "update.php",
data: dataString,
cache: false,
success: function(Result)
{
if(Result == '-')
{
console.log('Nothing to do');
} else {
clickedObject.next().next().html(Result);
}
}
});
});
});
PHP
<?php
if ($_POST['id'] == '1.1') {
echo 'Modified string';
} else {
echo '-';
}
?>

You must set values of textarea by .val() method, instead of html().
And maybe it will be more descriptive if you will use only one id of textarea that should call request on changes.

How to show php passed results to ajax without refreshing

I want to do is when a user type an email to the inputbox ajax will pass the value automatically to php.
My problem is the result only show if I try to refresh the page
html:
<input type="text" id="email" name="email" />
script:
$(document).ready(function(){
var countTimerEmailName = setInterval(
function ()
{
emailName();
}, 500);
var data = {};
data.email = $('#email').val();
function emailName(){
$.ajax({
type: "POST",
url:"Oppa/view/emailName.php",
data: data,
cache: false,
dataType:"JSON",
success: function (result) {
$("#imageLink").val(result.user_image);
$("#profileImage").attr('src', result.user_image);
$("#emailNameResult").html(result.user_lname);
$("#emailCodeResult").val(result.user_code);
}
});
};
});

You can try with:
Because you dont need declare function in ready() and you need yo get the email value after any change. Now you only get the value when the page is ready.
function emailName( email ){
$.ajax({
type: "POST",
url:"Oppa/view/emailName.php",
data: 'email=,+email,
cache: false,
dataType:"JSON",
success: function (result) {
$("#imageLink").val(result.user_image);
$("#profileImage").attr('src', result.user_image);
$("#emailNameResult").html(result.user_lname);
$("#emailCodeResult").val(result.user_code);
}
});
};
$(document).ready(function(){
$('#email').change(function(e) {
emailName( this.val());
});
});

You're handling it wrong. jQuery has particular events to do these things.
Take this for example:
$(document).ready(function(){
$(document).on('keyup', '#email', function(e) {
e.preventDefault();
val = $(this).val();
console.log("Value: " + val);
});
});
It will look what is in the below input field as the user types. (which is what I presume you're trying to do?)
<input type="text" id="email" name="email" />
Example
You could simply remove that console.log() and replace it with your ajax request. (The above example will run as the user types.)
Alternatively you could use change() like this:
$(document).ready(function(){
$(document).on('change', '#email', function(e) {
e.preventDefault();
val = $(this).val();
console.log("Value: " + val);
});
});
Which will run after the value of the text box has changed. (When the user clicks out of the text box or moves somewhere else on the page.)
Example