We Keep Coding

how to use ajax for auto refresh my page in laravel 7 framework

i use this code in content.blade.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#load_content').load('/like').fadeIn("slow");
}, 10000);
</script>
<div id="load_content"></div>
in my routes, web.php i put this code
Route::get('/like', function(){
return view('likes');
});
and this is likes.blade.php
#if (Route::has('login'))
<?php
$id = auth()->user()->id;
$like = Like::find($id);
if ($like == null)
{
?>
<button type="button" class="btn btn-default btn-sm"><i class="far fa-thumbs-up"></i> Like</button>
<?php }
else { ?>
<button type="button" class="btn btn-default btn-sm"><i class="far fa-thumbs-down"></i> Dislike</button>
<?php } ?>
#endif
but when i run this code with artisan serve nothing has changed in my page. i dont know how to use ajax in my code, where is the load page should i put in my ajax script?

This is how a good ajax call could look like for you.
$.ajax({
url: '/like',
type: 'get',
success:function(data){
//your desired code here
$('#load_content').fadeIn("slow");
}
})

You should use axios or ajax to request data from /like url and setTimeInterval to run on every defined time and load updated content

Get id of the element on click event and make an ajax call with id as parameter

i have my code is
<a class="btn btn-outline-primary" id="1" href="<?php echo site_url(); ?>/InchatroomController/LikeMessage/1" style=""> </a>
<a class="btn btn-outline-primary" id="2" href="<?php echo site_url(); ?>/InchatroomController/LikeMessage/2" style=""> </a>
<a class="btn btn-outline-primary" id="3" href="<?php echo site_url(); ?>/InchatroomController/LikeMessage/3" style=""> </a>
<a class="btn btn-outline-primary" id="4" href="<?php echo site_url(); ?>/InchatroomController/LikeMessage/4" style=""> </a>
I need to get id of the tag on click event and make an ajax call which sends the id as parameter to the controller

$(document).ready(function() {
$("a").click(function(event) {
// Fetch the id of the element clicked
var elemId = event.target.id;
// Sending ajax call to server with id of the clicked element
$.ajax({
url: 'yourControllerUrl',
type: 'POST',
data: jQuery.param({ id: elemId}) ,
contentType: "application/json; charset=utf-8",
success: function (response) {
// success javascript code
},
error: function () {
// failure javascript code
}
});
});
});

How to get the ID of a dynamically generated button using jQuery?

I need some help. I have a page where I display database records as a bootstrap button pill in a display div. I also have an Ajax Submit input that saves new records to the database and dynamically creates a button pill for the new record using the db record id for the button id. The jQuery below allows me to click on the new dynamically created button but it always displays ID = 1 and not the ID shown in view source.
Can someone please explain what I am doing wrong here?
Code of Button Pills created from PHP:
<div class="row">
<div class="col-md-8 col-sm-10 mx-auto mb-3">
<div class="decision-box">
<div class="decision-icon bg-orange-grad"><img src="../assets/img/logos/Sparck-Logo-Icon-Lg-White.png" alt="Sparck-Logo-Icon-Lg" width="40" height="40" /></div>
<div class="decision-text">
<form id="accolorform">
<input type="hidden" name="action" value="colorsave">
<input type="hidden" name="interesttype" value="Favorite Color">
<input type="hidden" name="userid" value="<?php echo $_SESSION['userid']; ?>">
Favorite Color:
<input type="text" class="form-control-inline col-auto no-border no-shadow" id="ac_color" name="interest" placeholder="Type something" autocomplete="off" style="min-width: 200px;">
<span class="float-right" style="margin-right: 15px;">
<button type="submit" class="btn btn-light" id="colorbtn">Add</button>
</span>
</form>
</div>
</div>
<div id="color_pills">
<?php if(!empty($resultlist) && isset($resultlist)){
foreach($resultlist as $r){
if($r['interesttype'] = "Favorite Color"){ ?>
<button id="btn<?php echo $r['id']; ?>" class="btnpill" title="Are you sure you want to delete <?php echo $r['interest']; ?>?"><?php echo $r['interest']; ?> <i id="<?php echo $r['id']; ?>" class="fal fa-minus-circle delete"></i></button>
<?php }
}
}?>
</div>
</div>
</div>
Code of jQuery aJax that creates dynamic button
$("#accolorform").validate({
rules: {
ac_color: {
required: true
}
},
messages: {
ac_color: {
required: 'Please select a Color'
}
},
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: $(form).serialize(),
success: function(id){
//alert("Color Added");
var name = $("#ac_color").val();
var newpill = '<button id="btn'+id+'" class="btnpill" title="Are you sure you want to delete '+name+'?">'+name+' <i id="'+id+'" class="fal fa-minus-circle delete"></i></button>';
$("#color_pills").append(newpill);
$("#accolorform")[0].reset();
},
error: function(){
alert("Error");
}
});
}
});
Code of Ajax Delete where I am trying to grab dynamic button id:
$(document).on('click', '.delete', function(){
var id = $(this).attr('id');
var title = $('#btn'+id).attr('title');
var string = 'source=interests&id='+ id ;
if (confirm(title)) {
$.ajax({
type: "POST",
url: "ajaxdelete.php",
data: string,
cache: false,
success: function(){
$('#btn'+id).remove();
}
});
}
return false;
});
The above code looks like it should work and view source shows a button tag that is formatted like the ones created by PHP that work perfectly.
I appreciate any help!

