CODEWITHSUNDEEP
javascriptjsphtml
Shantanu Tomar
Shantanu Tomar

Reputation: 1712

Hiding and showing span in HTML

I have a JSP page on which i have some input submit buttons. Now based on some values i get from an AJAX request i want to control the display and hiding of these input buttons. So i have created spans for each input. And based on the variable value i received from AJAX request i manipulate there display property. But i am not getting the results right.

here's my code: 

<td style="width: 600px"><span id="startspan"><input name="start" value="startActivity" type="submit" id="startbuttonid"></span></td>
       <td style="width: 600px"><span id="holdspan"><input name="start" value="holdActivity" type="submit" id="holdbuttonid"></span></td>
       <td style="width: 600px"><span id="cancelspan"><input name="start" value="cancelActivity" type="submit" id="cancelbuttonid"></span></td>
       <td style="width: 600px"><span id="closespan"><input name="start" value="closeActivity" type="submit" id="closebuttonid"></span></td>

And my java script code where i am writing code for display or hiding them is :: 

if(temp1[15]=="InProcess"){
        document.getElementById('startspan').style.display='none';
        document.getElementById('holdspan').style.display = 'block';
        document.getElementById('cancelspan').style.display = 'block';
        document.getElementById('closespan').style.display = 'block';
    }
    if(temp1[15]=="New"){
        document.getElementById('startspan').style.display='block';
        document.getElementById('holdspan').style.display = 'none';
        document.getElementById('cancelspan').style.display = 'block';
        document.getElementById('closespan').style.display = 'none';
    }

here based on variable temp1[15] value which i am receiving fine. I want to display or hide those input submit buttons. I am doing it the right way, like defining span or need some correction. Basically all those input buttons are inside a dialog box <div> which opens up only when a function is triggered inside which i have written my Hiding or showing span code(Written above). Need help. Thanks.

Upvotes: 4

Views: 34222

Answers (2)

AnalogWeapon
AnalogWeapon

Reputation: 548

Since it is working in the fiddle and not in your main code, I suspect that there might be an issue related to your code executing before the DOM is loaded (or the dialog box <div> is generated). You mention that you're using AJAX. Make sure that the code to show or hide the buttons is in the AJAX success callback.

Upvotes: 1

mystery
mystery

Reputation: 19513

The display property in CSS also determines whether it acts like a block (DIV, P, etc), or an inline element (span, b, etc), as well as its visibility.

For your spans you want to do this instead:

document.getElementById('span').style.display = 'inline';

If it was a DIV you would use block, and if it was an IMG you would use inline-block.

Upvotes: 3

Related Questions