Figuring out how to update content on the fly

JavaScript
1

I have the following code snippet. Basically there is a pop up dialog which has name field and comment field and when user clicks on OK button, the name gets updated on the user interface. But in order for me to see the updated updated name on the UI, I have to refresh the page. I tried doing the reloading of the page using the commented line of code for the OK button (/*location.reload(true);*/ ) as shown below in the code but this basically reloads the page.

I would like to see the updated content on the User Interface as soon as OK button is clicked and the dialog gets closed.Could anyone tell me what alternative approach or any fix can be applied in the current code to achieve my requirement?

  $("#editName").click(function () {
            $('#editName').popModal({
                html: $('#edit_name').html(),

              onOkBut: function () {
                    var editNameVal = $("#editName").val();
                    var editNamecomment = $("#editNameComment").val();

                    var url = https://editwebservice:8443/editName
                    if (isEmpty(url)) { alert("Invalid URL for Edit Name "); return false; }

                   
                    var ajaxRequest = jQuery.ajax({
                        data: {
                            employee_id: regman.employee.id,
                            employee_supervisor_id: employeesupervisor_.employee_supervisor_id
                            
                        },
                        dataType: "json",
                        method: "GET",
                        url: url
                    })
                    .done(function (data_, textname_, jqXHR_) {
                        
                       
                       $.extend({ alert: function (message, title) {
                                $("<div></div>").dialog( {
                                  buttons: { " OK ": function () {/*location.reload(true);*/  $(this).dialog("close"); } },
                                  close: function (event, ui) { $(this).remove(); },
                                  resizable: false,
                                  title: title,
                                  modal: true,
                                  position: { my: 'top', at: 'top+30' }
                                }).text(message);
                              }
                              });

                        $.alert("employee name Updated !!","employee name"  );
 


                        if (data_.name != "SUCCESS") {  return false; }
                        
                        
                        
                    })
                    .fail(function (jqXHR_, textname_, errorThrown_) {
                        alert("Error in Updating employee supervisor Service : ");
                        return false;
                    });
                }// END of function()


            });
        });
2

What about:

buttons: { " OK ": function () {
  $(selector).text(employeeName);
  $(this).dialog("close");
}

Where selector is the element you want to update and employeeName is a variable holding the name of the employee.

3

Thanks Pullo for your reply.

Here is how my HTML is defined :

<b> Employee Name Status:</b> <span id="employee_name_status"></span>

I tried doing the following :

 buttons: { " OK ": function () {

       $(#employee_name_status).html(employeeName); 

       console.log("What is coming here? "+employeeName);

       $(this).dialog("close"); 
     }

I get an error at the line $(#employee_name_status).html(employeeName); which I am not sure why. Checking it on esprima syntax checker online, it says Unexpected Token ILLEGAL for the above line.

However, after commenting the above line, the console.log("What is coming here? "+employeeName); displays the employee name in the developer tools console. But this name is still the old name and not the updated one.This means, a page refresh required which I am not looking to do. I was wondering, if I need to make a new Ajax call once again inside the buttons section to make sure I get the updated value of the employeeName value?

4

This:

$(#employee_name_status)

should be:

$("#employee_name_status")

But it doesn’t sound like that’ll help. You got a demo of this somewhere online?

5

Thanks Pullo. Actually it did start working now. Appreciate your valuable input.

1 Like
6

Awesome. Glad you got it working.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.