Annabell Nikolaus

Annabell Nikolaus

1659318420

Comment Initialiser L'élément Select2 à L'aide De jQuery

Le plugin Select2 jQuery est facile à ajouter sur l'élément <select>. Besoin d'appeler la méthode select2() sur le sélecteur pour initialiser.

Si vous ajoutez select2 sur une classe ou sélectionnez un élément et que vous ajoutez un élément dynamiquement, alors select2 n'est pas initialisé sur cet élément.

Dans ce tutoriel, je montre comment vous pouvez initialiser select2 sur un élément HTML <select> créé dynamiquement à l'aide de jQuery.

Je charge des données select2 en utilisant jQuery AJAX dans l'exemple.

1. Structure du tableau

J'utilise userstable dans l'exemple -

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuration

Créez un config.phppour une connexion à la base de données.

Code terminé

<?php
$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. Télécharger

  • Téléchargez la bibliothèque Select2 depuis GitHub  et téléchargez également la bibliothèque jQuery.
  • Extrayez les fichiers téléchargés dans le répertoire du projet.
  • Copiez également la bibliothèque jQuery.

4.HTML

Créez un <select class="select2_el" >élément pour initialiser select2 lors du chargement de la page et créez <div id="elements" >un conteneur pour stocker l' <select >élément lors d'un clic sur un bouton à l'aide de jQuery AJAX.

Code terminé

<select class="select2_el" style='width: 200px;'>
   <option value='0'>- Search user -</option>
</select>

<div id='elements'>

</div>
<input type="button" id="btn_add" value="Add">

5.AJAX

Créer ajaxfile.phpun fichier pour gérer les requêtes AJAX.

Traiter deux demandes -

  • Si $request == 1alors retournez les données pour select2.

Vérifiez si searchTermest POST ou non. Si ce n'est pas POST, récupérez tous les enregistrements de usersla table, sinon utilisez la valeur POST pour rechercher un namechamp dans usersla table afin de récupérer les enregistrements.

Bouclez sur les enregistrements récupérés et initialisez $dataArray avec les touches idet . textPasse $row['id']en idclé et $row['name']en textclé.

Renvoie $dataun tableau au format JSON.

  • Si alors élément de $request == 2retour .<select class="select2_el" >

Code terminé

<?php
include 'config.php';

$request = 1;
if(isset($_POST['request'])){
  $request = $_POST['request'];
}

// Select2 data
if($request == 1){
  if(!isset($_POST['searchTerm'])){
     $fetchData = mysqli_query($con,"select * from users order by name limit 5");
  }else{
     $search = $_POST['searchTerm'];
     $fetchData = mysqli_query($con,"select * from users where name like '%".$search."%' limit 5");
  }

  $data = array();

  while ($row = mysqli_fetch_array($fetchData)) {
     $data[] = array("id"=>$row['id'], "text"=>$row['name']); 
  }

  echo json_encode($data);
  exit;
}

// Add element
if($request == 2){

   $html = "<br><select class='select2_el' ><option value='0'>- Search user -</option></select><br>";
   echo $html;
   exit;

}

6. jQuery

Créer initailizeSelect2()une fonction à initialiser select2()sur class="select2_el". Utilisez AJAX pour charger les données select2.

Fonction d' appel initailizeSelect2()sur l'état du document prêt.

Définir l'événement de clic sur #btn_add. Envoyez la requête AJAX POST au 'ajaxfile.php'fichier pour ajouter l' <select >élément #elementsen ajoutant le responsein #elements.

Appelez à nouveau la initailizeSelect2()fonction pour réinitialiser le select2 sur class="select2_el".

Code terminé

$(document).ready(function(){

  // Initialize select2
  initailizeSelect2();

  // Add <select > element
  $('#btn_add').click(function(){
     $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       data: {request: 2},
       success: function(response){

         // Append element
         $('#elements').append(response);

         // Initialize select2
         initailizeSelect2();
       }
     });
  });

});

// Initialize select2
function initailizeSelect2(){

   $(".select2_el").select2({
     ajax: {
       url: "ajaxfile.php",
       type: "post",
       dataType: 'json',
       delay: 250,
       data: function (params) {
          return {
            searchTerm: params.term // search term
          };
       },
       processResults: function (response) {
          return {
             results: response
          };
       },
       cache: true
     }
   });
}

