Develop Reference

How to pass double variable through laravel jquery? No response is shown on button click

I am trying to send a jquery request to update the table, that route requires two variables id, Receive_id. I tried this code below but the button on-click does not show any response. Plz review my code or suggest me if there are any other ways to send route.
here is my blade code
<button data-url="{{ route('repairs.updateCylinder',['id'=> $cylinder->id, 'receive_id' => $data->id]) }}" class="btn btn-primary submit" id='update-cylinder'>Update</button>
Here is Jquery code,
<script>
$(document).ready(function(){
$(document).on("click", "#update-cylinder", function() {
// e.preventDefault();
var url = current.data('url')
var id=
$.ajax({
url: url,
type: "PATCH",
cache: false,
data:{
_token:'{{ csrf_token() }}',
body_leak: $('#body-leak').val(),
nozzle_change: $('#nozzle-change').val(),
nozzle_repair: $('#nozzle-repair').val(),
cap_change: $('#cap-change').val(),
washer_change:$('#washer-change').val(),
wash:$('#wash').val(),
refill:$('#refill').val(),
remarks:$('#remarks').val()
},
success: function(dataResult){
dataResult = JSON.parse(dataResult);
if(dataResult.statusCode)
{
window.location = "/repairs/updateCylinder";
}
else{
alert("Internal Server Error");
}
}
});
});
});
</script>

