根据用户交互在页面焦点上调用Javascript函数

Question

I have a requirement where clicking on an icon should open a new window where the user will be able to view and edit certain fields. After the user closes this window and comes back to parent window, the icon color and text should be changed( for eg:- if the user has removed certain data, the icon will change to red color and text is set to null. If the user presses cancel button, nothing changes)

I am planning to implement this using a body onload function which essentially checks with the database using AJAX requests to see if the user has changed the data, then accordingly change the icon and text.

But, I see 2 problems in this approach
1. There will be a AJAX call even if the user has not changed anything.(ie. pressed Cancel button)
2. AJAX is called every time the body is on focus. Eg:- He may be working on some other page (or a different browser altogether) and comes back to this, resulting in an AJAX call.

Can anybody suggest a better approach. I am using Javacript, JSP, Java

Answer 1

I think the easiest way to do this would be to set a cookie (learn how here ). You can then have the two windows communicate between each other. This wouldn't be AJAX, but it will most likely work.

Answer 2

Two ways to implement this

Method 1

You know the methods which changes the database in the opened form. Suppose you have a delete method, write an additional window.opener.location.reload() after the method. The downside is that opener(parent window) gets reloaded every time you change something in the child window. Which is unnecessary.

Method 2 - Using cookies

I am using MDN's A little framework: a complete cookies reader/writer with full unicode support for creating cookies. The plan of action will be this. Create a cookie and set a value for it like this after you change anything in the child window and update it in the database like this docCookies.setItem("isChildFormUpdated", "yes"); . You can use the same cookie for every action you do. Now when you navigate back to the parent form, do this.

$(document).ready() {
    $(window).focus(function () {
        var formCookie = docCookies.getItem("isChildFormUpdated");
        if (formCookie !== null && formCookie == "yes") {
            //resetting the cookie. you can also remove the cookie
            docCookies.setItem("isChildFormUpdated", "no");
            //docCookies.removeItem("isChildFormUpdated");
            // your ajax call comes here
            //or you could simply reload the form so that we get fresh data
            //window.location.reload(); // it will be heavier
        }
    });
});

I hope you get the basic idea.

Answer 3

Another nice way to create a popup-like box is by using a modal box. These can be complicated but they look very nice. You have to make a jQuery plugin in, but you can take the one here and learn how it works. Good luck with your requirement.