.removeClass not functioning within .replaceWith

Question

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."

Here is the code:

 <script type="text/javascript">
    $(document).ready(function(){
        var webform = document.getElementById('block-webform-client-block-18');
        var unmarriedbutton = document.getElementById('unmarried');
        var buyingblock = document.getElementById('block-block-10');

        $(unmarriedbutton).click(function () {
            $(buyingblock).fadeOut('slow', function() {
                $(this).replaceWith(function () {
                    $(webform).removeClass('hiddenbox')
                });
            });
        });
    });
    </script>

The CSS on 'hiddenbox' is nothing more than "display: none.'

There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.

Can someone please tell me where the error is? Thanks!

Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

Just out of curiosity..does it work if you add a `;` after that line? — Alex W, Feb 09 '13 at 04:19
@iliacholy http://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript — Alex W, Feb 09 '13 at 04:21
@AlexW it does not. I have made the change on the link that I added on the edit and the problem still persists. — Darthfuzzy, Feb 09 '13 at 04:26
@AlexW the only time semicolon insertion would mess up a return is if you tried to do something like [this](http://pastebin.com/K3LDU47y) — Ilia Choly, Feb 09 '13 at 04:29

score 1 · Answer 1 · answered Feb 09 '13 at 04:17

1

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.

I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:

$(this).replaceWith(function () {
       return($(webform).removeClass('hiddenbox'));
});

answered Feb 09 '13 at 04:17

jfriend00

683,504
96
985
979

Maybe I'm using the wrong function then, however here is the actual site: http://drjohncurtis.com/happily-un-married. If you click the "DOWNLOAD THE BOOK!" it should return a with the div#block-webform-client-block-18 and it does, it just remains hidden (and that's after I used your solution). – Darthfuzzy Feb 09 '13 at 04:22
I made the change on the site with the return and it still does not work -- it still remains empty. – Darthfuzzy Feb 09 '13 at 04:28
it is `$(document.getElementById('block-webform-client-block-18')` that's creating the bug – mikakun Feb 09 '13 at 04:30
@mikakun I don't think so. – Ilia Choly Feb 09 '13 at 04:36
It's not that creating the bug. I changed the var webform like you suggested and the the first function failed. – Darthfuzzy Feb 09 '13 at 04:38

mikakun · Accepted Answer · 2013-02-09T04:47:43.477

-2

NB, use jquery !

    var webform = $('#block-webform-client-block-18');
    var unmarriedbutton = $('#unmarried');
    var buyingblock =$('#block-block-10');
    unmarriedbutton.click(function () {
        buyingblock.fadeOut('slow', function() {
            $(this).replaceWith( webform.removeClass('hiddenbox'));

        });
    });

Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

edited Feb 09 '13 at 04:47

answered Feb 09 '13 at 04:16

mikakun

2,203
2
16
24

`replaceWith()` doesn't do anything if you pass it a function and don't return anything from the function. – jfriend00 Feb 09 '13 at 04:20
I used this exactly and the entire document failed. It wouldn't recognize any of the selectors. – Darthfuzzy Feb 09 '13 at 04:34
u of unmarried was missing... @Darthfuzzy – mikakun Feb 09 '13 at 04:40
@mikakun There was no console error, but the button wouldn't initiate the first step. In other words, with that solution, clicking the button didn't do anything. – Darthfuzzy Feb 09 '13 at 04:41
@mikakun That did it! I'd upvote it but I don't have 15 rep to do it D: So thanks for the help! – Darthfuzzy Feb 09 '13 at 04:42

.removeClass not functioning within .replaceWith

2 Answers2