• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 603
  • Last Modified:

JQuery Debug

I need a little help with JSFiddle.  How do you turn on DeBug?  Please go here to see:
http://jsfiddle.net/aV3q3/6/
0
rgranlund
Asked:
rgranlund
  • 10
  • 7
  • 2
1 Solution
 
sammySeltzerCommented:
Why not use firebug in firefox?

That's better, I believe.

You use jsfiddle so you can provide a link to someone to help you figure out your issues.
0
 
rgranlundAuthor Commented:
Can you look at JSFiddle and help me understand what I'm doing wrong?
0
 
sammySeltzerCommented:
So, what are trying to do?

It looks like you are missing some additional files because of this error:

ReferenceError: $ is not defined

In other words, looks like you either don't have files such as these:

script src="js/jquery.js" type="text/javascript"></script>
2.<script src="js/jquery-ui.js" type="text/javascript"></script>

or they are at locations your script could not reach.

To be specific, you need to download this jquery.js library and the error will atleast go away.
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
rgranlundAuthor Commented:
http://jsfiddle.net/aV3q3/11/

I did not get that error.  What I am trying to do is:
If you choose the radio button, you must also put in text.
0
 
GaryCommented:
http://jsfiddle.net/GaryC123/aV3q3/28/

Several things wrong, when you put the ID in an element you don't include the # - that is just for Js and CSS
You were missing $ from the object
And you were not checking the checked status correctly
0
 
rgranlundAuthor Commented:
Gary, thanks for your help.  However, when I go to your JSFiddle it does not work.  Am I missing something?
It gives the message:

Forbidden (403)

CSRF verification failed. Request aborted.

More information is available with DEBUG=True.
0
 
GaryCommented:
You cannot do a submit in jsfiddle, it's only for testing code.
And since you are only checking if the radio button is checked and the input filled in it is not going to stop the submit working when they are empty.
0
 
rgranlundAuthor Commented:
I placed the same code on a live page and it did not stop the page.  Does it matter where on the page it is?  Does it matter if there is an action on the form that goes to another page?
0
 
GaryCommented:
Attach your code.
0
 
rgranlundAuthor Commented:
<script>

$(document).ready(function() {
	$('form').submit(function(event) {
        var numberOfFieldWithName = $(":text[edd_purchase_form]");
        var errors_length = 0;
        if( $("#color_picker_sun").is(':checked') && $('#color-picker-comment').val() === '' ) {
                errors_length++;
                $(".alert").show();
            }
            else {
                $(".alert").hide();
            }
        if(errors_length>0) {
            event.preventDefault();
        }
	});
});

</script>

Open in new window

0
 
GaryCommented:
It would only stop the page if the radio is button is selected and the input is empty, else the page will submit.
0
 
rgranlundAuthor Commented:
When I run it and choose the radio button, it does not stop in.
0
 
GaryCommented:
Attach your full page, not just the jquery
0
 
rgranlundAuthor Commented:
Go here:
http://studiohilldesign.com/logoforhire/
scroll down and choose a logo.
On the right, click customize and then click purchase.
On the next page, on the right click customize.
A dialog will open, click on customize color.  Pick the first color SUN
Then go to the bottom and purchase. (it is in a sandbox)
0
 
GaryCommented:
You didn't say you were using WP

Change
$(document).ready(function() {

to
jQuery(document).ready(function($) {
0
 
rgranlundAuthor Commented:
Is this correct?  I still does not stop the script.  Is the 4th line correct   $('form')?
<script type="text/javascript">

jQuery(document).ready(function($) {
	$('form').submit(function(event) {
        var numberOfFieldWithName = $(":text[edd_purchase_form]");
        var errors_length = 0;
        if( $("#color_picker_sun").is(':checked') && $('#color-picker-comment').val() === '' ) {
                errors_length++;
                $(".alert").show();
            }
            else {
                $(".alert").hide();
            }
        if(errors_length>0) {
            event.preventDefault();
        }
	});
});

</script>

Open in new window

0
 
GaryCommented:
Can you fix your fancybox code, it's probably breaking other jquery
You're trying to attach fancybox to an element that doesn't exist.
0
 
rgranlundAuthor Commented:
OK, I fixed all of the script issues.  It was part of the themes JS.  However, it still does not stop when the criteria is not met.  Does it have to do with the placement of the script?  Meaning should it be in the head, body, or footer? Could it be a plugin? Should the script be in the form?
0
 
rgranlundAuthor Commented:
Thanks for taking the time to really explain things to me.  I appreciate it very much! I found where the error was and it did not have anything to do with what I / We were working on.
Thanks again, I learned a lot more about JQuery!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 10
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now