Apex Code Development You need to sign in to do that
Don't have an account?
Kevinsan visualforce page with jquery hide
Dear all,
the following code, when click Table button, "Table2" text will be disappeared, but "Table2" text will appear a moment later.
whats wrong? pls help.
the following code, when click Table button, "Table2" text will be disappeared, but "Table2" text will appear a moment later.
whats wrong? pls help.
<apex:page sidebar="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b1").click(function(){
$("#t1").show();
$("#t2").hide();
});
$(".b2").click(function(){
$("#t1").hide();
$("#t2").show();
});
});
</script>
<apex:form>
<button class="b1">
Table1
</button>
<button class="b2">
Table2
</button>
<div id="t1">
Table1
</div>
<div id="t2">
Table2
</div>
</apex:form>
</apex:page>
The reason your table value appears again is because the type of a <button> tag in is submit by default, so when used inside in an form tag. So when you click the button, the form gets submitted assuming that there is action to handle the form submission. And the page gets reloaded. That's why that table value appears again.
There are multiple ways to stop this from happening.
1. The one which Ajay suggested, in that the form tag is removed. So the page doesn't get submitted on the button click.
2. The one which I suggested, i.e, using <input type="button">. This also avoids the automatic submission of form.
3. There is on other way which is discovered. In the click function of your javascript add 'return false;' right before the function ends. This will also stop the auto submission of form/page.
I hope this gives you some clarity.
Thanks!
All Answers
Please try the below code. You were using <apex:form> that's why u were facing this problem.
<apex:page sidebar="false">
<button class="b1">
Table1
</button>
<button class="b2">
Table2
</button>
<div id="t1">
Table1
</div>
<div id="t2">
Table2
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$("#t1").show();
$("#t2").hide();
});
$(".b2").click(function(){
$("#t1").hide();
$("#t2").show();
});
});
</script>
</apex:page>
Please select it Best Answer if you find it helpful.
Thank You
Ajay Dubedi
Try this Code:
<apex:page sidebar="false" docType="HTML-5.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".b1").click(function(){ $("#t1").show(); $("#t2").hide(); }); $(".b2").click(function(){ $("#t1").hide(); $("#t2").show(); }); }); </script> <apex:form> <!--button class="b1"> Table1 </button> <button class="b2"> Table2 </button--> <input type="button" value="Table1" class="b1"/> <input type="button" value="Table2" class="b2"/> <div id="t1"> Table1 </div> <div id="t2"> Table2 </div> </apex:form> </apex:page>Let me know if it helps
thanks!
Thank you!
why cannot apex:form?
Thank you!
Why using <button>tag cannot go well?
apex:form. A section of a Visualforce page that allows users to enter input and then submit it with an <apex:commandButton> or <apex:commandLink>
The link below can help you better :
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_form.htm
Thank you
The reason your table value appears again is because the type of a <button> tag in is submit by default, so when used inside in an form tag. So when you click the button, the form gets submitted assuming that there is action to handle the form submission. And the page gets reloaded. That's why that table value appears again.
There are multiple ways to stop this from happening.
1. The one which Ajay suggested, in that the form tag is removed. So the page doesn't get submitted on the button click.
2. The one which I suggested, i.e, using <input type="button">. This also avoids the automatic submission of form.
3. There is on other way which is discovered. In the click function of your javascript add 'return false;' right before the function ends. This will also stop the auto submission of form/page.
I hope this gives you some clarity.
Thanks!
Very clear explanation.