Alicia St Rose
asked on
My toggle won't toggle
I've got a jQuery toggle on this page:
http://sandbox.intrepidrealist.com/cazoozsb/test-page/
I'm not sure what's causing it to be dead in the water. It works in the example:
https://codepen.io/derekjp/pen/pPqwXJ
http://sandbox.intrepidrealist.com/cazoozsb/test-page/
I'm not sure what's causing it to be dead in the water. It works in the example:
https://codepen.io/derekjp/pen/pPqwXJ
You have quite a few errors:
Those errors are related to non unique IDs on elements. Every ID you use on an HTML element needs to be unique
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
(index):48 GET http://sandbox.intrepidrealist.com/cazoozsb/js/index.js?ver=4.9.1 net::ERR_ABORTED
(index):1 [DOM] Found 3 elements with non-unique id #_form_args: (More info: https://goo.gl/9p2vKq) <input type="hidden" class="pum-field pum-field-_form_args pum-field-hidden " id="_form_args" name="_form_args" value="{"enable_autologin":"1","disable_redirect":false,"redirect":"http://sandbox.intrepidrealist.com/cazoozsb/getting-started"}"> <input type="hidden" class="pum-field pum-field-_form_args pum-field-hidden " id="_form_args" name="_form_args" value="{"disable_redirect":false,"redirect":"http://sandbox.intrepidrealist.com/cazoozsb/test-page/"}"> <input type="hidden" class="pum-field pum-field-_form_args pum-field-hidden " id="_form_args" name="_form_args" value="{"disable_redirect":false,"redirect":"http://sandbox.intrepidrealist.com/cazoozsb/member-dashboard/"}">
(index):1 [DOM] Found 3 elements with non-unique id #user_login: (More info: https://goo.gl/9p2vKq) <input type="text" placeholder="Username" class="regular-text" id="user_login" name="user_login" value required> <input type="text" placeholder="Username or Email" class="regular-text" id="user_login" name="user_login" value required> <input type="text" placeholder="Username" class="regular-text" id="user_login" name="log" value required>
(index):1 [DOM] Found 2 elements with non-unique id #user_pass: (More info: https://goo.gl/9p2vKq) <input type="password" placeholder="Password" class="regular-text" id="user_pass" name="user_pass" value required> <input type="password" placeholder="Password" class="regular-text" id="user_pass" name="pwd" value required>
(index):1 [DOM] Found 3 elements with non-unique id #wp-submit: (More info: https://goo.gl/9p2vKq) <button type="submit" class="pum-button-regular" id="wp-submit" name="wp-submit">Register</button> <button type="submit" class="pum-button-regular" id="wp-submit" name="wp-submit">Get New Password</button> <button type="submit" class="pum-button-regular" id="wp-submit" name="wp-submit">Log In</button>
favicon.ico:1 GET http://sandbox.intrepidrealist.com/favicon.ico 500 (Internal Server Error)
Those errors are related to non unique IDs on elements. Every ID you use on an HTML element needs to be unique
ASKER
I added that other part in an external file called index.js.
It was one of my attempts at trying to figure this out. Whether I have that portion in the head of the document or not it still didn't work. There was also a place online where I can download the files and I did that in that instance too.
It was one of my attempts at trying to figure this out. Whether I have that portion in the head of the document or not it still didn't work. There was also a place online where I can download the files and I did that in that instance too.
ASKER
Yeah, I saw those errors too. I'll have to do some digging around in a couple of plug-ins that I'm using that seem to be sharing the same IDs.
Also your js file isn't loading: "http://sandbox.intrepidrealist.com/cazoozsb/js/index.js?ver=4.9.1" gives me a 404 Not Found error
I get a 404 when I try to open http://sandbox.intrepidrealist.com/cazoozsb/js/index.js that could be why the javascript is not binding correctly.
You could also try putting the block of javascript just below the html you have placed. When binding a click event if the element does not already exist on the page it could be skipping it. You could also add that block you have into the document.ready to see if that works, to guarantee your html was already rendered on the page.
In regards to Rob & Jeff's comments above. An easy way to see these errors they are reporting to you is by using the developer console in Chrome:
The "Console" and "Network" sections will quickly show you where errors are occurring.
(Just a heads-up in case you weren't aware, since those errors would be the first things I'd check).
The "Console" and "Network" sections will quickly show you where errors are occurring.
(Just a heads-up in case you weren't aware, since those errors would be the first things I'd check).
ASKER
Okay,
I've gotten rid of the external file and added all of the code to the head. Just to get things back to one place.
So, Jeffrey, you're saying I should add this block of code underneath the .member-lessons container?
I've gotten rid of the external file and added all of the code to the head. Just to get things back to one place.
So, Jeffrey, you're saying I should add this block of code underneath the .member-lessons container?
Yes, since the html element does not exist on the page yet. Or like I was saying you could also put that entire blog ck within the document.ready block you already had, which will make that JavaScript not fire until the complete Dom is loaded
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You are a God.
Thank you for the breakdown, too. I LOVE answers that teach.
Until next time!
Thank you for the breakdown, too. I LOVE answers that teach.
Until next time!
You are welcome.
Open in new window
but the example in the codepen has a whole block about
Open in new window
Is that on your page and I am missing it, or is that your problem?