We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered How can I add jQuery to MODx?

    • 46950
    • 86 Posts
    zwhzwh Reply #1, 12 years ago
    I've made an attempt to repeat this example: http://numberfiveone.com/modx-tutorial-formit-with-jquery-validation#quip-comment-preview-box-qcom But I don't understand whether validate-form.js must be a seperate file and if so, where should I put it in?

    This question has been answered by zwhzwh. See the first response.

      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 12 years ago
      Put it wherever you want, for example in assets/js/, then link to it in your template like
      <script src="assets/js/validate_form.js"></script>


      Really, MODX doesn't care where you put your supporting files, images, .js, .css. Just link to them properly as you would for any HTML document. The only thing you need to remember is that the site's relative path is relative to your index.php file, while .css and javascript relative paths are more likely relative to the actual .css or .js file.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 46886
        • 1,154 Posts
        nuan88 Reply #3, 12 years ago
        assets/js/ would be the typical place to put it. And the code Susan provides goes within the <head> section of your template.

        That's a cool tutorial. I had to take my contact form down because of validation concerns, might have to look into this.

        Validation here means confirming the sending of the info, right? And presumably an error report if not, containing the same info.
          • 46950
          • 86 Posts
          zwhzwh Reply #4, 12 years ago
          So, it should be created in Files, not in Elements? Thanks, it was not quite clear for a newbie.
            • 46886
            • 1,154 Posts
            nuan88 Reply #5, 12 years ago
            Heh no worries, I am not a high level guy so I still think like a newbie smiley

            Yes, all the java, css, and images normally will go in the Files section.

            The templates themselves, the html files, are in Elements, which has the templates, snippets and chunks (and tvs, which are still a mystery to me). The templates will call to the css files, java and images as we discussed above.

            And Resources are pages of contents and the place we put key things like snippet calls that use those snippets to do stuff. For instance, I have the login snippet in a resource so that I can call to it in a template and the login will appear.

            Any more questions, ask away!
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              sottwell Reply #6, 12 years ago
              Template Variables are nothing more than custom fields for resources. They are attached to templates simply as a convenient way to limit the resources that will have these extended fields. All resources that use the template a TV is assigned to will have the extra fields in their Template Variables tab (unless permissions and Form Customization is in play).

              That's why the regular resource fields (pagetitle, longtitle, content, etc) and TVs use the same MODX tags for output.

              The regular resource fields can be seen in the site_content table, while TVs use four tables:

              site_tmplvars - the TV definitions
              site_tmplvar_contentvalues - the TV values for each resource
              site_tmplvar_templates - which templates the TVs are connected to
              site_tmplvar_access - any resource groups the TVs are limited to

              When defining a TV, you specify what kind of form field will be added to the resource's TV tab. There are also optional output formatters for automatically structuring the output of a TV value, for example an image-type input field will allow the resource editor to use the file browser to upload and select image files, and the corresponding image-type output formatter will generate a basic HTML img tag to enclose the TV's content, which is just the path to the image file.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 3749
                • 24,544 Posts
                BobRay Reply #7, 12 years ago
                FYI, there's a full list of the regular Resource fields here: http://bobsguides.com/modx-object-quick-reference.html#modResource.
                  Did I help you? Buy me a beer
                  Get my Book: MODX:The Official Guide
                  MODX info for everyone: http://bobsguides.com/modx.html
                  My MODX Extras
                  Bob's Guides is now hosted at A2 MODX Hosting
                  • 46950
                  • 86 Posts
                  zwhzwh Reply #8, 12 years ago
                  I added to the header:
                  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

                  After the header I added the ref to the file with jQuery fuction that should check the form content:

                  [[$dels-header]]
                  <script src="assets/validate_form.js"></script>

                  But jQuery still refuses checking the data I put in sad
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    sottwell Reply #9, 12 years ago
                    Are you sure that is the correct path to the validate_form.js file? You can test it by putting something like
                    alert ('In validate_form');

                    to the top of the validate_form.js file; this should pop up a Javascript message alert saying "In validate_form" when the page is loaded.
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 46886
                      • 1,154 Posts
                      nuan88 Reply #10, 12 years ago
                      Are you sure you didn't put it into assets/js/validate_form.js rather than just assets/validate_form.js?