I have been attempting to implement OpenID login functionality on a website using the openid selector JavaScript library. I am following the guidelines provided on this particular site. However, as someone who is not typically a web programmer, I am facing issues with getting it to work and I am unsure of the reason behind this. It seems like it could be something minor, but it's escaping my notice.
The main problem I am encountering is that no image containing the OpenID elements appears where it should, specifically within the
<div id="openid_btns"></div>My suspicion initially fell upon the scripts.
I followed the instructions to add script references to the Site.Master file as per below:
<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>
It appears to be invoking the function on every page (the alert pops up), which should mean that the openid.init function is also being triggered afterwards.
This function is defined within the `openid-jquery.js` script:
// Script content here...
I inserted an `alert("initializing")` line into the script, but it never appeared to execute.
Should this function actually be running? How can I inspect why it isn't working as expected? Any thoughts?
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>
Now, the alert doesn't appear. What does this indicate? Could there be an issue with the other function? How can I troubleshoot this further?
UPDATE 2:
Oddly, if I rename the `openid-jquery.js` file to something different (anything at all, such as `openid-jquery.2.js`), then I'm able to see the alert from the OpenID script.
However, it only seems to trigger the initial alert and not the subsequent lines. When I add another alert later on (after the very next line), the second alert remains unseen. I'm unsure about the reason behind this as well.
UPDATE 3:
After debugging in Chrome, it appears that the issue stemmed from `providers_large` and `providers_small` not being defined. Adding the following lines to the beginning of the script allowed it to execute and display the alerts. Nonetheless, the images are still not appearing... Looks like I need to investigate further.