How can I hide/show an HTML element created dynamically after in ASP.NET

I have a program that shows 2 types of price. If the user is registered, they will see the normal price and the discount; if the user is not registered, they will see only the normal price. So I would like to hide the discounted one in this case.

string resumen = "<div id='coliz'>";

resumen += "<img src='img/" + p.getNombre().ToLower().Replace(" ", "_") + "_" + p.getColor().ToLower().Replace(" ", "_") + ".png'  alt=''/>" +
"<div class='presupuesto'>" +
"<div id=pvp runat='server'><h2>PVP</h2><h2 class='precio' id='precio' data-val='" + p.getPrecio() + "'>" + String.Format("{0:C}", p.getPrecio()) + "</h2></div>" +
"<div id=pvd runat='server'><h2>PVD</h2><h2 class='precio' id='preciopvd' data-val='" + p.getPrecio() + "'>" + String.Format("{0:C}", p.getPrecio()) + "</h2></div>" +
"<ul class='caracteristicas'>";

I set the prices dynamically from the database creating the HTML content

<div id="contenido">
    <div class="clr"></div>
    <%=_resumen %>
</div>

My main idea was make a query to the database and get the value of the discount, then act in function:

_resumen = setResumen();
_custom = setCustomization();
descuento = db.isReseller(AppleCTO.CodigoCliente);
HiddenDescuento.Value = descuento.ToString();

This code is on the Page_Load.

My problem is: I can't or I don't know how to control these elements created dynamically after in C# on the Page_Load. Or maybe I can pass the date with the HiddenField and perform the actions with jQuery.

I tried the jQuery:

var descuento = $('#HiddenDescuento').val();
// VISIBILIDAD DEL PVD
if (descuento == 0) {
    $("#preciopvd").hide()
}
// VISIBILIDAD DEL PVD

What are different solutions?

Upvotes: 1

Views: 517

Answers (1)

Nirav Madariya
Nirav Madariya

Reputation: 1508

As I don't know full structure of your program, I can suggest something as below.
create HTML Block and make it hidden like style='display:none;'

Use JQuery
to hide, instead of

if (descuento == 0) {
  $("#preciopvd").hide()
}

use this,

if (descuento == 0) {
    $("#preciopvd").css("display","none");
}

and to show,

if (descuento == 0) {
    $("#preciopvd").css("display","block");
}

Happy Coding !!!

Upvotes: 2

Related Questions