Problems integrating openId selector with Asp.Net MVC 2

Question

I am trying to use the openid selector javascript library to allow OpenId login for a web site. I'm following the instructions on this site, but I'm not usually a web programmer and its not working and I'm not certain why. I'm sure its something fairly trivial but I can't see it.

The problem is that no image with the open Id bits on it is rendered in the place where it should go, which is the <div id="openid_btns"></div> I'm assuming. This seems to indicate to me that the function which is supposed to set the contents of this div is not being run.

I suspected the scripts.

I have added the script references to the Site.Master as it indicates:

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>  
<script type="text/javascript" src="../../Scripts/openid-jquery.js"></script>  
<script type="text/javascript">
    $(document).ready(function () {
        alert("document ready"); // <- I added this to verfiy that this is being called
        openid.init('openid_identifier');
    });  
</script>  

and it seems to call the function on each page (the alert is shown) and it should then, I assume, call the openid.init function.

this is defined in the openid-jquery.js script:

var openid = {    
version: '1.2', // version constant
demo: false,
demo_text: null,
cookie_expires: 6 * 30, // 6 months.
cookie_name: 'openid_provider',
cookie_path: '/',

img_path: '../images/',
lang: null, // language, is set in openid-jquery-<lang>.js
signin_text: null, // text on submit button on the form
input_id: null,
provider_url: null,
provider_id: null,
all_small: false, // output large providers w/ small icons
no_sprite: false, // don't use sprite image
image_title: '{provider}', // for image title

init: function (input_id) {
    alert("initialising");
    providers = $.extend({}, providers_large, providers_small);

    var openid_btns = $('#openid_btns');

    this.input_id = input_id;

    $('#openid_choice').show();
    $('#openid_input_area').empty();

    var i = 0;
    // add box for each provider
    for (id in providers_large) {
        if (this.all_small) {
            openid_btns.append(this.getBoxHTML(id, providers_large[id], 'small', i++));
        } else
            openid_btns.append(this.getBoxHTML(id, providers_large[id], 'large', i++));
    }
    if (providers_small) {
        openid_btns.append('<br/>');

        for (id in providers_small) {

            openid_btns.append(this.getBoxHTML(id, providers_small[id], 'small', i++));
        }
    }

    $('#openid_form').submit(this.submit);

    var box_id = this.readCookie();
    if (box_id) {
        this.signin(box_id, true);
    }

again I added the alert("initialising"); which never seems to be called.

Should it be calling this function? How can I determine why this function is not being called? Any ideas?

UPDATE:

in the document ready function i swapped the order of the functions like so:

<script type="text/javascript">
    $(document).ready(function () {            
        openid.init('openid_identifier');
        alert("document ready"); 
    });  
</script>  

and now the alert is not raised. what does this mean? is something going wrong in the other function? how can I tell what it is?

UPDATE 2:

Wierd. If I rename the openid-jquery.js file to something (seemingly anything) else (like openid-jquery.2.js) then I can see the alert from the open id script.

but it only seems to execute the alert and not the next line as when I add another alter later on (ie after the very next line) the 2nd alert is never seen. not sure why that would be either.

UPDATE 3: After debugging in chrome it seems the problem was that providers_large, providers_small were not defined and adding:

var providers_large;
var providers_small;

to the top of the script allowed it to at least run and show the alerts. but still no images... further investigation I think.

Answer 1

so it seems that in step 4 of the instructions it needs to be updated to add the english javascript provider information which is where the provider_large is defined, like so:

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>  
<script type="text/javascript" src="../../Scripts/openid-jquery.js"></script> 
<script type="text/javascript" src="../../Scripts/openid-jquery-en.js"></script>  
<script type="text/javascript">
    $(document).ready(function () {
        alert("document ready"); // <- I added this to verfiy that this is being called
        openid.init('openid_identifier');
    });  
</script>