Having trouble adding a new user in Knockoutjs

I'm currently utilizing knockoutjs to display multiple records in a table using a foreach loop. In the table foot, there is an Adduser button that allows for adding a new user. In the previous version of our software, when a user clicked on Adduser, it displayed input fields within the tr so the user could be added. Now, my task is to show the input form in a modal popup. However, the issue arises because data-bind is in the table body tag while the adduser button and modal popup div are outside of the table body tag. This results in an error like:

"Error: Unable to parse bindings. Message: ReferenceError: LoginName is not defined; Bindings value: value: LoginName, valueUpdate: 'keyup'"

Below is the code snippet:

<table class="report-table cstm-report-tbl" data-bind="if: CompanyId()">
    <thead>
        <tr>
            <th>
                Login
            </th>
            <th>
                Email
            </th>
            <!-- ko if: $root.EditId() !== null -->
            <!-- /ko -->
        </tr>
    </thead>

    <tbody data-bind="foreach: Users">
        <tr>
            <!-- ko if: $root.EditId() === Id() -->
            <td><span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null },  attr: {'data-target': '#myModal' + Id()}" data-toggle="modal"></span></td>
            <td>
                <span data-bind="text: EditEmail" />
            </td>

            <!-- /ko -->
            <!-- ko ifnot: $root.EditId() === Id() -->
            <td><span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null },  attr: {'data-target': '#myModal' + Id()}" data-toggle="modal"></span></td>
            <td data-bind="text: Email"></td>
            <!-- ko if: $root.EditId() === 0 -->
            <!--<td></td>
            <td></td>
            <td></td>-->
            <!-- /ko -->
            <!-- /ko -->
        </tr>
        <tr class="modal fade cstm-resident-modal cstm-admin-popbox" data-bind="attr: { id: 'myModal' + Id()}" role="dialog" tabindex="-1">
            <td colspan="3" class="modal-dialog" role="document">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Client Admins</h4>
                </div>
                <div class="modal-content">
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Login Name</label>
                        </div>

                        <div class="field">
                            <input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text">
                            <span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"></span>
                        </div>
                    </div>
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Email</label>
                        </div>
                        <div class="field">
                            <input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text">
                        </div>
                    </div>
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Password</label>
                        </div>
                        <div class="field">
                            <input data-bind="value: Password, valueUpdate: 'keyup'" type="text">
                        </div>
                    </div>
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Is Approved</label>
                        </div>
                        <div class="field">
                            <input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox">
                            <span data-bind="visible: $root.EditId() === 0">N/A</span>
                        </div>
                    </div>
                    <div>
                        <div id="InlineEditActionPanel">
                            <span class="" data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
                            <span class="clickable" data-bind="click: $root.CancelEdit" data-dismiss="modal">Cancel</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <!--<tr>
            <td class="add-user-popbx" data-bind="attr: { colspan: $root.EditId() === null ? 4 : 5 }">
                <span class="add-usr-btn" data-bind="click: $root.Add, css: { clickable: $root.EditId() === null },  attr: {'data-target': '#myModal' + Id()}" data-toggle="modal">Add new user</span>
            </td>
        </tr>-->
    </tbody>
    <tfoot>

        <tr>
            <td class="add-user-popbx" data-bind="attr: { colspan: $root.EditId() === null ? 4 : 5 }">
                <span class="add-usr-btn" data-bind="click: $root.Add, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal2">Add new user</span>
            </td>
        </tr>
        <tr class="modal fade cstm-resident-modal cstm-admin-popbox" id="myModal2" role="dialog" tabindex="-1">
            <td colspan="3" class="modal-dialog" role="document">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Client Admins</h4>
                </div>
                <div class="modal-content">
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Login Name</label>
                        </div>

                        <div class="field">
                            <input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text">
                            <span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"></span>
                        </div>
                    </div>
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Email</label>
                        </div>
                        <div class="field">
                            <input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text">
                        </div>
                    </div>
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Password</label>
                        </div>
                        <div class="field">
                            <input data-bind="value: Password, valueUpdate: 'keyup'" type="text">
                        </div>
                    </div>
                    <div class="input-wrpr">
                        <div class="label">
                            <label>Is Approved</label>
                        </div>
                        <div class="field">
                            <input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox">
                            <span data-bind="visible: $root.EditId() === 0">N/A</span>
                        </div>
                    </div>
                    <div>
                        <div id="InlineEditActionPanel">
                            <span class="clickable" data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
                            <span class="clickable" data-bind="click: $root.CancelEdit" data-dismiss="modal">Cancel</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

And here's the javascript code provided:

