Jump to content

Applying JS effect to virtual submit field


Recommended Posts

I am trying to allow for this JQuery tag affect to occur when the user types in to the text area in the virtual field of my submission form but have not been successful.  Disclosure: Since I am new to Javascript, I was wondering if I am referencing the JQuery and Tag-It components properly?  I attempted switching the id/class element with "cbParamVirtual1" and "caspioform" but no luck.  I would appreciate anyone's feedback.

(This is in the footer of the datapage.)

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/js/tag-it.js" type="text/javascript" charset="utf-8"></script>

<script language="JavaScript">
        $(function(){

            //-------------------------------
            // Single field
            //-------------------------------
            $('cbParamVirtual1').tagit({
                // This will make Tag-it submit a single form value, as a comma-delimited field.
                singleField: true,
    singleFieldDelimiter: ',',
                singleFieldNode: $('#mySingleField')
            });
            
        });

</script>

Link to comment
Share on other sites

  • 3 months later...

Hello @davidpiter98,

 

I have tested this on my end, and it seems that we cannot make tagit work with the instructions in the documentation.

Just to set the expectation here to everyone who might read this post, I am and will be referring to tag-it from this link: http://aehlke.github.io/tag-it/

 

To make this work, we would need:

1.) Caspio DataPage (obviously)

2.) Webserver

3.) Little knowledge with HTML (selectors) and JavaScript

 

== Technical Part, you may skip this section ==

Turns out, we can never make this work if we haven't seen Caspio 13.0 Impacted Areas.

With asynchronous deployment, even $(document).ready() cannot wait for the DataPage to load, so we should use the custom DataPageReady event

====

 

Setting this up:

1.) Download the source code from github (Clone or download > Download ZIP), extract the folder, upload in WebServer.

2.) You don't have to do custom coding in your Caspio DataPage to make tag-it work. It is better if we remove all the codes in there that is related to tag-it. (UPDATE: You may try to put #4 in a Footer block. Not tested but it might work).

3.) Add this code block in the <head> part of your HTML Document. (Do note that you might need to update your href if you put the source files inside a folder)

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">
<!-- Your href should be "tagit/css/jquery.tagit.css" if you happen to put the source inside a folder named 'tagit' !-->

4.) Add this tag-it code blocks just before the closing body tag </body>. Inside the DataPageReady event, you can now specify which field you wanted to make a tag-it.

Your HTML document's body, then, should look something like

<body>

... DataPage Embed deployment goes Here ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script>
  document.addEventListener('DataPageReady', function (event) {

      $("#cbParamVirtual1").tagit({
          fieldName: "skills"
      });

  });
</script>

</body>

 

The Caspio  common input fields id attribute naming convention are as follows:

Virtual Parameters: 'cbParamVirtual' + virtualFieldNumber

SubmissionForm DataPage Field Inputs: 'InsertRecord' + tableFieldName

Details DataPage / Report DataPage Drilldown Details: 'EditRecord' + tableFieldName

 

I really hope this helps.

DN31337

Edited by DefinitelyNot31337
Wrong selector. Thought it might work the other way as opposed to what I've said.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...