Updating the user content on the fly

[Jack_Tauson_Sr]

I have my Bootstrap Modal dialog related code as follows:

<div id="add_user_dialog" class="modal fade" role="dialog">
 
    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h2 class="modal-title">Add New User</h2>
            </div>

            <div class="modal-body">

                <div class="form-group">
                    <label for="user_login_id">Login ID</label>
                    <input type="text" class="form-control" id="user_login_id">
                </div>

                <div class="form-group">
                    <label for="user_first_name">First Name</label>
                    <input type="text" class="form-control" id="user_first_name">
                </div>

                <div class="form-group">
                    <label for="user_last_name">Last Name</label>
                    <input type="text" class="form-control" id="user_last_name">
                </div>

                <div class="form-group">
                    <label for="user_email">Email</label>
                    <input type="text" class="form-control" id="user_email">
                </div>

                <div class="form-group">
                    <label for="user_role">Role</label>
                    <select class="form-control" id="user_role">
                        <option value="31">Person1</option>
                        <option value="32">Person2</option>
                        <option value="31">Person3</option>
                        <option value="32">Person4</option>
                        <option value="33">Person5</option>
                    </select>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-warning cancel-button" data-dismiss="modal">CANCEL</button>
                <button type="button" class="btn btn-success save-button">SAVE</button>
            </div>

        </div>
    </div>
</div>

My Javascript Code is as follows:

this.save = function () {

          
            var user_login_id = $_("#user_login_id").val();
            if (!user_login_id) { 

                alert("Please enter a login ID"); return false; 
            }else {
                $_("user_login_id").html(user_login_id);
            }

            var user_first_name = $_("#user_first_name").val();
            if (!user_first_name) { 
                alert("Please enter a first name"); return false;
             }else {
                  $_("user_first_name").html(user_first_name);
             }

            var user_last_name = $_("#user_last_name").val();
            if (!user_last_name) { 
                alert("Please enter a last name"); return false; 
            }else {
                $_("user_last_name").html(user_last_name);
            }

            var user_email = $_("#user_email").val();
            if (!user_email) { 
                alert("Please enter an email address"); return false; 
            }else{
                $_("user_email").html(user_email);
            }

            var user_role = $_("#user_role option:selected").attr("value");
            if (!user_role) { 
                alert("Please select a role"); return false;
             }else {
                $_("user_role").html(user_role);
             }

            
            // Code related to Ajax call
            var data = {
                email: user_email,
                full_name: user_first_name + " " + user_last_name,
                is_enabled: isEnabled,
                is_machine: false,
                login_id: user_login_id,
                registry_id: app_.registry.id,
                role_id: user_role
            };

            console.log(data);
            // function to make Ajax call
            app_.get(data, self.processSave, self.displayError, self.urlKey);
        };

    };

So, there is a modal dialog to add new user as shown using the bootstrap code above and I am trying to update the content on the fly( in the else statement) on the User Interface. When I add a user, it gets added via Ajax call and when I refresh the page, I can see the user added in the list. Basically, I don’t want to refresh the page to see the updated list of users and hence I am trying to add the users as mentioned above in my javascript code but it’s not adding. Could anyone tell me what’s wrong I am doing?

[m3g4p0p]

@Jack_Tauson_Sr

I am trying to update the content on the fly( in the else statement)

Do you mean those parts?

$_("user_login_id").html(user_login_id);

Assuming $_ refers to jQuery, just user_login_id would query for an element with the same tag name, which does not exist in your markup… so which element are you trying to access?

[Jack_Tauson_Sr]

You are right. I am referring to the dialog related HTML only. Let me see if I can find the correct markup and I will get back here if it doesn’t work. Thanks !