ResPortal.Admin.MaAdmin = function () {
var maAdminViewModel = function () {
    var that = this;

    <!-- The rest of the JS code goes here -->

If you encounter any issues or need further assistance, please feel free to let us know.

jqueryknockout.jsbootstrap-modal

Answer №1

Each row in the tbody is linked to a user through a foreach. However, the bindings for user fields in the tfoot are associated with your vm and not any specific user. The vm does not have properties like LoginName, Id, etc.

It is unclear how you intend to use the tfoot.

If you plan to utilize it as an area for editing users, you could include the currently edited user in your model:

this.EditUser = ko.pureComputed(function() {
    if (that.EditId() == null) {
        return null;
    }

    var user = _.find(that.Users(),
        function(u) {
            return u.Id() === that.EditId();
        });

    return user;
});

and bind it to the tfoot:

<tfoot data-bind="if: EditUser() != null">
    <!-- ko with: EditUser -->

    <!-- rest of your html ... -->

    <!-- /ko -->
</tfoot>

However, based on your Add method code where new users are added to the list and inline editing is performed, you may only want to keep the "add new user" button in the tfoot section.

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

Working with JSON data in javascript

While trying to parse JSON data from a server, I came across a strange issue. The data consists of rows of data - essentially a list of lists - and it looks something like this: [[1,2,3],[4,5,6],[7,8,9]] When viewing the JSON data in FF (using Firebug), ...

javascriptjqueryjson

JQuery drag and drop feature to organize interconnected lists

After looking at the JQueryUI demos, specifically this example, I am attempting to implement a feature where the sort functionality is disabled on the left list, and items from the left list are copied instead of moved. Is there a way to achieve this? If ...

jqueryjquery-uidrag-and-dropjquery-ui-sortable

Looping through a series of elements and performing jQuery Ajax requests

I am facing an issue with retrieving values in the success function (ajax) within the $.each loop. This is what I have: var test = []; $.each(images, function(index){ var formData = new FormData(); formData.append('image', images[index] ...

jqueryajaxloopseach

The double click feature is not functioning properly when used in conjunction with the selectpicker Boostrap

<select class= "selectpicker" id="cus_id"> <option value="654" >test1</option> <option value="6877" >test2</option> <option value="8687" >test3</option> </select ...

javascriptjquery

In what ways can I enhance and visually improve JSON data using a jquery/javascript plugin?

My current project requires me to display JSON data received from the backend in a textarea. However, the data comes unformatted and not validated. Now I'm facing two main challenges: 1) How can I beautify the JSON content in the textarea? 2) How can ...

javascriptjqueryjsonjsonlint

What is the best way to create a toggle function for a specific span element that switches between showing more or

I came up with this solution: $(".morelink").click(function(){ $(this).siblings(".DescMore").show(); $(this).hide(); }); After tweaking the code, only the content related to the clicked link will be shown. Here's what I did: Here is the mod ...

jquery

Laravel Ajax error when trying to insert datepicker value into the database

Hey everyone, I'm having trouble inserting a value into a datepicker. When I use my ajax code to do this, it returns null. Here's the code: <script type="text/javascript"> // add a new post $(document).on('click', '. ...

phpjqueryajaxlaravel-5.4

What is the best way to retrieve the ID of the most recent div element added using AJAX and jQuery?

Initially, I have a div with a pre-set ID. Then, I use an AJAX call to add more divs into this container. How can I retrieve the IDs of these dynamically added divs using jQuery? For example: <div class="main"> <div id="0" class="take">t ...

jqueryajaxlive

Guide on incorporating one element into another with jquery

I am facing a challenge with the following code snippet: <p>Nuno</p> <p>Eimes</p> My goal is to transform it into this format: <p><a href="name/Nuno">Nuno</a></p> <p><a href="name/Eimes">Eimes& ...

javascriptjquerydom

The JQuery parseFloat() function seems to be consistently returning "NAN" whenever it is used with the .text property

I am currently encountering an issue with parsing the text property of an input element identified by the id currency-converter. My goal is to convert this text into a floating-point value so that I can proceed with applying mathematical operations to conv ...

javascriptjquerykeyup

Each time the toggle is switched, an additional AJAX request is sent to the PHP document

I've been working on a function that sends data to a PHP file, which then processes the data. The PHP part works fine, but I'm having issues with the jQuery side of things. Each time I click on a ".work" element and trigger the toggle function, a ...

jqueryajax

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

javascriptjqueryhtmlcss

Implementing a CheckBox Overlay within a JQuery Dialog

Using the JQuery dialog plugin, I have created a custom dialog with the following structure: <div id="initialQuestions" title="Please complete the following"> [Questions] </div> <div id="checkField" style="visibility:hidden; z-index:1001" ...

jquery

What is the jquery alternative to the PHP 'if IP equals' condition?

I am curious to know if the following PHP 'if' conditions can be achieved in jquery or JavaScript, with a preference for jquery. if ($_SERVER['REMOTE_ADDR'] != '123.99.55.616') { // public doingness } if ($ ...

javascriptphpjquery

Symfony 2 and the power of asynchronous requests!

I'm facing a major issue because I am unable to make an AJAX request in Symfony. Below is some code snippet from my template: $( document ).ready(function() { $( ".data" ).change(change_selected); }); function change_selected(){ $.ajax({ ...

jqueryajaxsymfony

Ways to retrieve a variable within the init() function

My current project involves using datatables along with ajax to display information dynamically. Below is the code snippet I am working with: // Setting up the module var DatatableAdvanced = function() { // Examples of Basic Datatables var _c ...

javascriptjquerydatatables

position text to the right side of a slider gallery created with JavaScript

I'm currently utilizing a WordPress plugin known as Slideshow Gallery and I want to position the text below it to float next to the gallery on the right side. I've attempted the following: .bioText{ font-size: 14px; font-size: 1.428571429rem; ...

javascriptjquerywordpressslidercss-float

`json: Alert not displaying response data`

Currently, I am utilizing the following Ajax code to retrieve data from the server. $.get("http://***/umbraco/Api/SomeApi/SignIn",{apiVersion : 1,email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee0efe3ebcee9e3efe7e2a0ed ...

jqueryajaxjsonp

The AJAX call failed because the web service was not properly configured, resulting in a missing parameter value being

I'm encountering an issue with my ajax call that displays a specific message. [WebMethod(EnableSession = true)] public static string UpdateTotalPrice(List<TicketPriceAjax> jsonTickets) { // conducting server-side processing return "a u ...

javascriptjqueryasp.netajax

What is the best way to transfer the content from a tinyMCE textarea editor to an inner controller using Symfony3 and Ajax

I have two small rich text editors identified as #homepage and #thankyoupage. My goal is to submit the content of these TinyMCE text areas to a Symfony controller. Below is my front-end implementation: https://i.stack.imgur.com/TE1Ys.jpg Currently, I am ...

javascriptjqueryajaxsymfonytinymce