Problem on passing array to ajax request in laravel - javascript

I am trying to pass array through ajax request
<input type="text" name="item_name[]">
<input type="text" name="address">
$(document).on('click', '#save_info', function () {
var address = $("#address").val();
var item_name = $("[name^='item_name']");
$.ajax({
url: '/save_information',
dataType: "json",
type: 'POST',
data: {
_token: '{{ csrf_token() }}',
address: address,
item_name: item_name,
}
});
});
In my controller
$item_name = $request->item_name;
$array_count = count($item_name);
It makes error. How can i save array value using loop. Thanks in advance

#Mujahidur Rahman Mithun IUB you can write this more shortly by using serializeArray.
$(document).on('click', '#save_info', function () {
var serializeData = $("[name^='item_name']").serializeArray();
serializeData.push(
{
name: "address", value: $("#address").val()
},
{
name: "_token", value: '{{ csrf_token() }}'
},
);
$.ajax({
url: '/save_information',
dataType: "json",
type: 'POST',
data: serializeData
});
});
Or if you use <form>, then you can use with very few line code :
$(document).on('click', '#save_info', function () {
$.ajax({
url: '/save_information',
dataType: "json",
type: 'POST',
data: $('form#myform').serialize(),
});
});
`

The variable item_name holds DOM Node instead of input values. You'd have to make it either var item_name = $("[name^='item_name']").val() or var item_name = $("[name^='item_name']").value

Related

how to pass $(this).data() in ajax request

i need to pass $(this).data into success func in ajax. here is my code
var product_id = $(this).data("product_id");
var url = "{{ route('client.add_wishlist')}}";
$.ajax({
url: url,
type: "POST",
dataType: "json",
data: {
product_id: product_id,
_token: "{{ csrf_token() }}",
},
success: function (data) {
$(this).addClass("wishlist-comp-saved");
},
});
But $(this).addClass('wishlist-comp-saved'); is not working inside success: function(data) {}
$(this) will change context when called. When inside of the success: function (data), $(this) is not the same as it was inside of whatever is calling this $.ajax() request.
For your issue, you simply have to set $(this) as a variable before your $.ajax() request, and reference it in the success: function():
var product_id = $(this).data("product_id");
var url = "{{ route('client.add_wishlist')}}";
var that = $(this);
$.ajax({
url: url,
type: 'POST',
dataType: "json",
data: {
'product_id': product_id
'_token': "{{ csrf_token() }}"
},
success: function(data) {
that.addClass('wishlist-comp-saved');
}
});

cart data not update in shopify using ajax

I have a Problem in Shopify.
I want update cart quantity on button click using ajax but it will give error like
{"status":404,"message":"Cart Error","description":"Cannot find variant"}
Here is my ajax code,
$('.adjust-plus').click(function(){
var qty = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').val();
var varient = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').attr('data-id');
jQuery.ajax({
type: 'POST',
async: false,
url: '/cart/update.js',
data: { updates: { varient : qty } },
dataType: 'json',
success: function() { location.href = '/cart'; }
});
});
currently in both variable value come so no any error in value.
but when id add code like:
$('.adjust-plus').click(function(){
var qty = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').val();
var varient = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity').attr('data-id');
jQuery.ajax({
type: 'POST',
async: false,
url: '/cart/update.js',
data: { updates: { 15082896588867 : 2 } },
dataType: 'json',
success: function() { location.href = '/cart'; }
});
});
then cart updated successfully.
Firstly, remove async: false as it's very bad practice and not needed here as you're using the success callback properly.
The issue itself is because you cannot use variables as the keys of an object with the syntax you're using. To get around this you can use bracket notation, like this:
$('.adjust-plus').click(function() {
var $quantity = $(this).parent('.button-wrapper').siblings('.input-wrapper').children('.quantity');
var qty = $quantity.val();
var varient = $quantity.data('id');
var data = { updates: {} };
data.updates[varient] = qty;
jQuery.ajax({
type: 'POST',
url: '/cart/update.js',
data: data,
dataType: 'json',
success: function() {
location.href = '/cart';
}
});
});

How should I pass multiple variables to url in jquery ajax?

I am tryin to pass multiple values in the below method but I am unable to get this to work. What is the correct syntax?
I have tried
data: ('keyword='+$(this).val(),'id='10),
and
data: {'keyword='+$(this).val(),'id='10},
and
data: {'keyword='+$(this).val(),'&id='10}//I have also tried to replace the curly braces with brackets.
This works so I think its a syntax problem?
data: ('keyword='+$(this).val())
Here is my complete request. I am using GET, I have tried using POST to no avail.
$.ajax({
type: "GET",
url: "showhints.php",
data: ('keyword='+$(this).val()),
beforeSend: function() {
$("#search-box").css("background","#FFF url(loading.gif) no-repeat 165px");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
The easiest is to use an object literal which will then be uri encoded internally
data: {keyword: $(this).val(), id : 10}
You would do it like
...
data: {
keyword: $(this).val(),
id: 10
},
...
You can send multiple values like this
$.ajax({
type: "GET",
url: "showhints.php",
data: {'key':'value','key':'value',..},
beforeSend: function(){
$("#search-box").css("background","#FFF url(loading.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
Try the following:
HTML:
<form action="">
<input type="text" name="name">
<input type="text" name="surname">
<input type="submit" name="submitForm">
</form>
Ajax call:
var name = $('input[name]');
var surname = $('input[surname]');
$('input[submitForm]').click(function() {
url: 'someLink.php',
dataType: json,
data: {
name: name.val(),
surname: surname.val()
},
success: function(data) {
console.log(data)
}
});

Getting text value to Controller using jquery ajax call

My text box and button
<input type="text" class="form-control" name="ClaimNumber" placeholder="Enter a claim number"
id="ClaimNumber" />
<button class="btn btnNormal" type="submit" id="btnSearch">
<i class="fa fa-search"></i>
</button>
My jquery
$(document).ready(function () {
$("#btnSearch").on("click", function () {
var enteredClaimNumber= $("#ClaimNumber").val();
alert(enteredClaimNumber);
$.ajax({
type: "POST",
url: "/Home/ClaimsSearch",
data: enteredClaimNumber
});
});
});
My controller
[HttpPost]
public ActionResult ClaimsSearch(string enteredClaimNumber)
{
_lfAPI.ClaimsAdvanceSearch(enteredClaimNumber);
return View();
}
I'm not able to get the value in controller..Thanks in advance..
Data in AJAX request must be like name, value pair:
data: {"enteredClaimNumber": ClaimNumber}
Write like this:
$(document).ready(function () {
$("#btnSearch").on("click", function () {
var ClaimNumber = $("#ClaimNumber").val();
alert(enteredClaimNumber);
$.ajax({
type: "POST",
url: "/Home/ClaimsSearch",
data: {"enteredClaimNumber": ClaimNumber}
});
});
});
var datum = {"claimNum": ClaimNumber};
$.ajax ({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Home/ClaimsSearch",
dataType: "json",
data: JSON.stringify(datum),
});
![Check This][1]
In
data : { parameter : value }
if there are multiple parameter then separate with comma (,)
data : { parameter1 : value1,parameter2 : value2 }
as shown below
$.ajax({
url: this.href,
type: 'POST',
data: { input: $('#caption').val() },
success: function (result) {
alert(result.name);
},
error: function () {
alert("error");
}
});

Ajax post method not working

I am currently creating a website and am having trouble using AJAX to post my data. I have a button and when clicked the following code is processed...
var name = document.getElementById('name').innerHTML;
var text = document.getElementById('text').innerHTML;
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
success: function() {
$('#paragraph').html("worked");
}
});
This definitely opens the post.php page but it is not passing through the desired data. Am I doing something wrong?
Thanks in advance
What do the variables name and text contain? Rather than doing
var name = document.getElementById('name').innerHTML;
var text = document.getElementById('text').innerHTML;
You can do:
var name = $("#name").val();
var text = $("#text").val();
You may need to pass the datatype object too:
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
dataType: "json",
success: function() {
$('#paragraph').html("worked");
}
});
var name = $('#name').text();
var text = $('#text').text();
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
dataType: 'json',
success: function() {
$('#paragraph').html("worked");
}
});
I guess you are not preventing the default button click behaviour. Probably you should use the preventDefault function on the button click to stop processing the default form posting. Also make sure you have the content present inside your form elements with the Id name and text
$(function(){
$("#yourButtonId").click(function(e){
{
e.preventDefault();
var name = $('#name').html();
var text = $('#text').html();
if(name!="")
{
$.ajax({
type: "POST",
url: "php/post.php",
data: { postName: name, postText: text},
success: function() {
$('#paragraph').html("worked");
}
});
}
else
{
alert("Why should i do ajax when content is empty!");
}
});
});
var name = document.getElementById('name').value,
text = document.getElementById('text').value,
postData = JSON.stringify({ postName: name, postText: text});
$.ajax({
type: "POST",
url: "php/post.php",
data: postData,
success: function() {
$('#paragraph').html("worked");
}
});
You will need to include a reference to json2.js for this to work in older browsers. You can download it here : https://github.com/douglascrockford/JSON-js

Categories