Link to home
Start Free TrialLog in
Avatar of Roberto Parker
Roberto ParkerFlag for Mexico

asked on

Reload a div when opened

I have a script:
<html>
<body>
<%rec=1%>
<form method="get" name="nuevo<%=rec%>" action="nuevo.asp" target="MyIFrame">
 <a href="#" class="toggleProductos toggleProductos<%=rec%>"> Open / Close asp</a>
<div style="display:none;text-align:left;">
<%randomize
response.write rnd%>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
$(".toggleProductos").on("click",function(){
   $(this).next().toggle();
});
</script>
</body>
</html>

Open in new window


It opens and closes de Div. how can I forece the div to reload the asp code? For example to make randomize to actually run and refresf rnd
Avatar of leakim971
leakim971
Flag of Guadeloupe image

how can I forece the div to reload the asp code?

you don't or can't
what you do is you load the page again with Ajax and replace the current productos with the productos of the page you load loaded silently with_ajax




Avatar of Roberto Parker

ASKER

Right. How?
<html>
<body>
<%rec=1%>
<form method="get" name="nuevo<%=rec%>" action="nuevo.asp" target="MyIFrame">
 <a href="#" class="toggleProductos toggleProductos<%=rec%>"> Open / Close asp</a>
<div style="display:none;text-align:left;">
<%randomize
response.write rnd%>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
$(".toggleProductos").on("click",function(){
   const link = $(this);
   const productos = link.next();
   if(productos.is(":visible")) {
       productos.hide();
   } else {
       $.get(location.href).done((page) => { // $.get is a shortuct of $.ajax to... get...
            const newSetOfProductos = $(".toggleProductos:first", page).next();
             productos.replaceWith(newSetOfProductos);
             link.next().show();
       });
   }
});
</script>
</body>
</html>

Open in new window

https://agendar.com.mx/divrel1.asp# opens and closes with the asp Ihave no reloading thougn (my original code)

https://agendar.com.mx/divrel.asp# with your last code doesnt open and close. it is not running the asp script <div>


jquery.slim ? maybe start using a full version before trying to optimize
also I don't see products loaded in the page by default so there's no way the browser can show something that doesn't exists in the page, right ?
The browser sown an as with a random number as shoen in https://agendar.com.mx/divrel1.asp# 

The actual asp script  is prettuy long:
<div style="display:none;text-align:left;">
<%Dim My_StringP
Dim My_ArrayP
sql="select productos from respuestas where id=" & respuestas(11,record)
Set RespSet = Server.CreateObject("ADODB.RecordSet")
RespSet.Open sql, cn
productos=RespSet("productos")
respuestas(10,record)=productos
My_StringP= respuestas(10,record)
if isnull(My_StringP) then
My_StringP=""
end if
if not instr(My_StringP,"#")>0 then
My_StringP="#;" & My_StringP
end if

My_ArrayP=split(My_StringP,";")
'response.write UBound(My_ArrayP)
TodProd=UBound(My_ArrayP)
TotIndPro=(TodProd) * 2
IF TodProd mod 2 >0  then
TodProd=TodProd-1
end if
NumPr=0%>

   <table cols="4" align="center">
      <%For Each item In My_ArrayP
      Dim My_ArrayIP
      My_StringIP= item
      My_ArrayIP=split(My_StringIP,"#")
       %>
      <tr><td  valign="top" style="white-space:nowrap;">

   <%for Each itemI In My_ArrayIP%>
   <%NumPr=NumPr+1
   'response.write NumPr & "NP<br>"

   ColName= NumPr mod 4
   'response.write ColName & "CN<br>"

   select Case ColName
  Case 0
   size= 10
   placeholder="Precio"
  tipo="text"
   Case 1
   size=2
   placeholder="Cotizar"
  tipo="checkbox"
   Case 2
   size=20
   placeholder="Producto"
   tipo="text"
   Case 3
  placeholder="Cantidad"
   tipo="text"
   size=5

   end select
    'response.write size & "SZ<br>"
    %>
    <%if ColName=1 then%>
       <%if itemI="on" then%>
         <input type="<%=tipo%>" name="producto<%response.write(NumPr)%><%response.write(respuestas(11,record))%>" checked placeholder="<%=placeholder%>" size="<%=size%>">
          <%else%>
       <input type="<%=tipo%>" name="producto<%response.write(NumPr)%><%response.write(respuestas(11,record))%>" placeholder="<%=placeholder%>" size="<%=size%>">
       <%end if%>
       <%else%>
       <input type="<%=tipo%>" name="producto<%response.write(NumPr)%><%response.write(respuestas(11,record))%>" value="<%=itemI%>" placeholder="<%=placeholder%>" size="<%=size%>">
      <%end if%>
       <%next%>

 </td></tr>
    <%next%>
    <tr><td align="center"><input type="submit"  name="guardarn<%response.write(respuestas(11,record))%>" value="Guardar"></td></tr>
 </table>
 <%randomize%>
 <input type="hidden" name="random" value=""<%=rnd%>">
 <input type="hidden" name="NumProd" value="<%=NumPr%>">
 <input type="hidden" name="id" value="<%=respuestas(11,record)%>">
 <input type="hidden" name="idpass" value="<%=idpass%>"><br>

 </div>


Open in new window

you're still using jquery.slim... 
Using jquery-3.6.0.js
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

No open or close

the integrity is wrong...
What should it be?
remove it or pick it from your source
Removed but open close link does not reload. Here is the code

<html>
<body>
<%rec=1%>
<form method="get" name="nuevo<%=rec%>" action="nuevo.asp" target="MyIFrame">
 <a href="#" class="toggleProductos toggleProductos<%=rec%>"> Open / Close </a>
<div style="display:none;text-align:left;">
<%randomize
response.write rnd%>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"  crossorigin="anonymous"></script>
<script>
$(".toggleProductos").on("click",function(){
   const link = $(this);
   const productos = link.next();
   if(productos.is(":visible")) {
       productos.hide();
   } else {
       $.get(location.href).done((page) => { // $.get is a shortuct of $.ajax to... get...
            const newSetOfProductos = $(".toggleProductos:first", page).next();
             productos.replaceWith(newSetOfProductos);
             link.next().show();
       });
   }
});
</script>
</body>
</html>


Open in new window

work for me,original is 5.619448E-02
User generated imageafter click, it display 4.642886E-02 :
User generated image
It does but reloading the page not clicking on the open/close link

https://agendar.com.mx/divrel.asp#​​​

maybe a cache issue, so replace :
$.get(location.href)

Open in new window

by
$.get(location.href.replace(/#/,"?nocache="+new Date().getTime()))

Open in new window

Thx but somthing is not right. Made the change to no avail

$(".toggleProductos").on("click",function(){
   const link = $(this);
   const productos = link.next();
   if(productos.is(":visible")) {
       productos.hide();
   } else {
       $.get(location.href.replace(/#/,"?nocache="+new Date().getTime())).done((page) => { // $.get is a shortuct of $.ajax to... get...
            const newSetOfProductos = $(".toggleProductos:first", page).next();
             productos.replaceWith(newSetOfProductos);
             link.next().show();
       });
   }
});
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial