Solved

JQuery Debug

Posted on 2014-03-21
19
441 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
  • 10
  • 7
  • 2
19 Comments
 
LVL 28

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 28

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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now