tutorial on updating database status with ajax in Laravel

Currently, I am using Laravel in my project and I need to modify the patient's status when they schedule an appointment with a doctor. The patient can have one of three statuses: Accept, Waiting (automatically assigned when the patient selects a date and time), or Not Accept. However, I am encountering an issue where clicking on the active button does not result in any changes in the database.

This is the controller responsible for changing the status:

public function changeStatus(Request $request)
{
    $user = rdv::find($request->IDP);
    $user->Etat_de_rdv = $request->status;
    $user->save();

    return response()->json(['success'=>'Status changed successfully.']);
}

This is the controller used when a patient schedules an appointment:

public function rdv(Request $request) {

        // Variables: input values
          $date=$request->input('time');
          $time=$request->input('date');
          $doctor=$request->input('goID');
        // Array to compare inputs to existing values in the database
          $att = [
            'IDD' => $doctor,
            'time' => $time,
            'date' => $date
                ];

            $data=rendezvous::where($att)->first();
        // Required inputs 
        $this->validate($request, [
            'np' => 'required', 
            'tel' => 'required',
            'date' => 'required',
            'time' => 'required',
        ]);
        // Adding to rendezvous
        $rdv = new rendezvous() ;
        $patient_id=$request->session()->get('patient_id');
        $rdv->Nom_et_prénom=$request->input('np');
        $rdv->Numéro_de_téléphone=$request->input('tel');
        $rdv->IDD=$request->input('goID');
        $rdv->date=$request->input('time');
        $rdv->time=$request->input('date');
        $rdv->IDP=$patient_id;

        // Checking if data already exists
           if ($data!==null) {
              return redirect()->back()->withErrors('Time and date are occupied, please choose another!' ) ;
           }

        $rdv-> save();
        return redirect("/rendezvous_$doctor")->withSuccess('Appointment saved, please check the status of your appointment!') ; 

    }

This is the view that the doctor sees with all appointments:

<h3> Your patients :</h3>
 @foreach($pat as $lo)
@if ($lo->IDD== $med->ID)
<div class="admin">
<div class="info">
<h3> {{ $lo->Nom_et_prénom  }} </h3>
<p>{{ $lo->Numéro_de_téléphone }}</p>
<p>{{ $lo->date}}</p>
<p>{{ $lo->time }}</p>
 <input data-id="{{$lo->IPD}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Accept" data-off="Busy Time" {{ $lo->Etat_de_rdv ? 'checked' : '' }}>
</div>
 </div>
 @endif
 @endforeach  

This is the Ajax script:

   <script>
      $(function() {
        $('.toggle-class').change(function() {
            var Etat_de_rdv = $(this).prop('checked') == true ? Accept : Busy Time; 
            var id = $(this).data('IPD'); 
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/changeStatus',
                data: {'Etat_de_rdv': 'status', 'IDP': id},
                success: function(data){
                  console.log(data.success)
                }
            });
        })
      })
    </script>

Answer №1

Make sure you are passing the correct parameter inside your ajax request. Instead of using 'Etat_de_rdv', consider using 'status' which holds the value you need. Take a look at the example below:

        var Etat_de_rdv = $(this).prop('checked') == true ? Accepter : Temps charger; 
        var id = $(this).data('IDP'); 
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/changeStatus',
            data: {
                'status': 'your_value', //Use this instead
                'IDP': id
            },
            success: function(data){
              console.log(data.success)
            }
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the JavaScript graph with new data from the AJAX request

Seeking assistance in updating my javascript chart data using ajax data retrieved from a database. The specific chart being referenced is an apex chart. After submitting a form via ajax, the returned result is as follows: type: "POST",crossDomain ...

Creating a custom PHP webpage and integrating it with a WordPress theme

I'm looking to develop a unique php and javascript page that is integrated with my existing Wordpress theme. Can anyone provide guidance on how to achieve this? Appreciate the help! ...

