What is the best way to incorporate a search function into a modal pop-up?

When triggering the pop-up browse form, this is what I see: form modal

This is the result after entering search input: result

Please assist in resolving this issue. Thank you.

Controller

In this form, I am using a partial view to call the modal form:

            ViewData["CurrentFilter"] = SearchString;
            var Items = new List<ExpandoObject>();
            this.iFA = FA;
            this.nSP = SP;
            this.iFA2 = FA2;
            this.isItems = isItem;
            this.nSearch2 = SearchString;
            dtBrowse = new DataTable();
            if (iFA2==0)
            {
                dtBrowse = RefreshData(true);
            }
            else
            {
                dtBrowse = RefreshData(false, iFA2, TxtCategory,SearchString);
            }
            int i = 0;
       
            nSP = SP;
            ViewBag.iFA2 = FA2;
            ViewBag.Category = AddItemToComboBox(dtBrowse);
            isItems = isItem;
            nSearch2 = SearchString;
            return PartialView("_BrowsePartial",dtBrowse);

View

@using System.Reflection
@using System.Data
@model DataTable

<form asp-action="BrowseTrans" method="get">
    <div class="modal modal-blur fade" id="modal-team" tabindex="-1" role="document" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Browse</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3 align-items-end">
                        <div class="col col-4 input-icon">
                            <input type="text" value="@ViewData["CurrentFilter"]" class="form-control" name="SearchString" placeholder="Search…">
                            <span class="input-icon-addon">
                                <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                            </span>
                        </div>
                        <div class="col col-2">
                            <label class="form-label">By Category</label>
                        </div>
                        <div class="col form-group">
                            <select id="ddlCurr" asp-items="@(new SelectList(ViewBag.Category, "Category", "Category"))" name="TxtCategory" class="form-control"gt;
                            </select>
                            <span class="text-danger"></span>
                        </div>

                    </div>
                    <div class="row mb-3 align-items-end">
                        <div class="table-responsive" role="grid">
                            <table class="table table-vcenter card-table" style="table-layout: auto; display: block; height: 350px;">
                                <thead>
                                    <tr>
                                    </tr>
                                    <tr>
                                        @for (int c = 0; c < Model.Columns.Count; c++)
                                        {
                                            <th class="w-1">@Model.Columns[c].Caption</th>
                                        }

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (DataRow dr1 in Model.Rows)
                                    {
                                        <tr>
                                            @for (int c = 0; c < Model.Columns.Count; c++)
                                            {
                                                if (c == 0)
                                                {
                                                    <td>
                                                        <div class="d-flex py-2 align-items-sm-baseline">
                                                            <div class="flex-fill">
                                                                <div><a href="#" class="text-reset" style="font-size: 12px;">@dr1[c].ToString()</a></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                }
                                                else
                                                {
                                                    <td>
                                                        <div class="d-flex py-2 align-items-sm-baseline">
                                                            <div class="flex-fill">
                                                                <div class="text-muted"><a class="text-reset" style="font-size: 10px;">@dr1[c].ToString()</agt;<>/div>
                                                            </div>
                                                        </div>
                                                    </td>

                                                }


                                            }
                                        </tr>

                                    }




                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
                </div>
            </div>
        </div>
    </div>
</form>

Javascript

This JavaScript function script is used when calling the modal form:

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })

    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {

        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
            location.reload();
        })
    })
})
javascriptbootstrap-4asp.net-core-mvcbootstrap-modal

Answer №1

To enhance your search functionality, consider removing the 

<form asp-action="BrowseTrans" method="get">
and adding an id to the search input field like this: 
<input type="text"  class="form-control" id="SearchString" name="SearchString" placeholder="Search…">
. Then, when the enter key is pressed, you can pass the search data via ajax to retrieve relevant information. After retrieving the data, replace the content inside the <tbody</tbody> tags with the new data obtained from the ajax success function. Here is the JavaScript code to handle this functionality:

var element = document.getElementById('SearchString');
element.addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
        search()
    }
});
function search() {
     $.ajax({
        type: "GET",
         url: 'BrowseTrans?SearchString=' + $("#SearchString").val() + "&&TxtCategory=" + $("#ddlCurr").val(),
         success: function (data) {
             // Process the data received from the server
             // Replace the HTML content within the <tbody> tag with the retrieved data
         },
         error: function (result) {
             alert("An error occurred");
         }
     });
}

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

Purge POST request cache in Node.js

Currently, I have implemented nodemailer to enable users to contact me via email. Once the form data is submitted successfully, the page redirects to my homepage as intended. However, if an attempt is made to refresh the page, a confirmation alert pops up ...

javascriptnode.jsexpressnodemailer

Converting coordinates of latitude and longitude into JSON format

