What could be the reason for the on_close_popup_ui function not functioning properly in the OneAll social plugin?

I have implemented a custom login page for users here.

If a user attempts to close the popup window before registering, I intend for the div with ID "uzenet" to have a shake effect similar to that seen in a Wordpress login form.

The great news is that the plugin provides a robust API function, which is fully documented and can be found: here.

The specific function I am trying to utilize is: on_close_popup_ui, however, it seems to be failing to work properly without any apparent reasons. Based on my understanding of the documentation, the correct code implementation should resemble the following:

<!-- The plugin will be loaded into this div //-->
<div style="margin-top: 23px;" id="oa_social_login_container"></div>
<div style="margin-top: 23px;" id="oa_social_login_container"></div>

<script type="text/javascript">
 var _oneall = _oneall || [];
 _oneall.push(['social_login', 'do_popup_ui']);
 _oneall.push(['social_login', 'set_callback_uri', 'http://neocsatblog.mblx.hu/']);
 _oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'steam', 'twitter', 'windowslive', 'wordpress']]);
 _oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);
/* 
Signature 
  <scope> : string - (social_login)
  <function> : JavaScript function for execution
*/
_oneall.push(['social_login', 'set_event', 'on_close_popup_ui', 'my_on_close_popup_ui']);

/* Example */
var my_on_close_popup_ui = function() {
  alert("You have closed the popup user interface");  
}

_oneall.push(['social_login', 'set_event', 'on_close_popup_ui', 'my_on_close_popup_ui']);

 </script>

Regrettably, despite my efforts, this setup isn't functioning as expected, leaving me puzzled about the cause.
There are no syntax errors reported in the Chrome console, and the lack of an alert popup implies that the function may be encountering some obstacles before recognizing themy_on_close_popup_ui identifier.

Answer №1

_oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);

It is crucial that this line remains at the end of the script. Any _oneall.push(...) commands executed after this point will be disregarded.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am encountering undefined values when utilizing momentjs within Angular

My project is utilizing angular and momentJS, with the addition of the angular-moment library. You can find my current progress in this fiddle However, I am encountering an error when trying to use moment in a controller method: TypeError: undefined is n ...

Using Vue's v-if statement to determine if a variable is either empty or null

Using a v-if statement to display certain HTML only if the archiveNote variable is not empty or null. <div v-if="archiveNote === null || archiveNote ===''" class="form-check ml-3" id="include-note-div"> Here is how it's implemented ...

TypeORM Error: Trying to access property 'findOne' of an undefined object

I've been working on implementing TypeORM with Typescript, and I have encountered an issue while trying to create a service that extends the TypeORM repository: export class UserService extends Repository<User> { // ... other service methods ...

Can you conceal all content enclosed by two h2 tags?

Here is an example HTML snippet: <h2>Headline 1</h2> <p>Lorem ipsum bla bla</p> <p>Lorem ipsum bla bla</p> <p>Lorem ipsum bla bla</p> <h2>Headline 2</h2> <p>Lorem ipsum bla bla</p> ...

After the ajax function has finished executing, establish a socket.io connection

Within my application, the initial step involves the client calling a webservice from a nodejs server to fetch historical data from a mongoDB database for visualization using the highcharts library. Subsequently, I need to receive live updates from the ser ...

Error Loading Collada Texture: Three.js Cross Origin Issue

I'm encountering an issue with loading a Collada file using three.js that has a texture called Texture_0.png associated with it. The Collada file and the texture are stored in the same blob and accessed via a REST Web Service. CORS is enabled, allowin ...

Arranging squares in a circular formation with Three.js

I am facing an issue with aligning squares within a circular grid to its center. Despite the correct center point, the entire grid is consistently skewed to the right. The problem could be due to incorrect calculations for removing squares outside the cir ...

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...

Personalize the req.body object in Nodejs

I'm curious to know if it's possible to customize the req.body that is sent to MongoDB. Currently, my req.body looks like this: { f_name: 'John', l_name: 'Doe', phone: '4521234892345' } However, I would like it ...

Exploring the child element of the present DOM node within Angular

In my template, I have a code snippet similar to the one below: <button class="btn" > <audio src="mySourceFile.wav"></audio> </button> When the button is clicked, I want to play the audio object. Ideally, I would like to achieve ...

Is there a way to determine if a property can be animated using CSS3 transitions?

Inconsistencies in the list of properties that can be animated with a CSS3 transition exist among browsers and are subject to change with new browser versions. For instance, -moz-transform is not animatable with -moz-transition in FF3.6 but it is in FF4. ...

Stopping the carousel animation in Bootstrap 5: A step-by-step guide

I'm struggling to stop a Bootstrap 5 carousel with a button click. The pause function seems to be ineffective. You can view the code on Code Pen Example or see the code below. document.getElementById("btnPause").addEventListener("clic ...

How can I efficiently make a dropdown menu with search functionality instead of using datalist?

I am currently working on creating a custom searchable input field that makes backend calls. Instead of using datalist, I want to design a unique UI with ul and li items. While I have successfully implemented the search functionality, I am facing a glitc ...

Is there a way to retrieve the default ObjectId generated by MongoDB when using NextAuth?

Is it possible to access the MongoDB ObjectId of the user currently logged in when using Next Auth with services like Twitter? When signing in, Next Auth creates a new user, account, and session, but I'm unable to retrieve the _id value for my server ...

jQuery - harnessing the power of JavaScript events such as "dragover"

I have a JavaScript function that includes an event listener for 'dragover'. Here is the code snippet: document.getElementById("someID").addEventListener("dragover", function(){ //Add your logic here }, fa ...

Combine large arrays

Hey, I'm encountering some issues while trying to merge large arrays in a React Native app. Specifically, I am attempting to implement infinite scroll on React Native. The issue arises when the array reaches 500+ items; every time I add more items, my ...

Tips for effectively invoking a method in a Vue component

As a Vue2 beginner, I am currently working with the Vue CLI and following the structure generated from it. My goal is to submit form data, but I keep encountering a warning and error: [Vue warn]: Property or method "onSubmit" is not defined on the insta ...

What is the best way to transfer a JSON object from Java to JavaScript?

I've been struggling to pass data from my Spring controller to JavaScript, but I haven't had any success so far. Would using ajax be the best approach for this task? Can you provide me with some hints on how to achieve this effectively? In my co ...

What determines the location that AngularJS looks for when loading a module?

In my app module, I have defined dependencies based on the phonecat Tutorial. This module is located in the directory app: app.module.js: angular.module('phonecatApp', [ 'phoneList' // (*) ]); Within the a ...

The mongoose is able to access various collections at once and perform complex computations

Below is the code snippet: module.exports.comparator = function(req, res){ Buyer .find() .exec(function (err, buyer) { if (err) { console.log("Error finding buyer"); res .status(500) ...