I am facing an issue where the URL generated in the Controller in Laravel is not functioning properly when

After escaping the single quote, I included a URL link inside the Controller and passed it through json_encode. However, when I clicked on the URL link, it did not work and showed this:

https://i.sstatic.net/3GIq1.png

The URL appeared like this:

http://localhost/BSProject/public/%7B%7B%20URL::to('schedule/24/edit')

Below is the Controller link:

  public function liveSearch(Request $request)
{

    if($request->ajax())
    {
        $output = '';
        $query = $request->get('query');
        if($query != '')
        {
            $data = DB::table('schedules')
                ->where('schedule_number', 'like', '%'.$query.'%')
                ->orWhere('route_name', 'like', '%'.$query.'%')
                ->orWhere('user_first', 'like', '%'.$query.'%')
                ->orWhere('id', 'like', '%'.$query.'%')
                ->get();

        }
        else
        {
            $data = DB::table('schedules')
                ->get();
        }
        $total_row = $data->count();
        if($total_row > 0)
        {
            foreach($data as $row)
            {
                $output .= '
                    <tr>
                        <td>'.$row->id.'</td>
                        <td>'.$row->schedule_number.'</td>
                        <td>'.$row->route_name.'</td>
                        <td>'.$row->user_first.'</td>
                        <td>'.$row->created_at.'</td>
                        <td> <a style="margin-left: 5em; " href="{{ URL::to(\'schedule/' .$row->id .'/edit\')">
                            <button style=" font-size: 1em; width: 4.5em; height: 2.5em;"  type="button" class="btn btn-success btn-sm">Edit
                            </button>
                        </a>
                    </tr>
                ';
            }
        }
        else
        {
            $output = '
                <p>
                    No Schedule Lists found
                </p>
            ';
        }

        echo json_encode($output);
    }

}

View

                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Schedule_number</th>
                            <th>Route</th>
                            <th>User</th>
                            <th>Created_at</th>
                            <th>edit</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

Javascript

    fetch_customer_data();
    function fetch_customer_data(query = '')
    {
        $.ajax({
            url:"{{ route('user.schedule.liveSearch') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(output)
            {
                console.log(output);
                $('tbody').html(output);
            }
        })
    }

    $(document).on('keyup', '#search', function(){
        var query = $(this).val();
        fetch_customer_data(query);
    });

Here is the edit link URL that was mentioned earlier: https://i.sstatic.net/DRK0T.png

Answer №1

An issue has been identified with the code in this section: (utilizing blade syntax and passing it directly to the client)

$output .= '
                <tr>
                    <td>'.$row->id.'</td>
                    <td>'.$row->schedule_number.'</td>
                    <td>'.$row->route_name.'</td>
                    <td>'.$row->user_first.'</td>
                    <td>'.$row->created_at.'</td>
                    <td> <a style="margin-left: 5em; " href="{{ URL::to(\'schedule/' .$row->id .'/edit\')">
                        <button style=" font-size: 1em; width: 4.5em; height: 2.5em;"  type="button" class="btn btn-success btn-sm">Edit
                        </button>
                    </a>
                </tr>
            ';

You can resolve it by making the following adjustments:

$output .= '
                <tr>
                    <td>'.$row->id.'</td>
                    <td>'.$row->schedule_number.'</td>
                    <td>'.$row->route_name.'</td>
                    <td>'.$row->user_first.'</td>
                    <td>'.$row->created_at.'</td>
                    <td> <a style="margin-left: 5em; " href="' . url('schedule/' .$row->id .'/edit') . '">
                        <button style=" font-size: 1em; width: 4.5em; height: 2.5em;"  type="button" class="btn btn-success btn-sm">Edit
                        </button>
                    </a>
                </tr>
            ';

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

Get back a variety of substitutions

I have a variety of different text strings that I need to swap out on the client side. For example, let's say I need to replace "Red Apple" with "Orange Orange" and "Sad Cat" with "Happy Dog". I've been working on enhancing this particular ques ...

Navigating the complexities of extracting and storing a data type from a collection of objects

Dealing with a messy API that returns inconsistent values is quite challenging. Instead of manually creating types for each entry, I am looking for a way to infer the types programmatically. One approach could be by analyzing an array like this: const arr ...

The CSS ::after selector is experiencing a decrease in animation speed

There is a dropdown menu set to fade in once a link is clicked. Everything works well, the menu fades in properly. However, when clicking off and triggering a function that fades out the dropdown, the triangle on top of the box fades out slightly slower th ...

