Having difficulty accessing a function within the SignalR connection function

I am currently facing an issue while trying to access a specific function within a SignalR connection function. Below is the code snippet showcasing the entire script for better understanding:

$(function() {
    var chat = $.connection.chatHub;
    chat.client.informOfStatusRequest = function(personToNotify, message) {
        var sysUserId = @Convert.ToInt32(HttpContext.Current.Request.Cookies["sys_user_id"].Value);
        if (sysUserId === personToNotify) {
            $.notify({
                icon: 'glyphicon glyphicon-star',
                message: message
            }, {
                animate: {
                    enter: 'animated fadeInRight',
                    exit: 'animated fadeOutRight'
                }
            });
        }
    }

    $.connection.hub.start().done(function() {

        function disapproveTicket(ticketId, createdById) {
            bootbox.confirm({
                title: 'CONFIRM',
                message: 'Disapprove ticket ID ' +ticketId +'?',
                buttons: {
                    confirm: {
                        label: 'YES',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: 'NO',
                        className: 'btn-danger'
                    }
                },
                callback: function(response) {
                    if (response === true) {
                        $.ajax({
                            type: 'POST',
                            url: '/Member/DisapprovePendingTicket',
                            data: {ticketId: ticketId} ,
                            success: function(result) {
                                if (result === true) {
                                    $.notify({
                                        icon: 'glyphicon glyphicon-star',
                                        message: "Ticket has been disaproved"
                                    }, {
                                        animate: {
                                            enter: 'animated bounceIn',
                                            exit: 'animated bounceOut'
                                        }
                                    }, {
                                        type: 'success'
                                    });
                                    $("#div_get_pending_ticket").load('/Member/GetPendingTicket');
                                    getPendingRequestCount();
                                    chat.server.informUserOnRequestStatus(createdById,"Ticket has been disaproved");
                                } else {
                                    $.notify({
                                        icon: 'glyphicon glyphicon-star',
                                        message: "Failed in disapproving the ticket."
                                    }, {
                                        animate: {
                                            enter: 'animated bounceIn',
                                            exit: 'animated bounceOut'
                                        }
                                    }, {
                                        type: 'success'
                                    });
                                }
                            }
                        });
                    }
                }
            });
        }
    });
});

When attempting to call the "disapproveTicket" function, I encountered an error stating that it is undefined. The function "disapproveTicket" resides within a $(function()) and is encompassed by $.connection.hub.start().done(). Despite browsing through other responses on accessing nested functions, I have not been successful due to differences in structure. Could you kindly provide guidance on how to resolve this issue? Thank you.

Answer №1

After examining your function disapproveTicket(), I noticed that it can only be triggered after $.connection.hub.start().done() is executed. This prevents the onclick attribute in an HTML element from calling it directly. To address this issue, you should implement the following code:

$.connection.hub.start().done(function(){
   $("#your_element").click(function(){
      disapproveTicket()
   })
})

I hope this solution proves helpful for you.

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

Drag to rotate using JavaScript when the mouse is pressed down

I am experimenting with making a spinning wheel rotate as the user drags the mouse over it. The wheel consists of 3 pieces, so I have individually mapped each image to target the specific section of the wheel that I want to rotate. Currently, it is funct ...

Steps for converting a file with JSON objects to a JSON array

