Transform the pop-up window into a Kendo alert template

Currently, I am looking to convert the alert window into a template that utilizes Kendo UI for alerts. Previously, I had been using AJAX for the alert functionality.

The current alert window looks like this:

I require assistance with coding it in AJAX

AJAX PHP

//AJAX call for button
    $("#primaryTextButton").kendoButton();
    var button = $("#primaryTextButton").data("kendoButton");
    button.bind("click", function(e) {

    var test = $("#dropdown").val()

    $.ajax({
        url: "../DesignationProgramTemplate/getTemplate.php",
        type: "post",
            data: {'id':test,'progid':array},
                success: function () {
                // you will get response from your php page (what you echo or print)                 
                    alert('success'); //coding alert
                    //refresh
                    //location.reload("http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php");
                },
        /*  error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
            }*/
        });
    });

Any thoughts on the above code?

javascriptajaxkendo-uialert

Answer №1

You have the option to utilize kendo.dialogs:

//AJAX call for button
$("#primaryTextButton").kendoButton();
var button = $("#primaryTextButton").data("kendoButton");
button.bind("click", function(e) {

  var test = $("#dropdown").val()

  $.ajax({
    url: "../DesignationProgramTemplate/getTemplate.php",
    type: "post",
    data: {
      'id': test,
      'progid': array
    },
    success: function() {
      // you will receive a response from your php page (what you echo or print)                 
      kendo.alert('success'); //coding alert
      //refresh
      //location.reload("http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php");
    },
    /*  error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
        }*/
  });
});

Example:

$("#alertBtn").on("click", function() {
  kendo.alert("This is a Kendo UI Alert message.");
});

$("#confirmBtn").on("click", function() {
  kendo.confirm("Are you sure that you want to proceed?").then(function() {
    kendo.alert("You chose the Ok action.");
  }, function() {
    kendo.alert("You chose to Cancel action.");
  });
});

$("#promptBtn").on("click", function() {
  kendo.prompt("Please, enter an arbitrary value:", "any value").then(function(data) {
    kendo.alert(kendo.format("The value that you entered is '{0}'", data));
  }, function() {
    kendo.alert("Cancel entering value.");
  })
});
html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.uniform.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.uniform.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<button id="alertBtn" class="k-button">kendo.alert</button>
<button id="confirmBtn" class="k-button">kendo.confirm</button>
<button id="promptBtn" class="k-button">kendo.prompt</button>

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

Error caused by MongoClient TypeError

As a newcomer to NodeJS and someone exploring Dependency Injection for the first time, I encountered an error that led me to seek help. Before asking my question, I reviewed some similar threads on Stack Overflow: [1][2] Upon running my main code, I recei ...

javascriptnode.jsmongodb

What is causing the unexpected impact of the "Product Quick View" JavaScript plugin on divs that are not being activated by user interaction?

As a newcomer to web design, I have implemented the "Product-Quick-View" plugin from CodyHouse on my website. Upon clicking the DEMO button and inspecting the code, you will find the following: <body> <header> <h1>Product Q ...

javascripthtmlcssplugins

Optimizing Next.js: Mastering the Art of Handling Scripts for Specific Routes

We're utilizing a chat plugin with GTM in our Next.js application. Our goal is to have GTM handle everything, without any code on the front end. GTM injects the main script and also handles injecting the init script. We only want the chat to be visi ...

javascriptnext.jsgoogle-tag-manager

Arranging an array containing three elements

