CSS not applying on first click of submit with jQuery.post and then not updating on subsequent clicks

Question

I'm at a loss here guys and I need your help.

I have a website where you can submit story urls to a database. When you click the submit button, a jquery post request is set calls my php which then returns a json object and inside there is a boolean to indicate if it was successful or not.

Then depending on the success of the php, the submit button uses some fancy css transforms to indicate to the user the status of their submission.

I would make a jfiddle for you guys to see but I'm not sure how to emulate the php sending back the request since this website is only on my local machine.

This is the jquery:

function applySubmitFeedback(activatedClass) {
    $('#submit').click(function() {
        var self = this;
        $(this).addClass(activatedClass);
        setTimeout(function() {
            $(self).removeClass(activatedClass);
        }, 1000);
    });
}

$(document).ready(function() {
    $('form').submit(function(event) {

        event.preventDefault();

        var $form = $(this), 
            term = $form.find("input[name='url']").val(),
            url = $form.attr("action");

        $.post( url, { story_url:term }, function(data) {
            if (!data.success) {
                console.log("failed");
                if (typeof data.message == 'json' && data.message.hasOwnProperty("url"))
                    console.log(data.message.url);
                else
                    console.log(data.message)
                applySubmitFeedback('btn-error3d');
            else {
                console.log("success");
                applySubmitFeedback('btn-success3d');
            }
            console.log(data);
        }, "json");
    });
});

And this is the fancy css:

.btn-8g {
    background: #fff;
    color: #999;
}

.btn-8g:active {
    background: #fff;
}

.btn-8g:after,
.btn-8g:before {
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    line-height: 70px;
}

.btn-8g:after {
    top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
    background: #7aca7c;
    color: #358337;
    content: 'It worked!';
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(90deg);
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(90deg);
    -ms-transform-origin: 0% 100%;
    -ms-transform: rotateX(90deg);
    transform-origin: 0% 100%;
    transform: rotateX(90deg);
}

.btn-8g:before {
    top: 100%;
    background: #e96a6a;
    color: #a33a3a;
    content: 'Error!';
    font-weight: 700;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-90deg);
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-90deg);
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);
}

.btn-8g.btn-success3d {
    background: #aaa;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotateX(-90deg) translateY(100%);
    -moz-transform-origin: 50% 100%;
    -moz-transform: rotateX(-90deg) translateY(100%);
    -ms-transform-origin: 50% 100%;
    -ms-transform: rotateX(-90deg) translateY(100%);
    transform-origin: 50% 100%;
    transform: rotateX(-90deg) translateY(100%);
}

.btn-8g.btn-error3d  {
    background: #aaa;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: rotateX(90deg) translateY(-100%);
    -moz-transform-origin: 50% 0%;
    -moz-transform: rotateX(90deg) translateY(-100%);
    -ms-transform-origin: 50% 0%;
    -ms-transform: rotateX(90deg) translateY(-100%);
    transform-origin: 50% 0%;
    transform: rotateX(90deg) translateY(-100%);
}

My problem is that the css seems to get stuck when I click the submit button the first time and doesn't activate until subsequent clicks. In addition, if the I send valid data first then on the second click the "It works" css fires.

However if I then send bad data, the "It works" css fires once more and then the "Error" data fires. After that no matter what I do it only fires the "Error" css even though I can verify in the console logs, and the chrome js debugger that it enters the else condition of the 'if(!data.success)' block, meaning it's supposed to fire the 'applySubmitFeedback('btn-success3d');' but it still fires as if it was an error.

It feels like there is a caching problem at work here or functions don't work in jquery like I thought they did. Please help me.

Ross Brasseaux · Accepted Answer · 2015-02-16 10:34:25Z

1

Looks to me like you aren't actually adding any classes on the first click...just adding the click-event that will add classes on subsequent events.

function applySubmitFeedback(activatedClass) {
    $('#submit').click(function() { // <--- this click event isn't bound until you click submit at least once
        var self = this;
        $(this).addClass(activatedClass); 
        setTimeout(function() {
            $(self).removeClass(activatedClass);
        }, 1000);
    });
}

I think the question is: where are you getting your 'activatedClass' variable prior to the completion of $.post()? When you're ajax finishes, you're script tells the button to do a specific function the next time someone clicks it. You can't know the activated class until you run the ajax. The solution might be to either (1) remove the activatedClass parameter from the click event, or (2) create a default activatedClass value.

edited Feb 16, 2015 at 10:34

answered Feb 16, 2015 at 9:21

Ross Brasseaux

4,1792 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Samuel Over a year ago

oh wow, I didn't know that. I had always assumed that the click event added automatically because of that. How would I add the click event ahead of time?

Ross Brasseaux Over a year ago

I edited my answer. That's all I can think of right now. Gotta crash though. Good luck.

Samuel Over a year ago

The issue I see is that the button is supposed to inform the user of that session, not the previous session. How does making a default parameter or removing the parameter help?

Ross Brasseaux Over a year ago

I didn't know if you wanted the button to inform the user of the previous session. I was trying to maintain your program's function.

Ross Brasseaux Over a year ago

I normally program in ASP.net webforms, so I've never used .submit(). What is the difference between .submit(function(){ }) and $('#submit').click(function(){ })? Essentially, don't they do the same thing? They both bind a function to the submission of the form? Or at least one binds the function to the submission of the form and the other binds the function to the action that causes the submission of the form.

|

Collectives™ on Stack Overflow

CSS not applying on first click of submit with jQuery.post and then not updating on subsequent clicks

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related