The functionality of displaying an animated gif will not work when submitting a CakePHP ajax form before or after completion

I have exhaustively tested all possible scenarios using prototype, but I am unable to get my busy indicator to show no matter what I do. Despite cross-browser testing, I've had no luck.

<?php 
echo $ajax->submit('Submit', array('url'=> array('controller'=>'records',        'action'=>'add'), 'update' => 'ajax_div', 
'evalScripts' => true,
'before' => $this->Js->get('#busy-indicator')->effect('show', array('buffer' => false)),
'complete' => $this->Js->get('#busy-indicator')->effect('hide', array('buffer' =>   false))));
?>

<?php echo $this->Html->image('ajax-loader.gif', array('id'=>'busy-indicator')); ?>
javascriptajaxcakephpprototypejs

Answer №1

After some trial and error, I was able to finally make this function work. Surprisingly, the manual didn't mention this approach at all, but it turned out to be exactly what I needed for the prototype:

<?php 
echo $ajax->submit('Submit', 
  array('url'=> array('controller'=>'records',
   'action'=>'add'), 'update' => 'ajax_div', 
   'evalScripts' => true,
   'loading' => 'Element.show(\'busy-indicator\')',
   'success' => 'Element.hide(\'busy-indicator\')'));
?>

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

Use .load() to set an image as background in the div

There is a block of code that is supposed to display images in a div with the class "img", but it isn't functioning correctly. Can you provide some guidance on how to fix this issue? <div class="other"><a href="/index1.html">Link1</a&g ...

javascriptjqueryhtmlimage

Using jQuery UI autocomplete for replacing specific characters with regex

I have a search input that utilizes jQuery autocomplete to query a database. While it's currently functioning properly, I'd like it to be more flexible with certain characters. For example, if the data in the database is oc-5, I want the requeste ...

jqueryregexajaxjquery-uiautocomplete

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

javascripthtmllogoutwindow.openwindow.opener

creating sleek animations with Pixi.js for circular shapes

Is it possible to create smooth animations on circles or sprites similar to D3.js hits in Leaflet? https://drive.google.com/file/d/10d5L_zR-MyQf1H9CLDg1wKcvnPQd5mvW/view?usp=sharing While D3 works well with circles, the browser freezes. I am new to Pixi. ...

javascriptd3.jsleafletpixi.js

Sort and incorporate elements by multiple strings present in an array

Looking to filter and include strings in an array by matching them with items in another array? Here is a sample code snippet that filters based on a single string: const filteredString = `${this.filter}`.toLowerCase(); this.filteredCampaigns = this. ...

javascripttypescript

Inspecting every element within an array and indicating a negative outcome if any item is not a string

I'm currently working on a function called 'every' that takes in an array and a callback function as arguments. The purpose of the callback function is to determine if all elements in the array meet a certain condition. In my case, I want th ...

javascript

Struggling with setting up and installing the MDX transformer plugin (as well as its dependencies) on a Gatsby site

Task: Currently working on setting up a basic blog using Gatsby Results: Expected Result: Following the tutorial guide as expected Actual Result: Encountering Dependency tree error at certain steps & also receiving a warning message stating 34 vulnerab ...

javascriptnpmgatsby

Is it possible to assign a property value to an object based on the type of another property?

In this illustrative example: enum Methods { X = 'X', Y = 'Y' } type MethodProperties = { [Methods.X]: { x: string } [Methods.Y]: { y: string } } type Approach = { [method in keyof Method ...

javascripttypescripttypes

Tips on obtaining the screen resolution and storing it in a PHP variable

Hey there! I've run into a bit of a roadblock that I'm struggling to overcome. I know that I need to incorporate some JavaScript to solve this issue, but I'm having trouble grasping how to do so. Here's the script I'm working with: ...

phpjavascriptjqueryscreen

Could it be that the function is returning undefined because console.log is executing before the result is actually returned? Perhaps a promise

There is a function located in another file that I need to extract the response from and perform an action based on that response before completing my controller function. This is the snippet of code from the external file: exports.counter = function(com ...

javascriptnode.jsexpressnpm-request

Is it possible to deceive Array.isArray?

Although I have a good understanding of prototypes, I encountered some confusion when I attempted the following: var obj = {}; Object.setPrototypeOf(obj, Array.prototype); console.log(Array.isArray(obj)); // false? What's even more perplexing: var ar ...

javascriptarrays

Sending information using AJAX to Django using the POST request method

I'm attempting to pass data to a Django view using AJAX with the POST method based on a tutorial I watched. Below is the code I have implemented (myURL is the URL where I call testview): $(document).on('submit','#form',func ...

pythonajaxdjango

Experiencing issues when attempting to invoke Java code from Google App Engine?

My issue involves java classes being called from an html file using the following ajax code: $.ajax({ type: "POST", url:"http://www.verifiedalerts.appspot.com/verifiedalert?action=addIntrusionRules", dataType:"text", async ...

phpajaxgoogle-app-engine

A guide on selecting the best UI container based on API data in React using TypeScript

I have been developing a control panel that showcases various videos and posts sourced from an API. One div displays video posts with thumbnails and text, while another shows text-based posts. Below is the code for both: <div className=""> &l ...

javascriptreactjstypescript

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows: <template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDro ...

javascriptdrop-down-menuvue.jsvuejs2vue-component

Guide on how to selectively add middleware such as multer to a fresh express router

For a previous project, I set up a router and utilized multer for handling file uploads. I was able to apply the multer middleware selectively on specific routes as shown below: var router = express.Router(); var multer = require('multer'); var ...

javascriptnode.jsexpressmulter

Are multiple instances of ajax being executed within the modal?

Currently, I am working on a feature that requires an Ajax request. To begin with, the process involves opening a modal by clicking a button with the class '.open-email-modal'. Within this modal, there are two input fields to enter registration d ...

javascriptjqueryajax

The table is empty as no data is present when utilizing DataTables along with an AJAX request for a

I've been attempting to populate a table with data from a JSON file using DataTables. However, every time the page loads, all I see in the table is "No data available in table". Here's the code snippet I'm currently working with: <table ...

jquerynode.jsajaxexpress

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss

Strategies for managing asynchronous forEach loops, inserting outcomes into a database, and displaying the finalized dataset

I want to achieve the following steps: Call an API resource Receive an array of records - [arr] Iterate over [arr] and execute a function which involves making another async call to an API for each item Create an object for each iteration that includes el ...

javascriptnode.jsmongodbexpress