7. Démo

Voir la démo

8.Conclusion

Vous devez réinitialiser select2 sur l'élément dynamique.

Dans l'exemple, j'ai créé l'élément <select> en utilisant jQuery AJAX et en l'initialisant en classe. Vous pouvez suivre la même méthode pour initialiser select2 si vous ne créez pas d'élément à l'aide de jQuery AJAX.

Vous pouvez l'initialiser sur l'identifiant de l'élément au lieu de la classe si vous obtenez l'identifiant.

Source :  https://makitweb.com

#ajax #jquery 

What is GEEK

Buddha Community

Comment Initialiser L'élément Select2 à L'aide De jQuery
Annabell Nikolaus

Annabell Nikolaus

1659318420

Comment Initialiser L'élément Select2 à L'aide De jQuery

Le plugin Select2 jQuery est facile à ajouter sur l'élément <select>. Besoin d'appeler la méthode select2() sur le sélecteur pour initialiser.

Si vous ajoutez select2 sur une classe ou sélectionnez un élément et que vous ajoutez un élément dynamiquement, alors select2 n'est pas initialisé sur cet élément.

Dans ce tutoriel, je montre comment vous pouvez initialiser select2 sur un élément HTML <select> créé dynamiquement à l'aide de jQuery.

Je charge des données select2 en utilisant jQuery AJAX dans l'exemple.

1. Structure du tableau

J'utilise userstable dans l'exemple -

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuration

Créez un config.phppour une connexion à la base de données.

Code terminé

<?php
$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. Télécharger

  • Téléchargez la bibliothèque Select2 depuis GitHub  et téléchargez également la bibliothèque jQuery.
  • Extrayez les fichiers téléchargés dans le répertoire du projet.
  • Copiez également la bibliothèque jQuery.

4.HTML

Créez un <select class="select2_el" >élément pour initialiser select2 lors du chargement de la page et créez <div id="elements" >un conteneur pour stocker l' <select >élément lors d'un clic sur un bouton à l'aide de jQuery AJAX.

Code terminé

<select class="select2_el" style='width: 200px;'>
   <option value='0'>- Search user -</option>
</select>

<div id='elements'>

</div>
<input type="button" id="btn_add" value="Add">

5.AJAX

Créer ajaxfile.phpun fichier pour gérer les requêtes AJAX.

Traiter deux demandes -

  • Si $request == 1alors retournez les données pour select2.

Vérifiez si searchTermest POST ou non. Si ce n'est pas POST, récupérez tous les enregistrements de usersla table, sinon utilisez la valeur POST pour rechercher un namechamp dans usersla table afin de récupérer les enregistrements.

Bouclez sur les enregistrements récupérés et initialisez $dataArray avec les touches idet . textPasse $row['id']en idclé et $row['name']en textclé.

Renvoie $dataun tableau au format JSON.

  • Si alors élément de $request == 2retour .<select class="select2_el" >

Code terminé

<?php
include 'config.php';

$request = 1;
if(isset($_POST['request'])){
  $request = $_POST['request'];
}

// Select2 data
if($request == 1){
  if(!isset($_POST['searchTerm'])){
     $fetchData = mysqli_query($con,"select * from users order by name limit 5");
  }else{
     $search = $_POST['searchTerm'];
     $fetchData = mysqli_query($con,"select * from users where name like '%".$search."%' limit 5");
  }

  $data = array();

  while ($row = mysqli_fetch_array($fetchData)) {
     $data[] = array("id"=>$row['id'], "text"=>$row['name']); 
  }

  echo json_encode($data);
  exit;
}

// Add element
if($request == 2){

   $html = "<br><select class='select2_el' ><option value='0'>- Search user -</option></select><br>";
   echo $html;
   exit;

}

6. jQuery

Créer initailizeSelect2()une fonction à initialiser select2()sur class="select2_el". Utilisez AJAX pour charger les données select2.

Fonction d' appel initailizeSelect2()sur l'état du document prêt.

