Is it possible to generate a PagedListPager without the need to invoke a function?

Managing a list with ajax calls has been fairly smooth on the initial load. The search button triggers an ajax call that loads the first page of results without issues. However, an obstacle arises when trying to implement PagedListPager which ends up resetting the page and causing the results to vanish.

To overcome this challenge, I am thinking of creating the PagedListPager as simple buttons without any predefined actions, and then handling the button clicks using Javascript. Is there anyone who knows how to approach this in a better way?

javascriptc#ajaxmodel-view-controller

Answer №1

I was struggling to find a solution using the PagedListPager, so I decided to recreate the unordered list in the view with a blank link:

<a href="">/</a>

This allowed me to maintain the styles used for other PagedLists on the site. Then, I overrode the li click event in JavaScript like this:

 $(document).on("click", "li", function (event)

Now I can make ajax calls from each li without the page refreshing constantly. Hopefully, this technique will be helpful to others!

A more elegant approach would be to create the list with an id:

<ul id="pagingbuttons" class="pagination">

Additionally, give ids to the li elements within the list. To override the click event specifically for that list in JavaScript:

 $(document).on('click', '#pagingbuttons', function(event)

By doing this, you can easily access the id value of any button clicked by using:

event.target.text

This prevents other li elements on the same page from triggering ajax calls unintentionally.

Answer №2

If you're in need of a solution for reloading and pagination, look no further than this tailored javascript library I created: https://github.com/pjbonestroo/PagedList

This library tackles common issues related to reloading and pagination, offering full customization options. It even comes with detailed documentation to guide you through.

With automatic AJAX calls to your controller function or the option to manipulate data on the client-side, it provides flexibility in implementation.

Additionally, it boasts various handy features including:

  • Flexible filtering and sorting capabilities (client- or server-side)
  • Debouncing functionality to prevent excessive refreshes
  • Customizable buttons and styles based on row data
  • Effortlessly attach or remove event-listeners to rows and access relevant row data upon triggering

For your specific query, pay close attention to the customizable buttons feature which allows you to efficiently manage button clicks using JavaScript.

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

What is the significance of utilizing app.set() and app.get() in applications?

Is there a way to simplify this code: app.set('port', (process.env.PORT || 3000)); const server = app.listen(app.get('port'), () => { console.log('Server|Port: ', app.get('port')); }); Here is an alternative ...

javascriptexpress

What causes the consistency in output when various encodings are applied in Node.js with fs.readFileSync()?

I've been puzzled by why using the readFileSync method with different encodings (such as utf-8, hex, ascii) always gives me the same output on the console. It's also strange that when I don't specify any encoding, I still get the output in u ...

javascriptnode.jsencodingsolidityfs

I need to locate Roman Numerals within a string and convert them to uppercase using C#

I am working with an XML file that contains several instances of roman numerals. My goal is to convert these roman numerals to uppercase. While I have successfully identified the numerals using Regex, I am unsure how to replace each one with its uppercase ...

c#.netregex

How can you identify the resume of a web application once you return from opening the camera?

I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...

javascripthtmlcamera

JavaScript Flash player for iPad

As many of us know, the iPad does not support Flash. However, I am curious if the iPad sends any specific error messages that can be captured using Javascript. I realize one method is to detect the iPad from the user agent string, but I am interested in w ...

javascriptiphoneipadmobile-safari

Show a distinct row from an API using React

I am attempting to create a map function to display all the items from the API Screenshot of code showing the items Here is the console log displaying the fetched items from the API I encountered an error with the map function not working. Any solutions ...

javascriptreactjsjsonapiarraylist

Every time I refresh the page, my table is getting filled with blank rows

I created a simple example featuring a form and some PHP/JavaScript code. The JavaScript is used for form validation, while the PHP is utilized to update a MySQL table. function checkForm(){ var x = document.forms['form1']['first'] ...

javascriptphpmysqlformsvalidation

Unable to access the website's source code

It's frustrating when I can't view the source code of certain websites, such as this one: . When I try to right-click and select "View Source", only a portion of the code is displayed, which isn't the proper source code for the page. Alth ...

javascripthtmlcssinspect

Utilizing Jquery to extract a specific string from a URL and fetch a remote element

Recently delving into Jquery, I'm in search of a code snippet that can capture the current page URL and load a remote element if it contains a specific string. For instance: Consider these sample page URLs: "http://......./Country/AU/result-search- ...

javascriptjqueryload

Getting Started with NPM Package Initialization in Vue

I'm attempting to incorporate the v-mask package into my Vue project using npm. Following the documentation, I executed npm install v-mask, but I am unsure where exactly to initialize the code. I tried placing it in the main.js file: import { createAp ...

javascriptnode.jsvue.jsnpmnpm-package

Comparing front end automation between JavaScript and Java or Ruby

Could you provide some insights on why utilizing a JS framework like webdriverio is preferred for front end automation over using Selenium with popular languages like Java or Ruby? I understand that webdriverio and JS employ an asynchronous approach to fr ...

javascriptselenium-webdriverautomationwebdriver-io

Leveraging information beyond the socket.on function

I'm trying to work with socket data in a way that allows me to compare it outside of the initial socket.on function. I've attempted using global variables without success. One thought I had was grouping the data, but one is an io.emit and the oth ...

javascriptnode.jssocket.io

Reactjs is having issues with Datatable functions

I am making use of the Datatable Library for creating tables easily. After fetching data with the Fetch API and rendering it to the table, everything seems to work smoothly. However, I am facing issues with DataTable Functions such as sorting, searching, ...

javascriptreactjsdatatable

Unsuccessful AJAX form submission failing to include file input type

"I'm having trouble getting the $_FILES variable in my PHP script when posting a simple form using AJAX." <form id="submitForm" method="post" enctype="multipart/form-data" > <input type="file" name="file" /> <input type="tex ...

jqueryajax

Error: Encountered an unexpected asterisk symbol while trying to import a Sequelize model from the

Currently, I am developing an application that requires me to connect and run queries on an SQL server using Sequelize. I have set up migrations, seeders, and models by utilizing sequelize init. However, when attempting to generate model objects with const ...

javascriptnode.jssql-serverexpresssequelize.js

Having trouble resolving a setInterval problem with JavaScript?

Yesterday, I learned about the setInterval function which allows me to execute a task or function after a specific amount of time. While I have successfully implemented the interval in my code, it keeps adding new lines with the date each time. What I re ...

javascripthtmlfunctiondatesetinterval

Utilizing JQuery for asynchronous calls with Ajax

I recently started working with ajax calls using jquery and I'm facing an issue while trying to bind values from the Database. The data is returned in a dataset from the Data Access Layer, and I am attempting to bind this dataset to a gridview on my . ...

javascriptc#jqueryasp.netajax

When utilizing styled-jsx alongside postcss, experiencing issues with styles failing to reload or rebuild

I'm currently using postcss in conjunction with styled-jsx. In my setup, I have multiple CSS files that I'm importing using the @import directive within the _app.js file. Everything seems to work smoothly, except when I modify any of the CSS file ...

javascriptreactjsnext.jsstyled-jsx

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

javascriptcssfeature-detection

Generate JSON data in C# similar to how PHP's json_encode function works

If I wanted to return JSON in PHP, I could use the following code: return json_encode(array('param1'=>'data1','param2'=>'data2')); What is the simplest way to do the equivalent in C# ASP.NET MVC3? ...

c#phpjsonasp.net-mvc-3