Panel for Editing a JTable

The JTable Plugin has been successfully integrated and is working well, which I am quite pleased with.

One thing I'm wanting to do is modify the Edit Record Panel. Specifically, I would like to add a new text input field. Is this doable?

For instance, in the screenshot provided above, I am looking to include the following inputs:

  1. Old Password
  2. New Password
  3. Confirm Password

Answer №1

Include these 3 fields in your jTable configuration with 'list' set to false and 'edit' set to true.

fields: {
            OldPassword: {
                title: 'Old Password',
                list: false,
                edit: true
            },
            NewPassword: {
                title: 'New Password',
                list: false,
                edit: true
            },
            ConfirmPassword: {
                title: 'Confirm Password',
                list: false,
                edit: true
            }

Remember to add these 3 properties to your model as well. You may need to implement password validation. You can do this by adding the following event to your table:

formSubmitting: function (event, data) {
            //Compare passwords and apply validation logic    

            return data.form.validationEngine('validate');
        }

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

Using dryscrape for web scraping: encountering an issue when selecting a radio button with CSS

I am attempting to extract data from a dynamically updated table on a webpage using dryscrape. The web page in question is located at . My code functions correctly with tables that are generated when the page is loaded initially. However, I now need to upd ...

Content does not become interactive upon the initial loading of the page

I've modified a W3 schools slideshow template to use text instead of dots, but I'm encountering two issues 1: The first image doesn't load when the page loads. Although using a class ID and setting it to active fixes this issue, it leads to ...

What is the best way to handle an AJAX request within an if-else statement?

Attempting to utilize an if-else condition in order to make a jQuery Ajax call to an API. Having trouble understanding why the ajax function is being called even though it should be in the else statement. Below is the code snippet: if (e.value == null | ...

Placing a FontAwesome icon alongside the navigation bar on the same line

Upon login, the navigation bar experiences display issues. Prior to logging in: https://i.stack.imgur.com/ZKyGe.jpg Following successful login: https://i.stack.imgur.com/zyP3m.jpg An obstacle I'm facing involves the Log Out fontawesome icon wrappi ...

Can you provide a solution in C# for traversing through article elements within the HTML of a website?

I need assistance with iterating through elements on a webpage that are all categorized under the html <article> tag. How can I achieve this? <article> <div class="inner-article"> <a style="height:150px;" href="/shop/jackets/v87vh6 ...

Creating personalized buttons for HTML dropdowns in PhoneGap

Is it possible to customize the buttons in an HTML select box (dropdown) with PhoneGap 3.5? I am looking to include a "Cancel" button along with the "Done" button. Are there any ways to modify or add select buttons through the PhoneGap API or plugins? ...

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

Unable to eliminate the margin on the box

I am struggling to align 2 divs side by side due to a margin that one of the divs has, and I cannot remove it. .middleHolder{ padding: 0px !important; } body{ font-family: Raleway, sans-serif; } .numberedTitle{ font-family: Roboto, sans-serif; font-si ...

Adding conditional href based on a specific criteria to an <a> tag in AngularJs

I have been working on a menu list where some menus contain URLs and others do not. When a menu item includes a URL, the href attribute is displayed, otherwise just the span tag is shown. I tried checking it like this but ended up with href="#" when the me ...

How can you eliminate a line from the HTML input mask in Gravity Forms?

With Gravity Forms, I am utilizing the "input masks" feature to prompt users to enter data in a specific format. However, it seems to be creating an unwanted line within the input field itself as shown in the image below: https://i.stack.imgur.com/8gQ3K.j ...

Unable to engage with any items on the display when the Material UI (MUI) Select Menu is active

In my web application, I am utilizing Material UI's Select component. Upon using it, I encountered a restriction where the user is unable to interact with anything else on the screen while the Select menu is open. This includes the inability to click ...

Navigate to a hyperlink using an HTML tag on an Android device

Hi there, I have an HTML string that includes a tag with a href attribute. After setting this HTML string in a text view on Android, I want only the tag with the href attribute to be clickable and redirect to the appropriate link. Can someone please advise ...

Let the numerical tally commence once we arrive at said juncture

Our script is designed to count numbers, but the issue arises when the page is refreshed and the number count starts over. We want the count to start only when a user reaches that specific number or point. Css:- .office{padding-right: 5px; padding-left: ...

Can vertical spacing be managed exclusively with CSS?

I am facing a challenge with the layout of my header bar containing a logo and search form, both floated to the left. I have been struggling to control the vertical spacing of the search form using CSS as a solution that works consistently across browsers ...

Opting for a name selector over an id for more specific styling

Is there a way to modify the code below in order to make it function based on a name selector instead of an id? <div id="light" class="change_group_popup"> <a class="close" href="javascript:void(0)">Close</a> JavaScript $('.ch ...

Adding a conditional to target a bootstrap modal in AngularJS

I am facing a situation where I need a modal to only appear when specific conditions defined in my controller are met, rather than every time a button is clicked. Here's the HTML CODE: <button class="btn btn-primary-outline" type="button" data-uk ...

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

The issue with jqTransform not displaying the select box value on a hidden contact form

Could really use some assistance here and apologize if it's a hassle: Link to contact form To view the contact form, simply click the "Contact" button in the top left corner. The jqTransform jQuery plugin is being used to style it. Initially, it&apo ...

Unable to assign the value of 'innerHTML' to a null property during an AJAX request

I have searched through numerous articles on this site, but I haven't been able to find the solution I'm looking for. Every time I click a cell in my custom div table, I receive the frustrating message "Cannot set property 'innerHTML' ...

Ways to access dropdown menu without causing header to move using jQuery

Greetings everyone, I am currently working on a dropdown language selection feature for my website. The issue I am facing is that when I click on the language dropdown in the header, it causes the height of the header to shift. $('.language- ...