1

I've this snippet of code, pretty working. But trying to delete the comments between <apex:form> , I notice an unexpected behaviour : the page reloads when I click any button, making it impossible to use the form tag . Can anyone explain why? (my final wish would be to have some apex:commandButton> , that needs to be into an apex:form)

    <apex:page >    
        <style>
            .test {color:red}
            #change_me {
            position: absolute;
            top: 100px;
            left: 400px;
            font: 24px arial;}
            #move_up #move_down {
            padding: 5px;}
        </style>

        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
        <script>
        j$ = jQuery.noConflict();
        j$(document).ready(function() {         
            j$("#move_down").click( function() {
                j$("#change_me").animate({top:300},2000);
            });
            j$("#move_up").click(function(){
                j$("#change_me").animate({top:100},2000);
            });
        });
        </script>

    <!-- <apex:form>    -->
            <apex:pageBlock id="theBlock">
                <button id="move_down">Move Down</button>
                <button id="move_up">Move Up</button>
                <div id="change_me"><span class="test">TEST</span></div>                
            </apex:pageBlock>   
    <!-- </apex:form>  -->
</apex:page>
Improve this question

2 Answers 2

Reset to default
1

Instead of using <button> use <input type="button"> instead. If you are using chrome and right click -> inspect element you will notice an error when you have the button. This error messes with your form tag. On a different browser there are similar ways to inspect.

Improve this answer
6
  • mm..indeed I'd like to use apex:commandButton (optionally more buttons into a pageblockButtons) , that needs to be child of an apex:form. So, trying to delete <button> and adding apex:form and commandButton, the problem still remains. Do you agree?
    – user9959
    Commented Dec 18, 2014 at 15:17
  • 1
    @ToninoTripodi I think you misinterpret my answer. The problem should not remain if you are using a commandButton/apex:form. It actually becomes a different problem with a different solution at that point. Have you tried with an apex:commandButton? I know it's not going to give you the expected result because your JQuery won't ever find your command button according to Id. If you inspect the commandButton you will notice that it prepends a bunch of characters in front of the Id. You should have your jQuery bind by class instead of Id at that point.
    – dphil
    Commented Dec 18, 2014 at 15:21
  • 1
    @ToninoTripodi Inspecting element will save you a lot of trouble if that's the first thing you do anytime you run into something funny.
    – dphil
    Commented Dec 18, 2014 at 15:22
  • @ dphil , got it.. So you're right saying that this become a different problem, that can be solved binding by class. So thank you!
    – user9959
    Commented Dec 18, 2014 at 15:29
  • 1
    @ToninoTripodi Np, that isn't to say you might not run into other issues, but those are the ones I know of. Dominics point may be valid as well, I have no idea if it is or not. I just addressed the pain points I often encountered when using jQuery with Visualforce.
    – dphil
    Commented Dec 18, 2014 at 15:41
1

When the HTML button appears within a form, it is by default a submit button. To prevent it submitting, return false from your click handler.

<script>
        j$ = jQuery.noConflict();
        j$(document).ready(function() {         
            j$("#move_down").click( function() {
                j$("#change_me").animate({top:300},2000);
                return false;
            });
            j$("#move_up").click(function(){
                j$("#change_me").animate({top:100},2000);
                return false;
            });
        });
</script>
Improve this answer

You must log in to answer this question.