Cómo mostrar y ocultar elementos div en jQuery

El siguiente ejemplo le mostrará cómo mostrar y ocultar elementos div según la selección de casillas de verificación utilizando toggle()el método jQuery. Los cuadros div en este ejemplo están ocultos de forma predeterminada mediante una propiedad CSS displaycuyo valor se establece en none.

Por ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

What is GEEK

Buddha Community

Cómo mostrar y ocultar elementos div en jQuery

El siguiente ejemplo le mostrará cómo mostrar y ocultar elementos div según la selección de casillas de verificación utilizando toggle()el método jQuery. Los cuadros div en este ejemplo están ocultos de forma predeterminada mediante una propiedad CSS displaycuyo valor se establece en none.

Por ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Checkboxes</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var inputValue = $(this).attr("value");
        $("." + inputValue).toggle();
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

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

Mostrar y ocultar elementos Div usando botones de opción en jQuery

Simplemente puede usar jQuery show()y hide()métodos para mostrar y ocultar elementos div según la selección de botones de opción. Los cuadros div en el siguiente ejemplo están ocultos de forma predeterminada mediante una propiedad CSS displaycuyo valor se establece en none.

Pruebe este ejemplo seleccionando diferentes botones de opción y vea cómo funciona:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Radio Buttons</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>
</body>
</html>

Obtenga, Establezca Y Elimine La Imagen De Fondo Div JQuery

En este tutorial, aprenderá cómo obtener una imagen de fondo div, cómo configurar la imagen de fondo div y cómo eliminar la imagen de fondo div usando jQuery.

Aquí aprenderá paso a paso, obtener, configurar y eliminar la imagen de fondo usando jQuery.

Obtener imagen de fondo

Puede usar el siguiente código para obtener la imagen de fondo en jQuery.

$(".btn-get").click(function() {
    var bg = $('div').css('background-image'); // get background image using css property
    bg = bg.replace('url(','').replace(')','');
    alert(bg);
});   

Establecer imagen de fondo

Puede usar el siguiente código para configurar la imagen de fondo usando la propiedad jQuery CSS.

$(".btn-set").click(function() {
 
 var img = '//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg';
 var bg = $('div').css('background-image',"url(" + img + ")");
});

Eliminar imagen de fondo

Puede usar el siguiente código para eliminar la imagen de fondo usando la propiedad jQuery CSS.

$(".btn-remove").click(function() {
    var bg = $('div').css('background-image','none');
}); 

Tomemos un ejemplo

Aquí tomaremos un ejemplo, en este ejemplo obtendremos la imagen de fondo div, estableceremos la imagen de fondo y eliminaremos/eliminaremos la imagen de fondo usando la propiedad jQuery css

<html>
 
   <head>
 
      <title> How to get, set and remove background image attribute example</title>
 
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
 
      <script>
 
        $(function() {
            $(".btn-get").click(function() {
                var bg = $('#bg-img').css('background-image');
                bg = bg.replace('url(','').replace(')','');
                alert(bg);
            });            
            $(".btn-remove").click(function() {
                var bg = $('#bg-img').css('background-image','none');
            });            
            $(".btn-set").click(function() {
 
                var img = '//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Encode-Decode-a-URL-Using-JavaScript.jpeg';
                var bg = $('#bg-img').css('background-image',"url(" + img + ")");
            });
        });
 
      </script>
      <style>
        .card{
            margin: 30px;
        }
     </style>
   </head>
 
   <body>
 
    <div class="card">
        <div id="bg-img" style="background-image: url('//www.tutsmake.com/wp-content/uploads/2019/08/How-to-Download-Install-XAMPP-on-Windows.jpeg');  width: 1000px; height: 500px;">
             
        </div>
    </div>
 
 
   <button type="type" class="btn-get">Get background image</button>
   <button type="type" class="btn-set">Set background image</button>
   <button type="type" class="btn-remove">Remove background image</button>
 
 
   </body>
 
</html>

Conclusión

En este artículo, ha aprendido cómo obtener, establecer y eliminar una imagen de fondo utilizando la propiedad jQuery CSS. 

Esta historia se publicó originalmente en https://www.tutsmake.com/get-set-and-delete-div-background-image-in-jquery/

#div #jquery 

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