delete record from database without refreshing

I have an code where it is supposed to delete the data without refreshing. the delete process works but i have to refresh to to remove the data.
heres my code please help me
Ajax:
$(function () {
$(".trash").click(function () {
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
if (confirm("Sure you want to delete this post? This cannot be undone later.")) {
$.ajax({
type: "POST",
url: "delete.php", //URL to the delete php script
data: info,
success: function () {}
});
$(this).parents(".record").animate("fast").animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
Here's my html:
<td style="padding-left: 23px">
<img class="photo" data-toggle="modal" data-target="#gallery<?php echo $photo; ?>" src="<?php echo $r1['photo']; ?>" />
<div class="hotel">
<button class="trash" id="<?php echo $r1['photo_id']; ?>" > <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</div>
</td>
If I hover the button to the image the .trash button will appear and if I click it the image must be deleted. help me please.

You can give a data image id attr to parent tr,
<tr data-image-id="<?php echo $r1['photo_id']; ?>">
After successful delete process (in your ajax success function) you can run code below.
$("tr[data-image-id="+del_id+"]").remove();

Your code works, maybe do you need show the complete html, or at least the classes ".record" to analyze the "error"

No need to add extra attribute for ID in table row(TR).
$('.glyphicon-remove').on('click',function() {
$(this).closest( 'tr').remove();
return false;
});

Try This:
function delete_value(id)
{
if(confirm('Are you sure you want to delete this?'))
{
// ajax delete data from database
$.ajax({
url : "<?php echo site_url('yoururl/del')?>/"+id,
type: "POST",
success: function(data)
{
$("tr[id="+id+"]").remove();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});
}
}
<button class="btn btn-danger" onclick="delete_value(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
<!--- add tr id --->
<tr id="<?php echo $row->id; ?>">

How to response specific submit button using jQuery/Ajax?

I have a web page where 4 submit button exist. These 4 submit button is calling same php page process.php using jQuery/Ajax. I am calling this php page using onClick event. Like following :
<div class="col-md-12">
<input type="hidden" name="_token" value="<?php echo $create_menu_token; ?>">
<a onclick="menu_creation(this,event);" href="#menudetails" data-toggle="tab" class="btn btn-booking next">NEXT STEP</a>
</div>
<div class="col-md-12">
<input type="hidden" name="_token" value="<?php echo $create_menu_token; ?>">
<a class="btn btn-booking btn-save-color back">BACK</a>
<a onclick="menu_creation(this,event);" href="#uploadimage" data-toggle="tab" class="btn btn-booking next">NEXT STEP</a>
</div>
<div class="col-md-12">
<input type="hidden" name="_token" value="<?php echo $create_menu_token; ?>">
<a class="btn btn-booking btn-save-color back">BACK</a>
<a onclick="menu_creation(this,event);" href="#date" data-toggle="tab" class="btn btn-booking next">NEXT STEP</a>
</div>
<div class="col-md-12">
<input type="hidden" name="_token" value="<?php echo "?key=".$create_menu_token; ?>">
<input type="hidden" name="chef_id" value="<?php echo $chef_id; ?>">
<a class="btn btn-booking btn-save-color back">BACK</a>
PREVIEW MENU
<input type="submit" name="submit" value="FINISH" onclick="menu_creation(this, event);" class="btn btn-booking">
</div>
I want to show a different message when user click on Finish button (last one). From php page, How can I know If user press this Finish button ?
JS Code :
function menu_creation (element,event){
e= $(element);
event.preventDefault();
var formData = new FormData(e.parents('form')[0]);
$.ajax({
url: <?php echo "'menu-creation?key=$create_menu_token'"; ?>,
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
beforeSend: function () {
$("#form-bottom").attr("disabled", true);
},
success: function (data) {
$('.menu-validation-message').html(data);
//$('.menu-validation-message').show().delay(3000).hide('slow');
},
data: formData,
cache: false,
contentType: false,
processData: false
});
}
Update :
In php page now I am using following code to check if user press the FINISH BUTTON or not .
if(isset($_POST['submit']) && $_POST['submit'] == 'FINISH') {
echo 'Hello Finish';
} else {
echo 'Not detecting';
}
But not detecting...

Use this example as a reference....
$( "#target" ).click(function() {
alert( "Handler for .click() called." ); //do your code here
});
AND one thing don't forget to add id having "target" on that button

You can use Jquery to solve this
First you need to specified id or class to your finish button
In this case, I will use id
<input id="finish_button" type="submit" name="submit" value="FINISH" class="btn btn-bookingt">
function menu_creation (element,event){
e= $(element);
event.preventDefault();
var formData = new FormData(e.parents('form')[0]);
$.ajax({
url: <?php echo "'menu-creation?key=$create_menu_token'"; ?>,
type: 'POST',
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
return myXhr;
},
beforeSend: function () {
$("#form-bottom").attr("disabled", true);
},
success: function (data) {
$('.menu-validation-message').html(data);
//$('.menu-validation-message').show().delay(3000).hide('slow');
},
data: formData,
cache: false,
contentType: false,
processData: false
});
}
$("input#finish_button").click(function(e){
alert("HELLO FINISH");
menu_creation(this, e);
});