Can not make the settings from the sidebar gadget get applied

Question

OK, I am not an expert at Sidebar Gadgets, but I have this project I will have to make for school. Have tried to solve it on my own but I got really stuck.

I will have to use the Cirip API (Cirip.ro being a kind of Twitter), and for the use of the API I have to input the username. I do so by means of the Settings, but when closing the settings there is no effect.

Here is the code, but it's pretty messy. I am not a web programmer so javascript/html is new to me.

http://www.box.net/shared/7yogevhzrr

EDIT: Ok, so I have narrowed it down a little and optimized my code here but it is still not working. I have made it as simple as possible.

In the main html I have this:

<script language="javascript">
    document.write(getUserName());
</script>

In the gadget.js:

var userName;

document.onreadystatechange = function DoInit() {

    document.body.style.width = 251;
    document.body.style.height= 351;
    document.body.style.margin=2;
    userName="danieliuhasz";
    System.Gadget.settingsUI = "settings.html";
    System.Gadget.onSettingsClosing = settingsClosed;

}

function setUserName(userNameSet){

    userName = userNameSet;
}

function getUserName(){

    return userName;
}

function settingsClosed()
{

    var username = System.Gadget.Settings.read("username");
    setUserName(username);
}

In the settings.html:

<body>

Username:<br />
<input name="userBox" type="text" maxlength="50" />
</body>

In settings.js:

document.onreadystatechange = function DoInit()
{    

    if(document.readyState=="complete")
    {
        var user = System.Gadget.Settings.read("userName");

        if(user != "")
        {
            userBox.value = user;
        }       
    }        
}


System.Gadget.onSettingsClosing = function(event)
{

    if (event.closeAction == event.Action.commit)
    {
        var username = userBox.value;
        if(username != "")
        {
              System.Gadget.Settings.write("username", username);
              System.Gadget.document.parentWindow.settingsClosed();

        }
    }
}

I really can't figure it out. The output of this is "undefined".

The output is *undefined* probably because you're setting the `username` variable in the `onreadystatechange` event handler and the `document.write()` block is executing first. Also, the `document.write()` code won't execute after the settings are closed. — Andy E, Jan 08 '11 at 10:35

score 2 · Answer 1 · answered Jan 07 '11 at 11:22

I don't have a RAR unpacker on this machine so I can't take a look at the file, but I can give you a little bit of advice about saving settings. If you need further help, try pasting the code into your question (see my comment above).

When working with settings, you need to catch the System.Gadget.onSettingsClosing event in your JavaScript code. In this event handler, you can either make the settings temporary, by setting properties in the gadget window, or you can make them semi-permanent, by using System.Gadget.Settings.write to store the settings. Let's say your username/password html looks like this:

<label for="username">Username: </label><input id="username" type="text"><br/>
<label for="password">Password: </label><input id="password" type="password">

Your JavaScript should look something like this:

System.Gadget.onSettingsClosing = function (event) {
    // First, we need to make sure the user clicked the OK button to save
    if (event.closeAction == event.Action.commit) {
        // If they did, we need to store the settings
        var username = document.getElementById("username").value,
            password = document.getElementById("password").value;

        System.Gadget.Settings.write("username", username);
        System.Gadget.Settings.write("password", password);

        /* Finally, we can call a function defined in the main gadget window's
           JavaScript to let it know that the settings have changed */
        System.Gadget.document.parentWindow.settingsHaveChanged();
    }
}

In your main gadget's JavaScript, settingsHaveChanged might look something like the following function:

function settingsHaveChanged () {
    var username = System.Gadget.Settings.read("username"),
        password = System.Gadget.Settings.read("password");

    sendAPIRequest(username, password);
}

Can not make the settings from the sidebar gadget get applied

1 Answers1