I have a JSON file with multiple objects stored in a single file that I need to convert into a JSON array using JavaScript. My main objective is to create a CSV file from this data. Here is an example of the file content: { Name:"nom1", Cities:[&apos ...

including identical item in the array

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <script> var app = angul ...

What is the best way to expand the width of a table cell in a React + Material project?

Currently, I am utilizing material UI in conjunction with React to display my data in a table format. Within the table, there are specific titles such as "GENERAL_INFORMATION" and "INFORMATION" that I intend to center align. However, I have encountered an ...

The presence of Vue refs is evident, though accessing refs[key] results in an

I am facing an issue with dynamically rendered checkboxes through a v-for loop. I have set the reference equal to a checkbox-specific id, but when I try to access this reference[id] in mounted(), it returns undefined. Here is the code snippet: let id = t ...

Tips for displaying an alert after a successful form submission and ensuring user input validation

I created a form with PHP code to send emails, but I'm struggling to add an alert without page refresh upon submission. The alert needs to display in green or red text below the button. Validation for email input is needed, as well as protection again ...

Validating American phone numbers using regular expressions

I came across a Javascript regex that is used to validate the different formats in which US phone numbers can be written. However, there seems to be an issue with it: it fails to match the second rule within this specific group: The first group of three ...

There was an error while trying to read the properties of undefined (specifically the state). Make sure to include this.state.a

I am struggling with an error that I have never encountered before. Despite having experience working with functional components, I am new to class components. I used create react app to install the application, but it seems like I might be missing a req ...

How can I implement the vm. syntax using ControllerAs in my application?

After reading various sources, including a few discussions on Stack Overflow, I have come to understand that the ControllerAs syntax is gaining popularity as it aligns with how things are done in Angular 2. Therefore, I decided to delve deeper into unders ...

A common inquiry regarding Vue: How to effectively incorporate fullpage.js wrapper with additional functionalities

Having recently delved into Vue, I am currently tackling a project that involves the Fullpage.js Vue wrapper. While I have successfully implemented the Fullpage functionality, integrating additional features like an animation-on-scroll function has proven ...

ObservableResolve(): Unleashing the power of RxJS5 for handling asynchronous data streams

Hey there! To dive deeper into RxJS, I thought of creating my own custom Rx operator. So here's a straightforward one that seems to be working smoothly: Rx.Observable.prototype.multiply = function (input) { const source = this; return Rx.O ...

The perpetual loop in React context triggered by a setState function within a useEffect block

I'm experiencing an endless loop issue with this context component once I uncomment a specific line. Even after completely isolating the component, the problem persists. This peculiar behavior only manifests when the row is discounted and the browser ...

Including a cancel button to close the open window

var messagebox = Ext.widget("messagebox", { target: grid, progressMessage: "Loading" }); The message box displayed above indicates the loading progress bar that appears when the download button is clicked. I am looking to incorporate a cancel button i ...

angular-recaptcha: Adjusting language based on the website's language update

My website offers three different languages that users can switch between. The language switch functionality is implemented on the client side using JavaScript (AngularJS). I have integrated reCAPTCHA 2 into my website and now I need to update the languag ...

Methods for concealing a single item in a Vue web form

I am a beginner with Vue and I am facing a challenge in hiding a specific element within a web form that is part of a loop. I am trying to use v-if along with a showHideEditComponent method call. However, when I invoke the showHideEditComponent method wi ...

React Native images failing to render at the same time

I have created a React Native app that loads images simultaneously from Supabase storage using a custom hook. The goal is to display these images in a list using SwipeListView: const fetchImages = async (recipes) => { if (!recipes) { return; ...

Securing Routes with Firebase User Authentication in ReactJS

Currently, I am encountering an issue with the auth.onAuthStateChanged function in my Firebase user authentication service integrated with ReactJS. The function fires after the component has already been rendered, causing problems with redirecting users to ...

Various behaviors in multiple instances of DatePicker

Currently, I have a form with two datePicker elements (using jQuery UI). When I hover over a date in the first datePicker, an AJAX call is made successfully. However, the issue is that the AJAX call is triggered for both datePickers when I only want it to ...

Unable to scroll after the webpage redirects

I am currently working on developing a website for uploading images with a comment feature. The comments section is displayed below the image in the 'imagedisplay.php' file. If a user is not logged in, they are redirected to the sign-up page and ...

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

I am currently developing a vueJs web application and I'm in need of determining the position of an element within my web app relative to the viewport itself, rather than its parent elements. I'm curious if there exists a function or property tha ...