"Encountering a 500 internal server error while working with

Currently, I have set up an ajax functionality with two different contents retrieved from separate files. Files: my_site_id_one.php: <div class="id_one_content"> <?php echo do_shortcode('[shortcode_one]'); ?> </div> my_ ...

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

Error encountered when attempting to insert data into a PostgreSQL database using Node.js and Sequelize

I'm currently using the node sequelize library to handle data insertion in a postgress database. Below is the user model defined in the Users.ts file: export class User extends Sequelize.Model { public id!: number; public name: string; public ...

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

My current solution involves the following code: @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { html{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(- ...

Mastering the onKeyPress event for Material UI text fields: A step-by-step guide

I have a TextField component from Material UI as shown below: <TextField id="todo-textarea" label="Enter new todo" placeholder="ToDo" onChange={this.props.toDoOnChange} onKeyPress={(ev) => { ...

the process of altering properties in vue js

After running my Vue file, I encountered the following console error. As someone new to Vue programming, I'm attempting to utilize a Syncfusion UI component to display a grid. Prop being mutated: "hierarchyPrintMode" I am unsure where to add the comp ...

What is the process of adding CSS effects to a button when a keypress activates it?

Do you have a CSS style that transforms the look of a button when clicked on-page? Want to extend this effect to when the button is activated via keyboard? (In essence, browsers allow activating a button by pressing Tab to give it focus and then hitting S ...

The reset function for the selector is failing to properly reset the data within the table

I need help with a selector that has multiple options and a reset button. When the reset button is clicked, it should reset the selector back to the first option. Although the selector resets as expected when the button is clicked, the data in the table r ...

Sliding carousel from right to left

I'm currently working on setting up a slick carousel to continuously scroll, but I need it to move in the opposite direction. Despite trying to add the RTL option, I couldn't get it to work as intended. Check out my Fiddle here (currently scroll ...

What is the syntax for implementing the 'slice' function in React?

While working on my React app, I encountered an issue when trying to extract the first 5 characters from a string using slice. The error message displayed was: TypeError: Cannot read property 'slice' of undefined I am utilizing a functional compo ...

JQuery Slider's Hidden Feature: Functioning Perfectly Despite Being Invisible

Having an issue with a jQuery slider on my local HTML page. The sliders are not showing up as intended. I want it to display like this example: http://jsfiddle.net/RwfFH/143/ HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery ...

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

Issue with Flask-Cors in Nuxt with Flask and JWT authentication implementation

I have exhausted all the available solutions to my issue, but I still can't seem to pinpoint the problem. Despite trying every solution out there, nothing seems to be of any help. Every time I make a request, the browser blocks it due to CORS Policy ...

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

I have been working on a dynamic website that loads Firebase values into a table. However, I encountered an issue where the data does not appear when going back to the orders page after visiting another page. After some testing, I found that placing a but ...

ng-repeat not functioning properly with FileReader

Here is a look at how my view appears: <body ng-controller="AdminCtrl"> <img ng-repeat="pic in pics" ng-src="{{pic}}" /> <form ng-submit="postPic()"> <input id="photos" type="file" accept="image/*" multiple/> <button> ...

initiate scanning for HTTP GET calls

My current project involves using electron to create an application that serves multiple image files through a webserver using express. Another app built for Android is responsible for retrieving and posting files to this server. While I have successfully ...

Problem occurred while processing base64 encoded image via AJAX request due to failure in opening the stream

Managing a blog that showcases various images can be challenging, especially when it comes to optimizing server requests. One method I employ is encoding each image to base64 using a simple PHP function. Incorporating an infinite scroll feature on my blog ...

Improve the Popup to seamlessly elevate

In my project, I have implemented a pop-up dialog box that rises up from the left bottom corner as the user scrolls down the page. You can view it live at this link- However, I am facing an issue where the initial lift up of the dialog box is not smooth, ...