We Keep Coding

Fetch Data in a form through Ajax in Laravel

I am making an auto-complete form, in which user enter only the id and the whole information related to that id comes in other field. I am using ajax and Laravel 5.4. The Data is coming in alert but how i can insert data in input fields of a form. Here is my script:
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
alert(response); console.log(response);
}
});
});
</script>
this is my controller:
public function VendorDetail(Request $request)
{
$id= $request->id;
$data = DB::select(DB::raw("SELECT * from bp where id = '$id'"));
echo json_encode($data);
}
here is my console.log response:
[{"id":37,"card_name":"Maka Furniture Co.,Ltd ","trade_type":"Manufacturer","address":"Xinzhang development zones,Shengfang town,Hebei province.","fc":"121AC209","status":0,"created_at":"2018-10-10 10:02:27","user":"admin"}]
here is the screenshot of response:
Any help would be highly appreciable.

If you want all data in single input you can use this
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
dataType: 'json',//this will expect a json response
data:{id:$("#vid").val()},
success: function(response){
$("#inputfieldid").val(response);
}
});
});
</script>
or if you want on different input field you can do like this
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
dataType: 'json',//this will expect a json response
data:{id:$("#vid").val()},
success: function(response){
$("#inputfieldid1").val(response.id);
$("#inputfieldid2").val(response.2ndcolumnName);
$("#inputfieldid").val(response.3rdcolumnName);
}
});
});
</script>

In your other fields you can do the following in success method:
success: function(response) {
$('.input1').val(response.input1);
$('.input2').val(response.input2);
$('.label1').html(response.label1);
}
I hope it would helpful.

add unique ID property to your input like this:
<input id="name" type="text">
Then fill this input with ajax result by this code:
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
$('#name').val(JSON.parse(response)[0].name); //<---- This line,
}
});
});
</script>
Do this for all your input base you logic.

Suppose you have input fields like this in your form
<input type="text" name="vendor_name" id="vendor_name">
<input type="text" name="vendor_mobile" id="vendor_mobile">
<input type="text" name="vendor_email" id="vendor_email">
You ajax code should be like this and I hope you get the parameters in your JSON response
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
$('#vendor_name').val(response.vendor_name)
$('#vendor_mobile').val(response.vendor_mobile)
$('#vendor_email').val(response.vendor_email)
}
});
});
</script>
If this can't help then could you please do console.log(response) and paste the debug data so it will be easy to help you more.
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
console.log(response)
}
});
});
</script>
if you don't want response[0] then you need to change in your controller File like this.
$vendor = DB::table('bp')->where('id', '.$id.')->first();
return response()->json($vendor);
As per your need, this will help for sure.

javascript work on windows but don't work on linux

This javascript dropdown list auto complete work on windows local server in PHP aplication, but when i try this funcionality when aplication is on linux server nothing happen. Maybe i should change live method into on? But how?
This is javascript
<script type="text/javascript">
$(function(){
$(".search_keyword").keyup(function()
{
var search_keyword_value = $(this).val();
var dataString = 'search_keyword='+ search_keyword_value;
if(search_keyword_value!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}
return false;
});
$("#result").on("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.country_name').html();
var decoded = $("<div/>").html($name).text();
$('#search_keyword_id').val(decoded);
});
$(document).o("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_keyword")){
$("#result").fadeOut();
}
});
$('#search_keyword_id').click(function(){
$("#result").fadeIn();
});
});
</script>
And this is search.php
include('db.php');
if(isset($_POST['search_keyword']))
{
$search_keyword = $polaczenie->real_escape_string($_POST['search_keyword']);
$sqlCountries="SELECT name FROM shop WHERE name LIKE '%$search_keyword%'";
$resCountries=$polaczenie->query($sqlCountries);
if($resCountries === false) {
trigger_error('Error: ' . $polaczenie->error, E_USER_ERROR);
}else{
$rows_returned = $resCountries->num_rows;
}
$bold_search_keyword = '<strong>'.$search_keyword.'</strong>';
if($rows_returned > 0){
while($rowCountries = $resCountries->fetch_assoc())
{
echo '<div class="show" align="left"><span class="country_name">'.str_ireplace($search_keyword,$bold_search_keyword,$rowCountries['nazwa']).'</span></div>';
}
}else{
echo '<div class="show" align="left">Brak</div>';
}
}