You can add a data-id on your button :
<button data-id="{{$cilinder->id}}" data-receive-id="{{ $data->id }}" class="btn btn-primary submit" id='update-cylinder'>Update</button>
and on your script section :
$("#update-cylinder").on("click", function(e) {
e.preventDefault();
let id = $(this).data("id");
let receive_id = $(this).data("receive-id");
let url = "repairs/updateCylinder/"+ id;
let data = new FormData($('#id_form')[0]);
$.ajax({
url: url,
type: "PATCH",
cache: false,
data : data,
datatype:'json',
success: function(response){
if(response.success == true){
window.location "/repairs/cylinderlist";
}else{
alert("Error to update...");
}
});
}

How to Update data to HTML , when an ajax request is being called multiple times

I have a page which lists multiple shops details.For every shop ajax call is being made to get the product details.
function init_product_data(shop_id) {
var uri = parseUri(location.href);
var qs_product = uri.queryKey;
qs_product.device = "desktop";
qs_product.shop_id = shop_id;
qs_product.rows = 3;
$.ajax({
url: search_ajax_product_url_v3,
type: "GET",
data: (qs_product),
dataType: "json",
timeout: 5000,
success: function(result){
// $('#official-product_detail').html('');
$('.official-product_detail').html(buildMicroBrandProductHtml(result));
},
complete: function() {
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
Call init_prod_data for each shop:
for (var i=0; i<n; i++){
init_product_data(result[i].shop_id);
}
HTML:
<div class="grid-shop-product pull-right">
<div class="official-product_detail">
</div>
</div>
Problem is that the product details of the last ajax call result are being updated for all shops. How can I update the product detail for each shop inplace when the result is recieved.
Eg:
<div class="grid-shop-product pull-right">
<div class="official-product_detail">
<!-- Products of Shop1-->
</div>
</div>
<div class="grid-shop-product pull-right">
<div class="official-product_detail">
<!-- Products of Shop2-->
</div>
</div>
.
.
.
<div class="grid-shop-product pull-right">
<div class="official-product_detail">
<!-- Products of ShopN-->
</div>
</div>

Basically, you have to loop through each div and then update that current div only with ajax result data.You can try following code in which, I am traversing through each .official-product_detail and passing it as a parameter to the function which further calls ajax and render only the same control with result data.
$(".official-product_detail").each(function(){
init_product_data(shop_id,$(this));
});
function init_product_data(shop_id,control) {
var cn = control; //YOU CAN FIND THE CONTROL IF ITS DEEP INSIDE
var uri = parseUri(location.href);
var qs_product = uri.queryKey;
qs_product.device = "desktop";
qs_product.shop_id = shop_id;
qs_product.rows = 3;
$.ajax({
url: search_ajax_product_url_v3,
type: "GET",
data: (qs_product),
dataType: "json",
timeout: 5000,
success: function(result){
// $('#official-product_detail').html('');
cn.html(buildMicroBrandProductHtml(result));
},
complete: function() {
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}

innerHTML.value not working?

I've been trying to write a JavaScript program that returns Wikipedia search results. A few days ago, I got it to the point where I could see the item being searched for, as confirmed by the alert() method, but now when I call the same alert() method it just returns "undefined":
$("button").click(function(e){
var search =document.getElementById("test").innerHTML.value;
alert(search);
});
I swear that this is exactly what I had while it was working, so there must be some subtle issue elsewhere. Any help is appreciated, complete code below:
HTML:
Random
<section>
<form>
<br>
<div class="divid">
<input type="text" value='' id="test" >
<button >Search</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
JavaScript:
$(document).ready(function () {
$("button").click(function(e){
var search =document.getElementById("test").innerHTML.value;
alert(search);
});
var button = $('button');
var toSearch = '';
var searchUrl = "http://en.wikipedia.org/w/api.php"
var x="England";
input.autocomplete({
source: function (request, response) {
$.ajax({
url: searchUrl,
dataType: 'jsonp',
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function (data) {
response(data[1]);
}
});
}
});
var playListURL = 'http://en.wikipedia.org/w/api.php?format=json&action=query&titles=India&prop=revisions&rvprop=content&callback=?';
$.getJSON(playListURL ,function(data) {
$.each(data.query.pages, function(i, item) {
//alert(item.title);
})
})
$.ajax({
//http://en.wikipedia.org/w/api.php?format=json&action=query&titles=India&prop=revisions&rvprop=content&callback=?
url: '//en.wikipedia.org/w/api.php',
data: { action: 'query', list: 'search', srsearch: "Carl Sagan", format: 'json' },
dataType: 'jsonp',
success:
function (x) {
//alert( x.query.search[0].title);
}
});
})

Use .innerHTML to get the html in a DOM element
Use .value to get the value of an input, textarea, or other form input
.innerHTML.value is not a thing.

If you are using jQuery, try this:
var search = $("#test").html();
alert(search);

Show succes message from ajax

I have a question, So I create a sistem that update in database a row when onChange a select box. All goes well, but I want to drop a succes message if update was with succes.
My view :
<form action="" id="updateStatus" method="post">
<select id="statusSelect"
name="{{ gift.id_instant_gagnant }}"
class="form-control"
onChange="updateCadeauStatus({{ gift.id_instant_gagnant }})">
{% for key,statut in form_logistique.statut.choices %}
<option value="{{ key }}"
{% if gift.etat == key %}selected="selected"{% endif %}>
{{ statut }}
</option>
{% endfor %}
</select>
</form>
<script>
function updateCadeauStatus(id) {
var id = id;
var selectedName = $("#statusSelect option:selected").val();
var url_deploy = 'http:localhost/updateStatus'
console.log(id);
console.log(selectedName);
$.ajax({
url: url_deploy,
type: "POST",
async: true,
data: { id_cadeau:id, id_status:selectedName}
});
}
</script>
The controller :
public function updateStatus(){
$iGiftId = $_POST['id_cadeau'];
$iNewStatus = $_POST['id_status'];
$bUpdate = $this->updateStatusByGiftId($iGiftId, $iNewStatus);
return $this->render('logistique.twig');
}
The model :
public static function updateStatusByGiftId($iGiftId, $iStatusId){
$request = sprintf( ' UPDATE `%s` set etat = %d WHERE id = %d ', $table, $iStatusId, $iGiftId);
return Mysqli::query($request, $database);
}
So everything goes well but I want to drop a message after every update, too be displayed in the view. Please help me!!! Thx in advance, sorry for my english.

$.ajax({
url: url_deploy,
type: "POST",
async: true,
data: { id_cadeau:id, id_status:selectedName},
success : function(data){
console.log('success');
},
error: function(){
console.log('error');
}
});

You can drop the response of the check file on ajax.
$.ajax({
url: url,
type: "POST",
...
success: function(response){
window.alert(response);
}
})
To be more specific, if you want to give a message only when you successfully changed the row. Modify the validation file (url:) and print a messagge only when you had success..
There are other ways to do that..
You can print a "message id" and get it with the script and drop a message:
$.ajax({
url: url,
type: "POST",
...
success: function(response){
if(response == '1'){
window.alert('Successfully changed!!');
}else if(response == '0'){
$("#foo").html("Error, not changed :(");
}else{
------ something else ------
}
}
})
Hope I could help !

Im not sure if you have your response in another file.
Cuz your response now is in the var data in the line with the code:
}).done(function(data){
$.ajax({
url: url_deploy,
type: "POST",
async: true,
data: { id_cadeau:id, id_status:selectedName}
}).done(function(data){
$("[SuccesDiv]").append("[Succes MSG]");
});
The text between the [ - ] is ment to put there your own element or data.
[EDIT]
I did'nt look good...
You are not looking when it is changed.
To do that, do this:
$("select").on("change", function(){
$.ajax({
url: url_deploy,
type: "POST",
async: true,
data: { id_cadeau:id, id_status:selectedName}
}).done(function(data){
$("[SuccesDiv]").append("[Succes MSG]");
});
});

on click save data of drop down list using Java Script , Jquery or Ajax

I have a drop down list. I am trying to save data of that drop down list on click event without using a button. I have tried some code but it is not working please help.
Here is the view of my drop downlist
#model MyYello.Admin.Models.FeedBack
#{
ViewBag.Title = "Feed Back";
}
#*#using (Ajax.BeginForm("SelectFeedBack", "Admin", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "mainContent" }, new { #id = "formId" }))
*#
<form method="post" id="formId" action="#Url.Action("SelectFeedBack","Admin")">
#Html.ValidationSummary(true);
<fieldset>
#Html.HiddenFor(item => item.FeedBackId)
<legend>Create Notes</legend>
<div class="editor-label">
#Html.LabelFor(item => item.FeedBackDrpDown, "Select feed Back")
</div>
#Html.DropDownList("FeedBack")
<input type="hidden" id="isNewNote" name="isNewNote" value="false" />
#* <p>
<input type="Submit" value="Save" id="Save" />
</p>*#
#* #Url.Action("CreateNote", "Admin")*#
</fieldset>
</form>
<script type="text/javascript">
$(function () {
$("#FeedBack").change(function () {
console.log("test");
$("#formId").submit(function () {
console.log("test1");
$.ajax({
type: "POST",
//url: urlAction,
data: {},
datatype: "JSON",
contentType: "application/json; charset=utf-8",
success: function (returndata) {
if (returndata.ok)
window.location = returndata.newurl;
else
window.alert(returndata.message);
}
});
});
});
});

You can adjust your onChange-Method like this:
$("#FeedBack").change(function () {
var urlAction = "/whatever/url/"; // someURL
// var urlAction = $("#FormId").attr("action"); // or grab the form-url?
var postData = {
"whateverName" : $(this).val() // selected drop-down-value
};
$.ajax({
type: "POST",
url: urlAction,
data: postData, // send postData-Object
dataType: "JSON",
contentType: "application/json; charset=utf-8",
success: function (returndata) {
// make shure that the attributes ok,newurl and message are available - otherwise this throws an error and your script breaks
if (typeof returndata.ok !== "undefined" && typeof returndata.newurl !== "undefined" && returndata.ok)
window.location.href = returndata.newurl;
else
window.alert(returndata.message);
}
});
});
this is how you just submit the select-field-value to whatever URL. Do you wish to submit the whole form when the dropdown changes?