Discover a method to receive an alert when the mouse exits the inner window along the y-axis

Is there a way to receive an alert if the mouse moves out of the inner window solely in the y-axis? Currently, alerts are triggered when the mouse moves out on both x-axis and y-axis. For example, if the mouse pointer hovers over the address bar coming fro ...

Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this? <div class="row"> <div class="span9"> ...

Is it possible to obtain the socket.id of a user immediately upon their connection?

Does anyone know how I can send a personalized message to a user when they connect, without broadcasting it to everyone else? I'd like to use their socket ID with the code io.to(theirSocketID).emit('chat message', 'Welcome');, but ...

`how to extract the href attribute value from the hyperlink that triggered a modal in jQuery UI`

Recently, I began diving into Jquery and javascript coding. As a beginner, it feels odd to refer to myself as a noob due to my age. Here's the scenario: I have a hyperlink that triggers a dialogue box and sets a cookie. The dialog asks the user, "Are ...

Instructions on adjusting the image size within a MUI Card

import { Card, CardActionArea, CardContent, CardMedia, Typography, } from "@mui/material"; import React from "react"; import { styled } from "@mui/material/styles"; const CardImage = styled("div")(({ theme ...

Looping through properties of objects with the help of angularJS ng-repeat is known as using objects['propertyname&#

What is the best way to iterate over an object with property names like this? $scope.myobjects = [ { 'property1': { id: 0, name: 'someone' } }, { 'property2': { id: 1, name: ' ...

Can you explain the functionality of the return false statement within the validate plugin's submitHandler

While exploring the validator plugin examples, I stumbled upon a code snippet online: $('#testimonials-form').validate({ rules: { "t-title": { required: true, minlength: 5 }, "t-text": { ...

Angular4 and jQuery working together for effective navigation and pagination

Trying to implement pagination in angular 4 and jQuery, but encountering an issue where clicking on the next button causes it to skip through multiple pages at once (2, then 3, then 5)... Component code: addClass(x) { $(".page-item").click(function () ...

Issues with calculating SUM in MySQL within a Node.js Express application using EJS template

I am currently working on developing a dashboard for my Node.js project. The aim is to calculate the sum of certain values for an overview. While the SELECT statement works fine in my MySQL database, when I incorporate it into my Node project, I do not rec ...

Empty Data Table Search After Refresh While Filter Remains Active

After testing the data tables library using their example code in a jsfiddle, it seems like there might be a bug. To recreate the issue, follow these steps: Open the JS Fiddle link https://jsfiddle.net/t4rphnuc/ Click "Run" In any footer search box, fil ...

Placing a Fresh Item into a Designated Slot within an Array

Imagine having a MongoDB collection that consists of an array of objects being retrieved from an Angular Resource. [{_id: "565ee3582b8981f015494cef", button: "", reference: "", text: "", title: "", …}, {_id: "565ee3582b8981f015494cf0", button: "", ref ...

Error: Undefined variable in JavaScript obfuscation

My website has several small JavaScript files that I currently merge into one file and then minimize using terser. The website functions perfectly with the minimized version. Now, I want to take it a step further and obfuscate the code using JavaScript-Ob ...

Contrasting loading data from an empty state and having no items present

On my web page, I pull items from an API and display them. The API request is made in the created hook. I need to display a [loading] message while waiting for the API response, and a [no items] message if the loading is complete but there are no items ava ...

Changing innerHTML in CoffeeScript

Are there other options instead of using the 'innerHTML' property in CoffeeScript? In JavaScript, you typically write something like this: document.getElementById('element').innerHTML = "blah_blah" Is there a different approach to ac ...

Leveraging Google Cloud Functions with Next.js (Client-Side Rendering)

Having trouble incorporating firebase cloud functions into my Next.js project, encountering an unfamiliar error. firebase-config.js const firebaseConfig = { apiKey: '~~~', authDomain: '~~', projectId: '~~~', storageBu ...

Tips on initiating a $http.get request every second using a service

I am working on an angular application that includes a $http.get request. While it currently functions properly, I need it to be executed every second in order to retrieve new data. Service: angular.module('adf.widget.liveCharts') .service(&a ...

The Node.js error message reads: "Cannot set headers after they have been sent" while trying to make a post request

Yes, I understand this issue has been addressed multiple times on stackoverflow, but unfortunately, I haven't found a solution that works for me. The problem arises when trying to make a post request on my nodejs server. The error message states &apo ...