0

In this HTML Syntax, we are using export button and its icon. I will have to set visible = true or false based on database value IsExport = 0 (or) 1.

What will be the syntax for visible and how to pass the variable value to set to the HTML Tag?

<a class="Resource" href="javascript:void(0)">
                <span class="glyphicon icon-export"></span>
                <span class="i18n">export</span>
            </a>
goofyui
  • 3,362
  • 20
  • 72
  • 128

2 Answers2

1

There is no direct property for setting something like Visible = true/false directly to the HTML tag, what you can use is the hidden property like this:

<a href="#" hidden>

Also, using javascript, you can change that whenever you want

<script>
       $.ajax({
             contentType: 'application/json',
             dataType: 'JSON',
             url: 'someURL',
             type: 'GET',
             success: function (data) {
                        if (data.flagFromDataBase === 1) {
                           document.querySelector('.Resource').style.visibility = "hidden"
                        } else {
                           document.querySelector('.Resource').style.visibility = "visible"
                        }
             },
             failed: function () {
                console.log('Something went wrong :(';              
             }
        });  
</script>

Or if you want to disable/enable the button but keeping visible, you can use this instead of document.querySelector().style, use this:

if(data.flagFromDataBase === 1) {
   $('#myButton').prop('disabled', true);
} else {
   $('#myButton').prop('disabled', false);
}
Andres2142
  • 2,622
  • 2
  • 14
  • 19
  • Andres, how are you setting the script to visible or not ? Does this script takes input parameter value to validate. Basically, we are passing @IsVisible boolean flag from Database to the Front End .. , based on 0 or 1 , we enable / disable the button – goofyui Jul 09 '19 at 16:35
  • you can set visible or hidden the button depending on the answer you get from the database, in this case, if flagFromDataBase (@isVisible) is 1 then set it to hidden, otherwise, visible. – Andres2142 Jul 09 '19 at 17:37
  • Thanks but where you are passing the variable @isVisible .. I see the syntax .. data.flagFromDataBase == 1 , But how this syntax is getting populated.. – goofyui Jul 09 '19 at 17:40
  • What programming language are you using in your backend? – Andres2142 Jul 09 '19 at 17:43
  • We use JavaScript ( Knockout.JS ) to interact with HTML – goofyui Jul 09 '19 at 17:43
  • In the url ajax call, you specify the controller class (MyController.cs) and from there, you can access and retrieve the answer from the database. – Andres2142 Jul 09 '19 at 17:46
  • Okay, i will work on that .. will keep you updated on how the data is retrieved .. – goofyui Jul 09 '19 at 17:47
  • I am trying to understand, where exactly you are trying to use the hidden attribute – goofyui Jul 11 '19 at 14:26
0

Don't clearly know how you get the data from the server, but I know there is a way to hide controls in CSS. If you want to do it with HTML do this:

<html>
  <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery1.4/jquery.min.js"></script>
     <script>
         function showButtons () { $('#b1).show(); }
     </script>
     <style type="text/css">
          #b1 {
               display: none;
          }
     </style>
 </head>
 <body>
    <a href="#" onclick="showButtons();">Show me the money!</a>
    <input type="submit" id="b1" value="B1" />
 </body>
</html>

Credit goes to: hidden property of button in html. The #b1, #b2 and #b3 are the buttons, which in your case is only one, so you can modify that(I already did that for you). Hope it helps!

Andres2142
  • 2,622
  • 2
  • 14
  • 19