When using Jquery, the search button consistently retrieves the same data upon the initial click event

How can I ensure that my Ajax call retrieves data from the remote database based on the updated search criteria every time I click the search button? Currently, the system retrieves results based on the initial search criteria even after I modify it and click the search button again.

Any suggestions or solutions would be greatly appreciated. Thank you!

$('#openDialog').dialog({height:400, width:545, autoOpen:false});
$('#objectTypeSelected').selectable();
$('#searchBtnObjects').click(function (evt) {
searchBtnObjectsClick();
});

function searchBtnObjects() {

    var types = [];
    var begin = $("#minDate").val();
    var end = $("#maxDate").val();

    var selectedTypes = $(".ui-selected");
    var typeString ="";
    for (var i = 0; i < selectedTypes.length; i++) {
        types[i] = $(".ui-selected")[i].id;
        typeString=typeString+$(".ui-selected")[i].id+",";
    }
    if (objectsTable != null) {
        var postData = {
            ajaxRequest:document.helper.getPageName(),
            directAjaxMode:true,
            types:typeString,
            begin:begin,
            end:end}
        objectsTable.jqGrid("setGridParam", {postData:postData});
        objectsTable.trigger('reloadGrid');
    }
    else{
        objectsTable = $('#objectList').jqGrid({
                datatype:'json',
                colModel:[
                    {name:"ID", label:messageDictionary["ID"], editable:false, formatter:cc_formatter, unformat:cc_unformatter, index:"ID"},
                    {name:"DATE", label:messageDictionary["DATE"], editable:false, formatter:'date', formatoptions:{srcformat:'d/m/Y H:i:s', newformat:'d/m/Y H:i:s'}, index:"DATE"}
                ],
                mtype:'POST',
                multiselect:true,
                pager:'#objectsPager',
                postData:{
                    ajaxRequest:document.helper.getPageName(),
                    directAjaxMode:true,
                    types:typeString,
                    begin:begin,
                    end:en},
                url:'search/getObjects',
                jsonReader:{ repeatitems:false, cell:"", id:"id", userdata:"jsonModel", root:"rows" },
                ignoreCase:true,
                height:80,
                autowidth: true,
                shrinkToFit:true,
                sortname:'ID',
                sortorder:"asc",
                loadonce:true,
                rowNum:30,
                rowList:[30, 50, 100],
                rownumbers:true,
                viewrecords:true
            }
        );
}
}

Answer №1

Your issue lies within the parameter in your jqGrid settings

loadonce: true

This specific setting automatically changes the datatype to local after the initial creation of the grid.

If you wish to continue sending requests to the server, you must either remove this setting or set it to false.

loadonce : false;

For more information on jqGrid parameters, please refer to our latest documentation here

Answer №2

It is important to clear the fields immediately after receiving search results as shown below.

$("form").trigger("reset");

For more information, you can refer to this discussion on clearing form inputs after submission: clearing-my-form-inputs-after-submission

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

Sending a key/value object through an AJAX POST request to an MVC 5 Controller action method results in a null value

After spending several hours searching, I finally found it. I have an object filled with key/value pairs of questionIDs and answers. This is how the onCmplete method in survey.js generates questions/answers after the survey is finished. The object that nee ...

Achieving enlightenment with Satori in NextJS: Transforming SVG to PNG in a NodeJS Environment

I am currently exploring the capabilities of satori and integrating it into my next.js api routes. (I'm unable to utilize the vercel/og package). While I have successfully set everything up, I'm facing a challenge in converting the svg image gen ...

JavaScript dropdown menu that dynamically changes colors

<!DOCTYPE html> <html> <head> </head> <body> <script> var redtoggle=false; function togglered() { redtoggle = !redtoggle; if (redtoggle) { document.getElementById("txtInput").style.color = "red"; } else { do ...

Exploring JavaScript-based navigation with Python and Selenium

Here is the URL of the page in question: link. I am trying to navigate pagination with the following HTML markup: <li class="btn-next"> <a href="javascript:ctrl.set_pageReload(2)">Next</a></li> I have written a ...

The submission of FormData to the PHP server is causing an issue

I am having an issue with sending the formData to my PHP script using AJAX. Despite inspecting the elements, I can't find any errors in the process. Below is the structure of my form: The input values are sent to a JS file onclick event. <form c ...

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

access the ckeditor within the frame

I have a CKEditor in a frame and am experiencing an issue. When I try to console log from the browser, it won't work until I inspect near the frame and perform the console log again. [This is the CKEditor] https://i.stack.imgur.com/fWGzj.png The q ...

(Enhancing Angular) Capture HttpResponse errors and seamlessly proceed with the Observable

There's a dropdown text box with type-ahead search functionality. Valid item names prompt the expected list of items in the drop-down menu, while invalid entries trigger a 400 error response from the API. This error is caught by the HttpErrorIntercept ...

Is it necessary to interact with HTML elements if the view is being generated using JavaScript?

I have a Rails application that is now integrated with react, where my views are rendered using react and JSX. I've noticed that there are some format.html responses in my code from when my views were ERB views. Now that they are not, I'm wonderi ...

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

Issue with searching in datatables functionality is not working

My datatable is not dynamically updating from the PHP script. The search functionality is not working with datatables when using sAjaxSource data. Can someone please provide a JSFiddle example without using sAjaxSource for search data? Additionally, pagina ...

Adding 7 days to a JavaScript date

Can you spot the bug in this script? I noticed that when I set my clock to 29/04/2011, it displays 36/4/2011 in the week input field! The correct date should actually be 6/5/2011 var d = new Date(); var curr_date = d.getDate(); var tomo_date = d.getDate( ...

Avoid making GET requests when clicking on a link

[UPDATE] I need help troubleshooting an issue with my ajax request. Here is the code snippet that I am working on: <a href="" class="undo_feedback">Undo</a> When I click on the link, it triggers an ajax POST request, but I encounter an error ...

Executing a single Function within the UseEffect Hook

Can anyone assist me with solving this code puzzle? I have a carousel element that includes icons for moving to the previous and next slides. Whenever these icons are clicked, a specific function needs to be triggered within the useEffect() hook. The spec ...

Tips for changing the size and color of SVG images in a NextJS application

Looking to customize the color and size of an svg image named "headset.svg". Prior to this, I used next/image: <Image src={'/headset.svg'} alt='logo' width={30} height={30} className='object-contain' /> The s ...

Retrieving data from a child component that has been added in React

One of the challenges I am facing is dealing with a main react component that dynamically appends child components, like <Child />, on button click The structure of my Child component looks something like this: <form> <input .... /> ...

Invoke Selenium using JavaScript

Imagine I have this (fictional) JavaScript snippet: asynchronousOperation.addEventListener("completed", function (event) { if (event.property == "required value") tell Selenium we are good; else tell Selenium the test failed; }); ...

Instructions for obtaining and assigning a reference to a recently cached associated object within the Apollo client InMemoryCache

My data consists of a set of interconnected items like this: book { id ... related_entity { id ... } } Once Apollo caches it, there are two separate cache objects. The related_entity field on book points to an EntityNode object. Everything ...

Experiencing a hiccup in your jQuery animation?

Click here to access the fiddle demonstrating the issue. A situation arises where a span with display: inline-block houses another span that is being slowly hidden. The container span unexpectedly shifts back to its original position once the hiding proces ...

What content appears post-iframe?

After researching for a while, I've only come across information about text displayed after a broken iframe on this topic. However, what I actually want to do is display text below an iframe set at 90% height, like so: https://i.sstatic.net/KHXI3.png ...