Applying JS effect to virtual submit field

davidpiter98 · April 12, 2018

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.)

<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>

//-------------------------------
// 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>

DefinitelyNot31337 · August 6, 2018

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 August 6, 2018 by DefinitelyNot31337
Wrong selector. Thought it might work the other way as opposed to what I've said.

Login

Applying JS effect to virtual submit field

Recommended Posts

davidpiter98

Link to comment

Share on other sites

DefinitelyNot31337

Link to comment

Share on other sites

Join the conversation

Browse