Unable to retrieve title inside success function of Ajax call

JavaScript
1

I have following function which is executed when a user clicks on a button. A different javascript page (let’s call page2.js is called when the following function is executed.
I haven’t shown the exact details of how that page is called since it’s not related to my question

$('.hideClass').bind('click', function() {

// page2.js called after click

var key = localStorage.getItem(localStorage.key(0));
console.log("Inside  bind function");
console.log(key);// This prints  {"logged_user":"myname"}

//This is how I am setting new items in the key (I haven't shown details regarding `app_` and `setData` here)
app_.setData("abcDatatitle",this.title);
app_.setData("abcData", 300);


 console.log("Inside bind function after setting the key");

 var newkey = localStorage.getItem(localStorage.key(0)); 
 console.log(newkey);// This prints  {"logged_user":"myname","abcDatatitle":"AHarmbca Reports","abcData":"300"};

}

Now, in my page2.js which is called after each button click. I have the following Ajax call defined where I am trying to retrieve the abcDatatitle in the following manner.

 console.log("Which title I am getting on clickeddddd?");
            
 var titleToPass = app_.getData("abcDatatitle");
 console.log(titleToPass);


 $.ajax({
                url: http://example.com/,
                success: function(result) {
                      $('#mydialog').dialog({
                        autoOpen: false,
                        title: titleToPass,
                        maxHeight: 500,
                        width: 1000,
                        height: 400,
                        modal: true,
                        buttons: {
                            "Print": function() {
                                $(this).dialog("close");
                                                              
                            },
                            Download: function() {
                                $(this).dialog("close");
                               // app_.removeWebStorageKey("refDatatitle");
                            }
                        }
                    });

                    
                    $('#mydialog').dialog('open');
               },

                error: function(request, status, error) {
                    console.log("Inside Error function:");
                    console.log(request.responseText);
                }

Since abcDatatitle is a dynamic field, it should be updated after each button click. In order to test this, I have included this console log console.log(titleToPass); in my page2.js page and I can see updated title
here on each button click.

However, inside the success function here ( title: titleToPass,), I keep on seeing the title value which was there when I clicked the button first time. In order to see updated title value, I have to refresh the page and then click on other button with different title.

Why is it like I can’t see the updated title inside the success function but in this console log console.log(titleToPass); statement on page2.js ? Is there something to do with the Ajax call?

2

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