I'm currently facing some challenges with organizing map waypoints, defined by latitude/longitude pairs, within a JSON array. This is the progress I've made so far. var llData = {}; var waypointData = {}; for (i = 0; i < routeArray.length; ...

javascriptjson

Leveraging conditions with the append method in jQuery

Below is the code block that I have been using successfully. However, I now need to apply some conditions to it. The condition involves adding each span element only if the value of item is not empty. create: function () { $(this).data('ui-autocompl ...

javascriptjquery

Updating state in reactjs following an ajax request

I am looking to modify my state whenever I receive errors from an ajax call. Here is my code: var EmailForm = React.createClass({ getInitialState: function(){ return { password:'', email: '', e ...

javascriptjqueryajaxreactjs

Utilize Flask to Incorporate Bootstrap

When attempting to import bootstrap from an archive, I encountered the following error: "GET /bootstrap.css HTTP/1.1" 404 However, using the following link tag works perfectly: <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

pythonhtmlflaskbootstrap-4frontend

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

javascripthtmlangularjs

Initiate monitoring for child component modifications

I'm looking to disable 'changeDetection' for the parent component while enabling it for the child component. Can you provide an example of how this can be achieved? The parent component contains static data, meaning change detection is not ...

javascriptangulartypescript

Choose a region on a scatter plot using JavaScript

My current challenge involves utilizing JavaScript to achieve the following tasks: Create a scatter plot consisting of approximately 10,000 data points Enable users to draw a curved shape on top of the plot in order to select a specific region (The desig ...

javascriptchartsplotselectionscatter-plot

JavaScript's menu button has a callback function assigned to it

The definition can be found below. var CMenu = cc.Sprite.extend({ onClickCallback: null, onClick: function (callback) { this.onClickCallback = callback; }, handleTouches: function (touch, evt) { (this.hovered && this.onClickCallback) &am ...

javascript

Exploring the functionality of Radar Chart within a React component

Within the index.html file that is being utilized, there exists a javascript code specifically designed for the chart function. <script src="js/plugins/chartJs/Chart.min.js"></script> var radarData = { labels: ["In Perso ...

javascriptreactjschartschart.js

req.login doesn't seem to be authenticating the user

My goal is to use Ajax to send a post request to the server without refreshing the page by using e.preventDefault. I want the server to check if the username or email is already taken, and if not, automatically log the user in and refresh the page. However ...

javascriptajaxnode.js

Exploring ways to transfer a function variable between files in React

Currently, I am working on a quiz application and have the final score stored in a function in app.js. My goal is to generate a bar graph visualization of the user's results (e.g. 6 right, 4 wrong) based on this score. To achieve this, I created anoth ...

javascripthtmlreactjschart.js

Showing a div with seamless elegance

XHTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>example</title> </head> <style > body{ background: black; } ...

javascripthtmlcss

Encountering a blank screen on the Swagger route in ExpressJs: How to troubleshoot

I have set up swagger-ui-express with swagger-jsdoc in my Express.js project following various tutorials and official documentation. However, despite implementing everything correctly, I am facing an issue where the Swagger URL displays a blank white scree ...

javascriptnode.jsexpressswagger

Retrieve information using AJAX via POST method

I find myself in a bit of a pickle at the moment. I've been researching for hours, and I still can't seem to figure out this seemingly basic issue. It would be greatly appreciated if someone could offer me some quick advice. So here's my dil ...

javascriptc#ajaxrest

Tips for updating input values in real-time?

I am working with dynamic inputs that allow me to add and delete rows with inputs. These inputs include Material-UI timepickers, which have an input field with a clock icon. When I click on the icon, a clock appears. However, the values in this input field ...

javascriptreactjsinputmaterial-uionchange

Click event triggered the function, however it was unable to modify the variable in $scope

<!doctype html> <html ng-app> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <script src="script.js"></script> </head> <body> <ul c ...

javascriptangularjs

What could be the reason for the React component not re-rendering even after its prop has been updated?

One of the challenges I'm facing with an application I'm currently working on is a re-render issue. To simplify, let's say we have two components - DisplayElement1 and DisplayElement2. In this scenario, DisplayElement2 iterates through a ba ...

javascriptreactjsreact-nativereact-hooks

Fancy Text CSS Animation

I'm in the process of developing a landing page for a client. Their logo is prominently centered with the company slogan displayed directly underneath. At present, the slogan elegantly fades into view upon loading the page. Recently, they expressed i ...

javascripthtmlcssanimationcentering

Issue with Angular 2: scrolling event not triggering

Just starting out with Angular 2 and I'm trying to implement infinite scrolling for fetching data using REST API calls. Initially, I make a call like this to get the first set of 50 records: localhost:8080/myapp/records=items&offset=0&limit=5 ...

javascriptangular