Définir l'événement de clic sur #btn_add. Envoyez la requête AJAX POST au 'ajaxfile.php'fichier pour ajouter l' <select >élément #elementsen ajoutant le responsein #elements.

Appelez à nouveau la initailizeSelect2()fonction pour réinitialiser le select2 sur class="select2_el".

Code terminé

$(document).ready(function(){

  // Initialize select2
  initailizeSelect2();

  // Add <select > element
  $('#btn_add').click(function(){
     $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       data: {request: 2},
       success: function(response){

         // Append element
         $('#elements').append(response);

         // Initialize select2
         initailizeSelect2();
       }
     });
  });

});

// Initialize select2
function initailizeSelect2(){

   $(".select2_el").select2({
     ajax: {
       url: "ajaxfile.php",
       type: "post",
       dataType: 'json',
       delay: 250,
       data: function (params) {
          return {
            searchTerm: params.term // search term
          };
       },
       processResults: function (response) {
          return {
             results: response
          };
       },
       cache: true
     }
   });
}

7. Démo

Voir la démo

8.Conclusion

Vous devez réinitialiser select2 sur l'élément dynamique.

Dans l'exemple, j'ai créé l'élément <select> en utilisant jQuery AJAX et en l'initialisant en classe. Vous pouvez suivre la même méthode pour initialiser select2 si vous ne créez pas d'élément à l'aide de jQuery AJAX.

Vous pouvez l'initialiser sur l'identifiant de l'élément au lieu de la classe si vous obtenez l'identifiant.

Source :  https://makitweb.com

#ajax #jquery 

hourly developer

hourly developer

1592206043

Hire Dedicated Jquery Developer

Are You Looking To Hire a jQuery Programmer?

HourlyDeveloper.io, a leading jQuery application development company, can help you build interactive front-end solutions to leapfrog the digital race. So in case, you plan to Hire Dedicated Jquery Developer, you just have to contact us.

For More Information:- https://bit.ly/3f9flt8

#hire dedicated jquery developer #jquery programmer #jquery application development company #jquery developer #jquery #jquerydevelopment

joe biden

1617257581

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

¿Quiere restaurar los buzones de correo de PST a Exchange Server? Entonces, estás en la página correcta. Aquí, lo guiaremos sobre cómo puede restaurar fácilmente mensajes y otros elementos de PST a MS Exchange Server.

Muchas veces, los usuarios necesitan restaurar los elementos de datos de PST en Exchange Server, pero debido a la falta de disponibilidad de una solución confiable, los usuarios no pueden obtener la solución. Háganos saber primero sobre el archivo PST y MS Exchange Server.

Conozca PST y Exchange Server

PST es un formato de archivo utilizado por MS Outlook, un cliente de correo electrónico de Windows y muy popular entre los usuarios domésticos y comerciales.

Por otro lado, Exchange Server es un poderoso servidor de correo electrónico donde todos los datos se almacenan en un archivo EDB. Los usuarios generalmente guardan la copia de seguridad de los buzones de correo de Exchange en el archivo PST, pero muchas veces, los usuarios deben restaurar los datos del archivo PST en Exchange. Para resolver este problema, estamos aquí con una solución profesional que discutiremos en la siguiente sección de esta publicación.

Un método profesional para restaurar PST a Exchange Server

No le recomendamos que elija una solución al azar para restaurar los datos de PST en Exchange Server. Por lo tanto, al realizar varias investigaciones, estamos aquí con una solución inteligente y conveniente, es decir, Exchange Restore Software. Es demasiado fácil de manejar por todos los usuarios y restaurar cómodamente todos los datos del archivo PST a Exchange Server.

Funciones principales ofrecidas por Exchange Restore Software

El software es demasiado simple de usar y se puede instalar fácilmente en todas las versiones de Windows. Con unos pocos clics, la herramienta puede restaurar los elementos del buzón de Exchange.

No es necesario que MS Outlook restaure los datos PST en Exchange. Todos los correos electrónicos, contactos, notas, calendarios, etc. se restauran desde el archivo PST a Exchange Server.

Todas las versiones de Outlook son compatibles con la herramienta, como Outlook 2019, 2016, 2013, 2010, 2007, etc. La herramienta proporciona varios filtros mediante los cuales se pueden restaurar los datos deseados desde un archivo PST a Exchange Server. El programa se puede instalar en todas las versiones de Windows como Windows 10, 8.1, 8, 7, XP, Vista, etc.

