Solved

JQuery Debug

Posted on 2014-03-21
19
479 Views
Last Modified: 2014-03-22
I need a little help with JSFiddle.  How do you turn on DeBug?  Please go here to see:
http://jsfiddle.net/aV3q3/6/
0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 7
  • 2
19 Comments
 
LVL 29

Expert Comment

by:sammySeltzer
ID: 39945800
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
 
LVL 7

Author Comment

by:rgranlund
ID: 39945831
Can you look at JSFiddle and help me understand what I'm doing wrong?
0
 
LVL 29

Expert Comment

by:sammySeltzer
ID: 39945896
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Author Comment

by:rgranlund
ID: 39945916
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39946033
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
 
LVL 7

Author Comment

by:rgranlund
ID: 39946132
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
 
LVL 58

Expert Comment

by:Gary
ID: 39946147
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
 
LVL 7

Author Comment

by:rgranlund
ID: 39946167
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
 
LVL 58

Expert Comment

by:Gary
ID: 39946189
Attach your code.
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39946256
<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
 
LVL 58

Expert Comment

by:Gary
ID: 39946273
It would only stop the page if the radio is button is selected and the input is empty, else the page will submit.
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39946287
When I run it and choose the radio button, it does not stop in.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39946306
Attach your full page, not just the jquery
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39946324
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
 
LVL 58

Expert Comment

by:Gary
ID: 39946332
You didn't say you were using WP

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

to
jQuery(document).ready(function($) {
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39946385
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
 
LVL 58

Expert Comment

by:Gary
ID: 39946642
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
 
LVL 7

Author Comment

by:rgranlund
ID: 39947868
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
 
LVL 7

Author Closing Comment

by:rgranlund
ID: 39947877
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question