Autocompletion div won't go away [PHP/JQuery]

I've got a lil question.. I've been working on a JQuery auto-completion system, but I can't get to manage the box that comes up while writing to fade away.
HTML Code:
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for items being sold.." />
<div id="result"></div>
</div>
JQuery Code:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
PHP Code:
<?php
require_once('includes/db_connect.php');
if($_POST) {
$q = $_POST['search'];
$sql_res = mysqli_query($conn, "SELECT * FROM entries WHERE item like '%$q%'");
while($row = mysqli_fetch_array($sql_res)) {
$item = $row['item'];
?>
<div class="show" align="left">
<span class="name"><?=$item;?></span>
</div>
<?php
}
}
?>
Print-screen when typed in: http://prntscr.com/7cqbgc
Print-screen when backspaced the input: http://prntscr.com/7cqbsa
I hope someone can helps me to make the item's retrieved from the database disappear.
Also, if someone has a clue. How would I make the text in the items bold if it matches to my text input?
Thank you.

Just try like this:-
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
if(html !=''){
$("#result").html(html).show();
}else{
$("#result").hide();
}
}
});
}else{
$("#result").hide();return false;
}

HTML Button Not Reappearing After Being Clicked

As you can see here when you click a 'METAR' button one after the other, the previous button reappears when the next one is clicked.
However, when you click the 'Total Users Online on VATSIM' button, followed by one of the 'METAR' buttons, the 'Total Users Online on VATSIM' button does not reappear.
My code is located in this Pastebin.
The JavaScript for the 'Total Users Online on VATSIM' button is as follows:
<script type="text/javascript">
$(document).ready(function() {
var userButtons = $('.getUserButtons');
userButtons.click(function(){
var clickedButton = $(this);
$.ajax({
type: "POST",
url: "/online.php",
dataType: 'html',
success: function(data) {
$('#outputDiv').hide('slow', function() {
$(this).remove();
});
userButtons.show('slow');
var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
outputElement.hide();
outputElement.insertAfter(clickedButton);
clickedButton.hide('slow', function() {
outputElement.show('slow');
});
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
</script>
The code for the button itself is as follows:
<li><button style="height: 40px;" class="btn btn-primary getUserButtons hvr-float-shadow">Total Users Online on VATSIM</button></li>
Any assistance would be appreciated. I think I need to edit the code so that clicking one of the 'METAR' buttons then tells the 'Total Users Online on VATSIM' to reappear; I don't know how though.
Thanks!

add getMetarButtons class to Total Users Online on VATSIM as well

Finally fixed the issue. Here it is:
script type="text/javascript">
$(document).ready(function() {
var metarButtons = $('.getMetarButtons');
var userButtons = $('.getUserButtons');
metarButtons.click(function(){
var clickedButton = $(this);
$.ajax({
type: "POST",
url: "metarData.php",
data: { location: clickedButton.attr('data-location') },
dataType: 'json',
success: function(data) {
$('.metarOutput').hide('slow', function() {
$(this).remove();
});
$('#outputDiv').hide('slow', function() {
$(this).remove();
});
metarButtons.show('slow');
userButtons.show('slow');
var outputElement = $('<div id="outputDiv"' + data['location'] + ' style="color: white;" class="metarOutput">' + data['metar'] + '</div>');
outputElement.hide();
outputElement.insertAfter(clickedButton);
clickedButton.hide('slow', function() {
outputElement.show('slow');
});
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var metarButtons = $('.getMetarButtons');
var userButtons = $('.getUserButtons');
userButtons.click(function(){
var clickedButton = $(this);
$.ajax({
type: "POST",
url: "online.php",
dataType: 'html',
success: function(data) {
$('.metarOutput').hide('slow', function() {
$(this).remove();
});
$('#outputDiv').hide('slow', function() {
$(this).remove();
});
metarButtons.show('slow');
userButtons.show('slow');
var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
outputElement.hide();
outputElement.insertAfter(clickedButton);
clickedButton.hide('slow', function() {
outputElement.show('slow');
});
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
</script>

Load jQuery Dialog with cascading dropdowns from server

I have a jQuery dialog that needs to be opened and populated with data from a database. The dialog has in it drop downs that when in a "new" mode (not editing for re-saving) cascade.
How can I load the dialog with the values from the database, while at the same time causing the cascading to happen.
I have tied using the onfocus event of the dialog when the dialog is in "edit" mode, but the focus hit every time an element gets focus. Didn't work without being sneaky with the editing mode.
I have tried opening the dialog and using jQuery to set the dropdown, which works, but then the cascading does work.
For the cascading I am using .change on the the different dropdowns.
Not sure if the code is going to help, but will post some to itterate the jQuery functionality I am using.
The question is: How do I open a dialog, load dropdowns with information from the server and have the .change functionality work?
$('#collectDD').change(function(){
// first change the item drop down list
var collection = $('#collectDD').val();
data = "coll=" + collection + "&action=getItems&func=";
$('#addCollection').text(collection);
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
$('#itemDD').empty();
$("#itemDD").html(html);
// now update the function collection dropdown
data = "coll=" + collection + "&action=getFunction";
}
});
Collection DD HTML
<select id="collectDD" name="collectionDD">
<option>Select Collection</option>
<option>Option1</option>
</select>

This doesn't exactly match up with your tag names, and I made a little change to the data string, but I think it's in line with what you're looking for
<div id="dialogbox">
<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
</div>
<script type="text/javascript">
$(document).ready( function() {
$( "#dialogbox" ).dialog({
open: function(event, ui) {
var s1 = $("#s1").empty();
var s2 = $("#s2").empty();
var s3 = $("#s3").empty();
s1[0].enabled = false;
s2[0].enabled = false;
s3[0].enabled = false;
//load first dropdown from the database
var data = "coll=dropdown1&val=&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s1.html(html);
s1[0].enabled = true;
}
});
//load the second DD when the first changes
s1.change( function() {
s2[0].enabled = false; //disable until after ajax load
s3[0].enabled = false;
data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s2.empty().html(html);
s2[0].enabled = true;
}
});
});
s2.change( function() {
if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
s3[0].enabled = false;
data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s3.empty().html(html);
s3[0].enabled = true;
}
});
}
});
}
});
});
</script>
UPDATE
Here is an example with change functions in their own functions
<div id="dialogbox">
<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
</div>
<script type="text/javascript">
var s1, s2, s3, data;
$(document).ready( function() {
s1 = $("#s1").empty();
s2 = $("#s2").empty();
s3 = $("#s3").empty();
$( "#dialogbox" ).dialog({
open: function(event, ui) {
s1[0].enabled = false;
s2[0].enabled = false;
s3[0].enabled = false;
//load first dropdown from the database
data = "coll=dropdown1&val=&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s1.html(html);
s1[0].enabled = true;
}
});
//load the second DD when the first changes
s1.change( changeDD1 );
//load the third DD when the second changes
s2.change( changeDD2 );
}
});
});
function changeDD1() {
s2[0].enabled = false; //disable until after ajax load
s3[0].enabled = false;
data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s2.empty().html(html);
s2[0].enabled = true;
}
});
}
function changeDD2() {
if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
s3[0].enabled = false;
data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s3.empty().html(html);
s3[0].enabled = true;
}
});
}
}
</script>