As I work on my angular app, I have come across the following array: [ { "Name": "Jack", "IncomingTime": "2020-06-19T11:02+00:00", "Outgoingtime": "2020-06-19T11:07+00:00" ...

javascriptangulartypescriptangular8

Click on the checkboxes to the left labeled "Mark"

https://i.stack.imgur.com/2u1dI.png In designing a permission management form for user access, the concept I have in mind is as follows: When "Manage" is selected, the options for view/edit/lend should also be automatically selected and disabled. If any ...

javascriptjquery

Struggling with integrating Bootstrap 4 Modals in Angular 2 environment

I attempted to incorporate a modal from into my navbar, but nothing happens when I click on it. <div class="pos-f-t fixed-top header"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <button class="navbar- ...

javascripthtmltwitter-bootstrapangular

Error: The JavaScript variable 'undefined' is being used as a function, which is incorrect. This error occurs when trying to execute the function `mockBackend

I am currently working on unit testing an AngularJS controller using Karma and Jasmine. Below is the test suite I have created: describe('Controllers', function(){ var $scope, ctrl; beforeEach(module('curriculumModule')); ...

javascriptangularjskarma-runner

Retrieve numerical values in inch format from a given string and output the greater value

Trying to extract size information from product names: Product A 30" Metalic Grey Product B 31.50" Led 54 watt Product C 40"-60" Dark Green The current code for fetching size information is: var product_name = $(this).text(); product_name.split('"& ...

javascript

An error occurred while trying to initialize the ui.bootstrap.demo module in AngularJS

Currently, I am in the process of learning angularjs and have encountered a roadblock. An error keeps popping up: ncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to: Error: [$injector:nomod] Module 'ui.bootstr ...

javascriptangularjs

Selecting a date in Jade's date picker

I'm currently facing an issue with getting a datepicker to function properly using Jade in a node.js and express framework. Within index.jade, I am loading the necessary javascript files like this: link(type='text/css', href='css/ui-l ...

javascriptjquerynode.jsexpresspug

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

Connect the element in the array to a specific identifier in a different object

I'm currently facing an issue while trying to create a report page using the code below. I am encountering difficulties in accessing equivalent array values from the objItems[i] object which results in a "Uncaught TypeError: Cannot read properties of ...

javascriptjqueryarraysjsonobject

Is there a way to remove the old React component when there are two instances of it still active while passing variables?

Recently, I've encountered some unusual behavior with my React component. As a newcomer to React, I have a page where users can configure toast notifications that are displayed. For this functionality, I'm utilizing the react-hot-toast package. U ...

javascriptreactjstypescriptnext.js

Problem with the bottom navigation area in Mobile Safari-15

Problem When opening a modal with position absolute or fixed while the bottom navigation is collapsed, there remains an empty area in the bottom navigation section. This issue seems to be related to the browser area, making it difficult to remove using CS ...

javascriptcssmobile-safariios15

Iterating through a set of HTML elements and making updates using a forEach loop

I have encountered an issue while attempting to update a group of HTML elements within a forEach loop. Initially, everything appears to be functioning correctly up to section 3. However, upon adding a new section, the problem arises where the navigation ba ...

javascripthtmlarraysforeachlistener

How to Retrieve the Access Token from Instagram using Angular 2/4/5 API

I have integrated Instagram authentication into my Angular 2 project using the following steps: Begin by registering an Instagram Client and adding a sandbox user (as a prerequisite) Within signup.html, include the following code snippet: <button t ...

javascriptangularinstagram-api

Requesting with the '&' symbol (amp)

Attempting to send a jQuery AJAX request with the "&" symbol in the URL: var fileName = 'test&.pdf'; var resultUrl = url + encodeURIComponent(fileName); The resulting URL is /Download/cbe1952c-1b16-40bc-9f93-7a801e0e68b8/true/test%2526.pdf. ...

javascriptasp.nethttpjquery

How to use Ajax to update a Filefield in Django

Looking for a way to update an object's FileField using Ajax? I've created a wav blob in the browser and am trying to pass it by appending it to a FormData instance: var data = new FormData(); data.append('sound', blob); ...

jquerypythonajaxdjango

Modify the URL query to read as "favicon.ico"

Whenever I make a GET request to my node.js/express web server with a URL following the route, instead of storing that URL, the server ends up saving favicon.ico: var express = require("express"); var app = express(); app.get("/:query", function (req, re ...

javascriptnode.jsexpressget

The console in React displays values, but fails to render them on the DOM

I am attempting to dynamically load options for a select element based on another select's value. I pull the data from an array that will eventually contain more information. The issue I am facing is that even though I successfully filter the data, t ...

javascriptreactjsantd