Descargue la versión de demostración del software de restauración de Exchange y analice el funcionamiento del software restaurando los primeros 50 elementos por carpeta.

Líneas finales

No existe una solución manual para restaurar los buzones de correo de Exchange desde el archivo PST. Por lo tanto, hemos explicado una solución fácil e inteligente para restaurar datos de archivos PST en Exchange Server. Simplemente puede usar este software y restaurar todos los datos de PST a Exchange Server.

Más información:- https://www.datavare.com/software/exchange-restore.html

#intercambio de software de restauración #intercambio de restauración #buzón del servidor de intercambio #herramienta de restauración de intercambio

joe biden

1617255938

¿Cómo migrar los buzones de correo de Exchange a la nube de Office 365?

Si tiene problemas para migrar los buzones de correo de Exchange a Office 365, debe leer este artículo para saber cómo migrar los buzones de correo de Exchange EDB a Office 365. Al migrar a Office 365, los usuarios pueden acceder a sus buzones de correo desde cualquier lugar y desde cualquier dispositivo.

En esta publicación, explicaremos las razones detrás de esta migración y una solución profesional para migrar de Exchange a Office 365.

Razones para migrar Exchange Server a la nube de Office 365

Office 365 apareció por primera vez en 2011 y, dado que se considera la mejor plataforma para aquellas organizaciones que desean administrar todo su sistema de correo electrónico en la nube. Estas son las características clave de Office 365:

  1. Permite trabajar desde cualquier lugar y desde cualquier lugar.
  2. No se preocupe por el spam y el malware.
  3. La seguridad proporcionada por Office 365 es altamente confiable.
  4. Controla el costo total y brinda flexibilidad financiera.
  5. Todas las actualizaciones y mejoras son administradas por Microsoft.

¿Cómo migrar los buzones de correo de Exchange a Office 365?

Hay varias formas manuales de migrar los buzones de correo de Exchange EDB a Office 365, pero para evitar estos complicados y prolongados procedimientos, presentamos una solución de terceros, es decir, la herramienta de migración de Exchange, que es automatizada y directa para la migración de Exchange a Office 365. La herramienta funciona rápidamente y migra todos los elementos del buzón de Exchange Server a Office 365.

La herramienta de migración de Datavare Exchange es demasiado fácil de usar y ofrece pasos sencillos para migrar EDB a Office 365:

  1. Descargue e instale el software en su sistema.
  2. Agregue el archivo EDB de Exchange con el botón Examinar.
  3. Seleccione exportar a buzones de correo de Office 365.
  4. Proporcione los detalles de inicio de sesión de la cuenta de Office 365.
  5. Seleccione la carpeta y presione el botón Finalizar.

Por lo tanto, todos sus buzones de correo de Exchange EDB ahora se migran a Office 365.
Nota: puede usar filtros para migrar los elementos de datos deseados de la cuenta de Exchange a la de Office 365

Líneas finales

Este blog le indica una solución profesional para la migración de buzones de correo de Exchange a la cuenta de Office 365. Dado que las soluciones manuales son complicadas, sugerimos la herramienta de migración de Exchange, que es demasiado simple de usar. Los usuarios no se enfrentan a problemas al operar el programa. La mejor parte de este software es que no necesita habilidades técnicas para realizar la migración. Se puede comprender el funcionamiento del software descargando la versión de demostración que permite la migración de los primeros 50 elementos por carpeta.

Más información:- https://www.datavare.com/software/edb-migration.html

#herramienta de migración de intercambio #migración de intercambio #migrar buzones de correo de exchange

Einar Hintz

Einar Hintz

1602560783

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

  • Form design for insert and update operation.
  • Display forms in modal popup dialog.
  • Form post using jQuery Ajax.
  • Implement MVC CRUD operations with jQuery Ajax.
  • Loading spinner in .NET Core MVC.
  • Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Image showing how to create ASP.NET Core Web API project in Visual Studio.

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Showing project template selection for .NET Core MVC.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Showing list of NuGet Packages for Entity Framework Core

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define  DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup