The before send function in the javascript ajax call is not being triggered

Here is the Javascript code snippet that I am working with:

this.confirmBox = function(data) {
  $.jconfirm((function(_this) {
    return function() {
      var objConfig;
      objConfig = $.jconfirm("getConfig");
      alert("here");
      return true;
    };
  })(this));
  return false;
};

this.beforeSend = function(event, jqXHR) {
  if (this.confirmBox()) {
    return this.disableSubmit();
  } else {
    return jqXHR.abort();
  }
};

After running the script, the execution reaches alert("here") and return true within the confirmBox function. However, the issue arises as the ajax call does not seem to be triggered anymore. How should I modify the beforeSend function to properly validate the result of the checkBox (true or false)?

Answer №1

You must ensure that the event is added to the buttons For reference, please check out this fiddle example

buttons: {
        "Confirm": function () {
            $(this).dialog('close');
            callback(true);
        },
            "Cancel": function () {
            $(this).dialog('close');
            callback(false);
        }
    }

Answer №2

In my opinion, the call to the confirmBox method in beforeSend always results in false because the $.msgbox function does not halt thread execution like the window.confirm method does. It might be necessary to trigger the ajax call upon receiving the result === "Confirm" from the message box.

$.msgbox("confirm", {
    type: "confirm",
    buttons: [
        { type: "cancel", value: "Cancel" }, 
        { type: "submit", value: "Confirm" }
    ]}, function(result) {
        if (result === "Confirm") {
            // $.ajax(..)
        }
    }
};

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

Having trouble getting rid of the horizontal scroll bar on my navbar

I've been experimenting with my bootstrap navigation bar. Originally set to "fixed" position, I changed it to absolute and now a horizontal scrollbar is appearing. Any ideas on how to prevent this scrollbar from showing up? Thank you! So far, I' ...

Identifying patterns within a string using JavaScript and TypeScript

Given a user-input pattern, for example [h][a-z][gho], and a string "gkfhxhk", I am attempting to determine if the string contains the specified pattern. The pattern dictates that the first character must be 'h', followed by any letter from a-z, ...

Ways to manually initiate a change detection in a ComponentRef

Trying to create a dynamic component and initiate a change detection using the ComponentRef. Attempted to generate a dynamic component and induce a change detection through the ComponentRef, but encountered difficulties. The component failed to trigger th ...

VueJs Axios - Managing Request Headers

Edit: Is it possible that this is a CORS issue, considering I am on localhost... When using Javascript, I have the ability to define request headers and handle responses like this: $(function() { var params = { // Request parameters } ...

What is the correct way to invoke this function using Ajax?

I am grappling with some code: function modifyEventStatusStyle(object){ if ($(object).hasClass("fa-circle")) { $(object).removeClass("fa-circle").addClass("fa-circle-o"); //alert("true"); } else { $(object).removeClass("fa- ...

Using Jquery to tally the number of JSON elements

I'm currently developing a chart system that pulls data from an AJAX JSON response. My goal is to categorize certain JSON objects based on color and month. For instance, I aim to organize all the colors (Red, Blue, Yellow) into separate groups and th ...

Refreshing Form in Angular 5 post submission

<form class="form-horizontal" name="form" (ngSubmit)="!f.form.invalid && staffDetails(model)" #f="ngForm" novalidate> <div class="form-group"><button [disabled]="f.invalid" *ngIf ="buttonSave" class="btn btn-info">Save</butt ...

Obtaining an array from within an object in Angular 2 using Typescript

Upon performing a console.log of the following: console.log(this.categories); The resulting structure is displayed below: https://i.sstatic.net/8Wt65.jpg This structure was generated from the JSON retrieved from the API: [ { "id":"dff0bb3e-889f-43 ...

Extracting the video identifier from YouTube's embed code

I'm currently in the process of converting a PHP preg_match expression to extract a video ID from YouTube embed code using JavaScript. Here's what I have in PHP: $pattern = '%(?:https?://)?(?:www\.)?(?:youtu\.be/| youtube\.co ...

"Passing a variable as an argument to a function in JavaScript

I've been working on setting up a basic loop of animation functions. Each function is stored in an array, and I have successfully logged out each object as a string upon click event. However, I'm encountering difficulties when trying to call the ...

Switch does not properly handle redirection when a Fragment is present

Version "react-router": "5.0.1", Test Case <Switch> <Route component={TestComponent} key={TestComponentPath} path={TestComponentPath} exact /> { exampleCondition && ( &l ...

Tips for inhibiting default behavior in a modal login form

I am currently working on integrating a login form using the Spring Framework MVC, but I am relatively new to ajax development. Below is a snippet of my index.jsp code: <!-- The Modal --> <div id="modal1" class="modal2"> <span onclick= ...

What is the best way to handle waiting for an HTTP request to complete from a separate component?

https://i.sstatic.net/q4XYB.png An issue arises when calling the GetData function from a component's controller too early. I would like it to wait for the identification process to complete before triggering. During page loading, there is a server c ...

Numerous iterations of React (react-dom utilizing outdated React dependency)

I encountered the well-known issue of two conflicting versions being loaded. After running the command npm ls | grep react, I received the following output: ├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6517000406112 ...

What is the best method for retrieving an item from localstorage?

Seeking advice on how to retrieve an item from local storage in next.js without causing a page rerender. Here is the code snippet I am currently using: import { ThemeProvider } from "@material-ui/core"; import { FC, useEffect, useState } from "react"; i ...

"Resolving the problem of populating an empty array with JSON

My JSON structure at the top level is set up like this: { "video": [], "messages": [], "notifications": [] } In the database output stored in a variable called "result," I have data that I want to add to the "vide ...

Display hyperlinks upon hovering over text

In the sign-up form, there are options for two different types of users: teachers and students. When the sign-up option is selected, a drop-down menu with choices for teacher and student will appear. However, I would like it to function more like other w ...

Encountering issues when attempting to create a service worker in a Vue.js application using Workbox's injectManifest feature

I'm attempting to utilize vue.js's capabilities for progressive web apps by creating a customized service worker using workbox. However, every time I try to build the app, I encounter the following error: AssertionError [ERR_ASSERTION]: swSrc mus ...

Struggling to loop through an array and persist data in mongoose. Could it be a problem with the

Currently, I am in the process of learning node, express, mongo, and JavaScript. I am working on a feature that involves using rssparser to retrieve a list of stories and then saving them to a mongo database with mongoose. The RSS pull functionality is wo ...

Exploring AngularJS: Diving into forms and inputs, comparing the efficacy of AJAX and client

Why validate forms on the client side if they need server-side (ajax) validation to prevent hacking? Is there a benefit to having both client-side and server-side (ajax) form validations? Both methods achieve the same goal, but ajax takes 300ms while cli ...