My current URL is http://localhost/create-story/galleries/wedding
Want to Make URL is http://localhost/create-story/galleries/wedding?query=VALUE_FROM_AJAX_RECIEVER
My Ajax function is
function liveSearch(val) {
$.ajax({
url: "{{ route('search_wedding') }}",
method: 'GET',
data: {query: val},
dataType: 'json',
success: function (data) {
$('#gallery').html(data);
}
})
}
$('#btn-bridal').on('click', function () {
liveSearch($(this).text());
});
Is It possible to change URL from AJAX after success? want to add request value In Url. Thanks
I think this will do the trick for you:
function liveSearch(val) {
let url = "{{ route('search_wedding') }}?query=" + val;
window.location = url;
}
$('#btn-bridal').on('click', function () {
liveSearch($(this).text());
});
If it doesn't work please comment it and I will delete the answer if it's not bringing any result.
Related
Want to Access Show function data through AJAX, but it returns error when i passed id variable in route
Contoller
public function show($id)
{
$features['UnitFeatures'] = UnitFeatures::find($id);
return $features;
}
View Blade File
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var feature_id = $('#unitFeatures').val();
$.ajax({
url: '{{ route('unitfeatures.show',feature_id) }}', // error in this line when i pass feature_id value to route
type: 'GET',
dataType: 'json',
success: function(response){
console.log(response);
}
});
});
Please give me a solution
The problem is that you cannot access a JS variable in your {{}} PHP code.
You will have to get the route uri and replace the placeholder manually in your JS code.
You can get the URI of your Route with this piece of code:
\Route::getRoutes()->getByName('unitfeatures.show ')->uri
This returns the uri as a string like that: /sometext/{id}
Now you can simply replace the {id} with the feature_id by using str.replace() or whatever function you like.
var feature_id = $('#unitFeatures').val();
var origUrl = '{{ \Route::getRoutes()->getByName('unitfeatures.show ')->uri}}';
$.ajax({
url: origUrl.replace('{id}', feature_id),
type: 'GET',
dataType: 'json',
success: function(response){
console.log(response);
}
});
});
Problem With You are using Javascript Variable in PHP Code You can use Javascript Variable After Execution of PHP Code treated as a String.
$.ajax({
url: "{{ route('unitfeatures.show') }}"+'/'+feature_id,
type: 'GET',
dataType: 'json',
success: function(response){
console.log(response);
}
});
});
I need to use more than 1 json from many URL API. For each URL I will do different thing but it has to be a the same time. I will populate some headers of a table with 1 URL, and the info of the table with 2 or 3 URL.
I have something like this:
$(document).ready(function(){
$("#my_button").click(function(){
var urlOne = 'http://example1',
var urlTwo = 'http://example2'
$.ajax({
url: urlOne,
success: function(result){
console.log(result);
$('#some_div').hide();
$('#another_div').show();
$('.some_class').append(result[0].some_data);
etc...
},
error: function (exception) {
$('#modal_error').modal('show');
}
});
$.ajax({
url: urlTwo,
success: function(result){
$('#myTabContent').show();
populateHeaders($("#headers"),result);
etc...
}
});
//And maybe more ajax calls.
});
});
How can accomplish that?
In this case, I use to create methods and call it when ajax success
for example
$.ajax({
url: urlOne,
success: function(result){
console.log(result);
$('#some_div').hide();
$('#another_div').show();
$('.some_class').append(result[0].some_data);
hereFunctionCallAnotherAjaxOne();
},
error: function (exception) {
$('#modal_error').modal('show');
}
});
const hereFunctionCallAnotherAjaxOne = () => {
$.ajax({
url: urlTwo,
success: function(result){
$('#myTabContent').show();
populateHeaders($("#headers"),result);
}
});
}
But read about Promises and how it works with JavaScript REST API
Im trying to redirect Ajax post in a success function
Here's the code
$.ajax({
type: "POST",
url: "/api/create-room/",
data:{
targetedUser,
},
success: function(data) {
// How to redirect in here??
}
});
You could use window.location.replace or window.location.href inside the success function :
$.ajax({
type: "POST",
url: "/api/create-room/",
data:{
targetedUser,
},
success: function(data) {
window.location.replace("url"); //Simulate HTTP redirection
//Or
window.location.href = "url"; //Simulate click on a link
}
});
For more information you could check This post.
Hope this helps.
I'm calling php file through ajax call and if it returns nothing i want to redirect user to another page (It's for error reports, if it doesn't return anything it means that user logged in). Tried to add error section but it doesn't work. Any suggestions will help. Thanks! Btw, I have small jQuery function at the top of the ajax function, why it breaks my whole ajax call?
ajax.js
function loginAjax() {
//$("#email_errors").empty(); //This function doesnt work and kills whole ajax call. Here is loginAjax function call line - <button type = "submit" id = "push_button" onclick = "loginAjax(); return false">PushMe</button>
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
}
});
}
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
success: function(data) {
$("#login_error").html(data.login_message);
},
error: function(){
window.location.replace("http://stackoverflow.com");
}
});
}
To redirect using javascript all you need to do is override the location.href attribute.
function loginAjax() {
$.ajax({
url: "Classes/call_methods_login.php",
type: "POST",
dataType: "json",
data: {
login_email: $("#login_email").val(),
login_password: $("#login_password").val(),
},
// the success method is deprecated in favor of done.
done: function(data) {
$("#login_error").html(data.login_message);
},
fail: function(data) {
location.href="path/to/error/page";
}
});
}
[This][1] is the link of my json file and i want to access its data into my ajax success function. tell me how can i do this?
$.ajax({
type: "GET",
url: "abc" + imageId,
dataType: "json",
success: function (d) {
alert(imageId);
var storyImage = d.data;
alert(storyImage);
}
})
Problem is that the object response is:
{
"http://www.livemint.com/template/features/webapps/encodeImage?loid=2.1.1521199245": {
"data":"data:image/jpg;base64,/9j/4AAQSk..."}
}
So you can't say d.data you will have to do d["http://www.livemint.com/template/..."]
But you can do something like this:
var imageId = "2.1.1521199245"
var url = "http://www.livemint.com/template/features/webapps/encodeImage?loid=" + imageId;
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: function (d) {
alert(imageId);
var storyImage = d[url].data;
alert(storyImage);
}
})
Here is a working fiddle: http://jsfiddle.net/cA396/
You need parse JSON into Object
http://www.json.org/js.html
If you do a crossdomain request $.ajax will be not work. See
jQuery AJAX cross domain