I am currently using the store.synch() method to post data, with validation being done on the server side. I am currently displaying error messages in a message box, but I want to explore alternative ways to show errors without having to use markInvalid(). Using markInvalid() would require me to make changes to every JavaScript file and API. Is there any other alternative to markInvalid() that I can consider?
One of the features provided by Extjs data store is its built-in listeners, including the exception listener (specific to ExtJs versions prior to 3.x).
Below is an example of how this listener can be implemented in code:
listeners: { //Exception Handler for the Ajax Request
exception: function(proxy, response, operation){
var error = Ext.decode(response.responseText);
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: error.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
In addition, there seems to be some confusion about the markInvalid() method.
Greetings Naresh Tank, I have come up with a solution to address your issue by monitoring all ajax requests. This approach allows you to customize the error message regardless of whether it originates from a store or a form.
I trust that this will be beneficial to you.
Here is the code snippet from app.js:
init: function() {
this.addAjaxErrorHandler(this);
},
addAjaxErrorHandler: function(object) {
Ext.Ajax.on('requestexception', function(conn, response, options, e) {
var statusCode = response.status,
errorText = null,
captionText = response.statusText;
if (statusCode === 0 || statusCode === 401) {
Ext.Ajax.abortAll();
}
if(response.statusText==="Authorization Required"){
Ext.Ajax.abortAll();
}
// 404 - file or method not found - special case
if (statusCode == 404) {
Ext.MessageBox.alert('Error 404', 'URL ' + response.request.options.url + ' not found');
return;
}
if (response.responseText !== undefined) {
var r = Ext.decode(response.responseText, true);
if (r !== null) {
errorText = r.ErrorMessage;
}
if (errorText === null)
errorText = response.responseText;
}
if (!captionText)
captionText = 'Error ' + statusCode;
Ext.MessageBox.alert(captionText, errorText);
},
object);
Ext.Ajax.on('requestcomplete', function(conn, response, options, e) {
var statusCode = response.status,
errorText = null,
captionText = response.statusText;
if (response.responseText !== undefined) {
var r = Ext.decode(response.responseText, true);
if (r !== null && r.success === false) {
try{
if(typeof r.data[0].idUsr !== 'undefined')
return;
}catch(e){}
errorText = r.msg;
if (errorText === null)
errorText = response.responseText;
if (!captionText)
captionText = 'Error ' + statusCode;
Ext.MessageBox.alert(captionText, errorText);
}
}
},
object);
};
Hello everyone, I am new to ReactJS and NextJS and would really appreciate some advice on the issue below. Thank you in advance! Here is my current tech stack: Node v16.6.1 React v17.0.2 Next.js v10.0.4 I'm working on implementing a carousel and si ...
This is my external javaScript file named myJs.js function search(){ var hint = document.getElementById("sChoice").value; var item = document.getElementById("sKey").value; document.getElementById("c").value=hint; document.getElementById ...
I am attempting to modify the save method so that it waits for this.collection.create() to complete before running, in order to prevent a potential crash. class UserRepository extends BaseRepository<User> { constructor() { super(); ...
When faced with the task of recursively checking two objects with sorted keys, I came up with a solution involving two functions. buildObj - this function retrieves all unique keys from the objects, sorts them, and then calls buildObjKey for each key bui ...
Check out my source at this link: http://codepen.io/anon/pen/Bvkjx Observe how the content and background images rotate correctly. Now, I'm curious if it's feasible to keep the following content static <p>SOME CONTENT1</p> while ...
The other day, I posed this query: Why is $.getJSON() causing the browser to block? I initiated six jQuery async ajax requests simultaneously on the same controller action. Each request takes around 10 seconds to complete. Upon tracking and logging re ...
I've recently integrated Vue.js into my Laravel project and encountered an issue when trying to call a component within another component. After running the command npm run dev, I received a webpack error. Here is the code snippet from my parent comp ...
I'm working with input type radio buttons const AnswerOptions = (props) => ( <> <input type="radio" id="something" ...
Having experience with Rails/Sinatra, I am accustomed to using helper functions in my view files. However, incorporating this functionality into express.js has proven to be quite challenging. You can include locals automatically like this... app.set("nam ...
On resizing the screen, I am moving the sub-nav links to the '#MoreList' It works well initially, but when the window is expanded again, the links remain in the #MoreList instead of going back to their original positions if there is enough space ...
I have a list of child components with checkboxes, and when a checkbox is clicked, I want to move that child component inside another div. Below is an illustration of how my app should look. I need to select student names and shift them up under the "Pres ...
When adding an img, the image path functions as expected: import Background from "./img/bg.webp"; ... <div> <img className='bg' src={Background} /> </div> However, when using the same path for the backgroundImage property, ...
I am working with a two-dimensional array that was generated from an HTML table using jQuery, but I have noticed that some values are empty and are displaying as "". How can I go about removing these empty values from the array? <table> ...
Check out my JSFiddle HERE to see what I have done. I would really appreciate it if someone could help me figure out how to make the show button float with the sidr panel :) <style type="text/css"> #panel { position: fixed; top: 50%; r ...
When declaring a component within another parent component, I prefer to define specific props in one file and then assign additional shared properties in the parent component. However, I am encountering an issue where the child component fails to render be ...
I created a function called useDecider that utilizes apollo's useQuery method. Here is the code: useDecider: import { useState } from 'react'; import { useQuery, gql } from '@apollo/client'; export const GET_DECIDER = gql` quer ...
Working on a new gaming project involving MySQL for multiplayer functionality. Issue arises when requesting specific queries, where the system retrieves incorrect data or results from previous queries. dat("SELECT * FROM server1;"); Misdirected queries r ...
In my javascript file named "data handling.js" within a folder labeled "JS", you'll find the following piece of code: document.getElementById('submit-new-project').addEventListener("click", function () { var ProjectName = document.getEl ...
I developed a JS snake game using HTML5 canvas. In the event that the user loses, the score is transmitted to the database through an AJAX call in my PHP script. The PHP code then compares this score to the current highscore and updates it if needed. Howev ...
I need to validate a user-entered string that will be used as the description on a credit card statement to describe a purchase. Here are the requirements: The string must be between 5 and 22 characters long It should have at least one letter (uppercase ...