Dynamic URL for ajax request - php

I'm trying to create a search field on the top navbar with ajax. Since it's on the navbar, it has to be present on all pages, therefore the URL is constantly changing.
$.ajax({
type: 'GET',
url: CURRENT_URL,
dataType: 'json',
data: {
search: userSearch
},
success: function (){...
I'm working with Laravel, so i tried this on the navbar page:
<script>
var CURRENT_URL = "{{url()->current()}}"
</script>
The CURRENT_URL is displayed fine if i try to console log it, but ajax gives an error "Source map error: Error: request failed with status 404".
How can i insert the current URL into the ajax request?

You can use location.href instead of CURRENT_URL
$.ajax({
type: 'GET',
url: location.href,
dataType: 'json',
data: {
search: userSearch
},
success: function (){...
or
<script>
var CURRENT_URL = location.href;
</script>

Hopefully, this can help. Here's my approach to make my url dynamically I get the URL in every forms var URL = $('#example_form').prop('action'); then the URL variable must append or set via Js/Jquery. check my example below.
<script type="text/javascript">
var URL = $('#example_form').prop('action');
$.ajax({
type:'GET',
url: URL+'/clearContent',
beforeSend: function (xhr) {
var TOKEN = $('meta[name="csrf-token"]').attr('content');
if (TOKEN) {
return xhr.setRequestHeader('X-CSRF-TOKEN', TOKEN);
}
},
data:{
get_category_id : $('.parent-id').val(),
},
success:function(data){
if (data.response.status == true) {
// your codes here
}
},
dataType: 'json',
complete: function () {}
});

Related

Can't POST data through AJAX/Fancybox to PHP file

Hey I can't pass a JS variable through AJAX to php file. No matter if I try POST or GET it's not working: with POST it gave me [] or Undefined index if I want to print_r($_POST['adminID']
And GET, there I get {"fancybox":"true"}
$('#adminList tr').on('click', function() {
var adminID = $(this).find(".adminID").text();
console.log(adminID);
$.ajax({
type: 'POST',
url: 'modules/management/user_edit.php',
data: {adminID : adminID},
success: function(data)
{
$.fancybox.open({
src : 'modules/management/user_edit.php',
type : 'ajax'
});
}
});
});
and module/management/user_edit.php i just want to post this adminID
You send double request to user_edit.php file, first with POST data, and second without. You should display result of first request in fancybox.
$('#adminList tr').on('click', function() {
var adminID = $(this).find(".adminID").text();
$.ajax({
type: 'POST',
url: 'modules/management/user_edit.php',
data: {adminID : adminID},
success: function(response)
{
$.fancybox.open(response);
}
});
});

POST request gives 404, GET request works

My AJAX request gives a 404 on POST but when I change it to GET it works fine. Why is this?
$('#navitem').click(function (e) {
e.preventDefault();
var level = $(this).attr('lvl');
$.ajax({
url: 'subjects.php',
data: { "subjid": level },
type: 'POST',
dataType: String,
complete: function () {
// window.location = 'subjects.php';
}
});
});
Both the pages are present in the same directory.

Jquery simple Ajax Post PHP not working

I have a simple code but is not working. I want to create a more complex function but I just need the basic structure.
HTML
<span class="cleanreport">Delete Record</span>
Javascript:
$( ".cleanreport" ).click(function() {
var token = "test";
$.ajax({
data: {"data": token},
type: "post",
url: "clean.php",
success: function (data) {
console.log(data);
$('.test').html(data);
}
});
});
PHP clean.php
$data = $_POST['data'];
echo $data;
What I am doing wrong?
This should work for you:
var token = "test";
$.ajax({
type: 'POST',
url: "clean.php",
data: {id: token},
dataType: "json",
success: function(response) {
// some debug could be here
},
error: function(a,b,c) {
// some debug could be here
}
});
If not, please debug success and error parameters using console.log().
Based on jquery documentation setting type is an alias for method so this could not be a problem in you case for sure.
$( ".cleanreport" ).click(function() {
var token = "test";
$.post('clean.php",
{
data: token
},
function (data,status) {
//console.log(data);
$('.test').html(data);
});
});

Pass Jquery variables to PHP using AJAX

I'm trying to make an app where if you click on a div, the data-id will be put into a variable, which will give PHP the select parameters to look for. Here's my code to better explain it.
HTML:
<div class="box" data-id="caption"></div>
JQuery:
$('.box').click(function () {
var caption = $(this).data('id');
});
After Googling I found the best way to do this is through AJAX, which I then proceeded to try:
$.ajax({
url: 'index.php',
type: 'GET',
dataType: 'json',
data: ({ caption }),
success: function(data){
console.log(data);
}, error: function() {
console.log("error");
}
});
However, this doesn't seem to work. If there's a better way to do what I mentioned above, I'm open to new ideas.
EDIT
Here is my PHP code.
if(isset($_GET['caption'])){
echo $caption;
$select = "SELECT * FROM pics WHERE text = '".$caption."'";
}
?>
Look through the api at jQuery.
Your data key should contain a json object -
$.ajax({
url: 'index.php',
type: 'GET',
dataType: 'json',
data: {caption: caption},
success: function(data){
console.log(data);
}, error: function(error) {
console.log(error);
}
});

How to load php script into div with jquery ajax?

$(document).ready(function(){
$("#S1").change(function()
{
var IDCat=this.value;
$.ajax({
type: "GET",
url: 'product_modify.php',
data: {IDCat:IDCat},
success: function(data)
{
$("#p1").text(data);
$("#tempForm").load('tv_form.php');
}
});
});
});
It is my code , in load() function when I call 'tv_form.html' file it works, but when i call 'tv_form.php' it doesn't work , error is 403 forbidden
where is the problem ? .html works, but .php doesn't work.
Add URL instead of file name.
$(document).ready(function(){
$("#S1").change(function()
{
var IDCat=this.value;
$.ajax({
type: "GET",
url: 'product_modify.php',
data: {IDCat:IDCat},
success: function(data)
{
$("#p1").text(data);
$("#tempForm").load('URL to tv_form.php'); // www.example.com/file.php
}
});
});
});

Categories