[ Bootstrap ] How can i get specific info card clicked ?

[skinkairewalker]

hello everyone !!

i am trying to get an specific card with some identifier like this screenshot :

https://imgur.com/a/GBBcZOJ

code :

Code: Select all

ExamineDesktops()
Global deskwidth.i = DesktopWidth(0)
Global deskheight.i = DesktopHeight(0)

Procedure OnResize()
  
  ExamineDesktops()
  deskwidth = DesktopWidth(0)
  deskheight = DesktopHeight(0)
  
  Debug "Resized W : " + Str(deskwidth)
  Debug "Resized H : " + Str(deskheight)
  
  ResizeWindow(0,#PB_Ignore,#PB_Ignore,deskwidth,deskheight)
  ResizeGadget(0,#PB_Ignore,#PB_Ignore,deskwidth,deskheight)
  
EndProcedure

Procedure AppendBody(content.s)
  !$("body").append(v_content);
EndProcedure

; Procedure AppendContent(component.i,content.s)
;     GID = GadgetID(component)
;     ! $(v_gid.div).append(v_content);
; EndProcedure

Procedure AppendContent(component.i,content.s, Position = #PB_Ignore)
  GID = GadgetID(component)
  If Position <> #PB_Ignore
    ! $(".card:eq(" + v_position + ")").prepend(v_content);
  Else
    ! $(v_gid.div).append(v_content);
  EndIf
EndProcedure

Procedure teste()
  Debug "asdas"
 AppendContent(0,"<div class='card' style='width: 18rem;'>" +
                  " <img class='card-img-top' src='https://baladapp.s3.amazonaws.com/evento/15735/foto_evento/34ff6d57e87b8b8db0ad9691a8f086c1.jpg' alt='Imagem de capa do card'>" +
                  " <div class='card-body'>" +
                  "   <h5 class='card-title'>0Título do card</h5>" +
                  "   <p class='card-text'>heuheheuheuheuheuheu </p>" +
                  "   <a href='#' class='btn btn-primary' onclick='f_teste()'>Visitar</a>" +
                  " </div>" +
                  "</div>", 0)
EndProcedure  

Procedure Main()
  
  OpenWindow(0, 0, 0, 600, 600, "",#PB_Window_Background)
  
  ScrollAreaGadget(0, 0, 0, deskwidth, deskheight,600,600) : CloseGadgetList()
  
  AppendContent(0,"<nav class='navbar navbar-expand-lg navbar-light bg-light'>"+
  "<a class='navbar-brand' href='#'>Navbar</a>"+
  "<button class='navbar-toggler' type='button' Data-toggle='collapse' Data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Alterna navegação'>"+
  "  <span class='navbar-toggler-icon'></span>"+
  "</button>"+
  "<div class='collapse navbar-collapse' id='navbarNavDropdown'>"+
  "  <ul class='navbar-nav'>"+
  "    <li class='nav-item active'>"+
  "      <a class='nav-link' href='#'>Home <span class='sr-only'>(Página atual)</span></a>"+
  "    </li>"+
  "    <li class='nav-item'>"+
  "      <a class='nav-link' href='#'>Destaques</a>"+
  "    </li>"+
  "    <li class='nav-item'>"+
  "      <a class='nav-link' href='#'>Preços</a>"+
  "    </li>"+
  "    <li class='nav-item dropdown'>"+
  "      <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownMenuLink' role='button' Data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>"+

  "      Link dropdown"+
  "      </a>"+
  "      <div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'>"+
  "        <a class='dropdown-item' href='#'>Ação</a>"+
  "        <a class='dropdown-item' href='#'>Outra ação</a>"+
  "        <a class='dropdown-item' href='#'>Algo mais aqui</a>"+
  "      </div>"+
  "    </li>"+
  "  </ul>"+
  "</div>"+
"</nav>") 
  
  tmp$ = ""
  
  For i = 0 To 5
    
    tmp$ = tmp$ + "<div class='card' style='max-width:319px;'>" +
    " <img class='card-img-top' src='https://baladapp.s3.amazonaws.com/evento/15669/foto_evento/8fb1a4785ebf2f94ec8349a92e73790b.jpg' alt='Imagem de capa do card'> "+       
    "<div class='card-block text-center'>" +
    "		<h4 class='card-title'>id = "+Str(Random(99999,1))+"</h4>" +
    "		<p class='card-text'>My Example</p> " +
    "		<a href='http://mysite.com' class='btn btn-success'>Button</a>" +
    "	</div>" +
    "	</div>" +
    " "
    
  Next i
  
  For i = 0 To 5
    
    tmp$ = tmp$ + "<div class='card' style='max-width:319px;'>" +
    " <img class='card-img-top' src='https://baladapp.s3.amazonaws.com/evento/15644/foto_evento/ef1e667cf697899be9b1424a1e2e14df.jpg' alt='Imagem de capa do card'> "+       
    "<div class='card-block text-center'>" +
    "		<h4 class='card-title'>id = "+Str(Random(99999,1))+"</h4>" +
    "		<p class='card-text'>My Example</p> " +
    "		<a href='http://mysite.com' class='btn btn-success'>Button</a>" +
    "	</div>" +
    "	</div>" +
    " "
    
  Next i  
  
  ;https://baladapp.s3.amazonaws.com/evento/15644/foto_evento/ef1e667cf697899be9b1424a1e2e14df.jpg
  
  AppendContent(0,"<div class='container'> " + 
      "<div class='row'> " + 
      "  <div class='col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 red'> " + 
      "    Hello world " + 
      "  </div> " + 

      "  <div class='col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 green'> " + 
      "    Hello world " + 
      "  </div> " + 

      "  <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'> " + 
      "  	<br /> " + 

      "  	<div class='card-columns'>" +

        tmp$ +
      
      " </div> " +
     " </div> " +
    "</div>") 

  
EndProcedure

Procedure init(URL$, Success)
    Debug "Script URL: " + URL$
    Debug "Loading status: " + Success
    
    ! $("<link rel='stylesheet' type='text/css'>").attr("href", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css").appendTo("head");

    ! require(["https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"], function() {
    Main()
    ! });
    
EndProcedure

BindEvent(#PB_Event_SizeDesktop,@OnResize())

LoadScript("custom.css", @init(), #PB_Script_CSS)

[Peter]

Code: Select all

[...]
    "      <a class='btn btn-success' onClick='f_buttonclick(" + i + ")' >Button</a>" +
[...]

and

Code: Select all

Procedure ButtonClick(index)
  MessageRequester("ButtonClick(" + index + ")")
EndProcedure

[skinkairewalker]

but isn't there a safer way?
because if the user inspects the element, he will be able to see the id inside the function ... right?

[Peter]

because if the user inspects the element, he will be able to see the id inside the function ... right?

yes, the user can see everything you write in SpiderBasic (which is transposed to JavaScript and thus becomes visible in the browser)

but isn't there a safer way?

You could call functions on the server (written in ASP, PHP, CGI...) using HttpRequest.

[skinkairewalker]

thansk you Peter !