How to identify alpacajs field element is changed or modified? - javascript

I am new to alpacajs. I have alpacajs form and also have save button for alpacajs from. More than that i have previous and next button. I currently plan to develop something like below.
For example if someone come to the alpacajs form page and if they modified some fields in form then without save they can't allow to go previous/ next so i want to disable those button. If they save the form after the modification then they can go previous/ next so i want to enable those button.
How to do this with jquery and in alpacajs?

If you want to save the form data as draft form in your alpaca form you have only to add the Save as draft button next to your submit and put some logic to it.
So alpaca will handle the click event on that button, but not for Previous / Next buttons.
These buttons stays out of alpaca config, and they handle only page navigation.
To add a new button to your alpaca form
"form": {
"buttons": {
"save": {
"title": "Save draft",
"click": function() {
var value = this.getValue();
// call backend service to save the form as draft
$.ajax({
method: "POST",
url: "https://httpbin.org/post", // backend webservice
data: value // form data
})
.done(function(data) {
// check some backend response code or some flag
// with some conditions activate next and previous buttons
$("#previousBtn").prop('disabled', false);
$("#nextBtn").prop('disabled', false);
})
}
},
"submit": {
"click": function() {
var value = this.getValue();
alert(JSON.stringify(value, null, " "));
}
}
}
}
Don't forget to call some other webservice to get the draft data for that form if there's any and initialize alpaca data config like this:
// data initialization - here you can call a service to get draft data for this form
data = {
username: "test"
};
$("#form").alpaca({
"data": data, // draft data if there's any
"schema": {
// alpaca schema config
}
}
Here's a working fiddle for this.

Please, working sample code below. In this, Name and Feeback fields are marked as required and. Bydefault, Name field is filled, Feedback is empty which throws error and Submit button is disabled, As you type something in Feedback field, Submit button got enabled and form is beig allow to submit because all required fields got filled. Similarly, you can handle your form like this.
Hope this helps !!
<html>
<head>
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca#1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
</head>
<body>
<div id="form"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form").alpaca({
"data": {
"name": "Diego Maradona",
"ranking": "excellent"
},
"schema": {
"title": "User Feedback",
"description": "What do you think about Alpaca?",
"type": "object",
"properties": {
"name": {
"type": "string",
"title": "Name",
"required": true
},
"feedback": {
"type": "string",
"title": "Feedback",
"required": true
}
}
},
"options": {
"form": {
"attributes": {
"action": "http://httpbin.org/post",
"method": "post"
},
"buttons": {
"submit": {}
}
},
"fields": {
"name": {
"size": 20,
"helper": "Please enter your name."
},
"feedback": {
"type": "textarea",
"name": "your_feedback",
"rows": 5,
"cols": 40,
"helper": "Please enter your feedback."
}
}
},
"view": "bootstrap-edit"
});
});
</script>
</body>
</html>

Related

Adaptive Cards Input Values in Submit

Hi I'm using the Adaptive card SDK in a web page, using a Sample Card like this:
var card = {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Present a form and submit it back to the originator"
},
{
"type": "Input.Text",
"id": "firstName",
"placeholder": "What is your first name?"
},
{
"type": "Input.Text",
"id": "lastName",
"placeholder": "What is your last name?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Action.Submit"
}
]};
and rendering using the usual rubric. I'd like to get the inputs back with the submit so I tried this
// Set the adaptive card's event handlers. onExecuteAction is invoked
// whenever an action is clicked in the card
adaptiveCard.onExecuteAction = function (action) { console.log(action.toJSON()) }
which just gives me:
Object title: "Action.Submit" type: "Action.Submit" __proto__: Object
How do I get the values of the input fields on the submit action?
TIA for any comments, advice and answers
You can use the data property of the action object just like this:
adaptiveCard.onExecuteAction = function (action) {
alert(`Hello ${action.data.firstName} ${action.data.lastName}`);
}
Here's a full jsfiddle.
There are many other interesting properties on the action object, but I haven't found good documentation.
However, the source code of the adaptive card visualizer contains some usage examples.

Alpaca JS is not properly reordering array checkboxes

I have an Alpaca JS form comprised of an array of items which each consist of a textbox and a checkbox. For some reason, when I change the order using the dynamic controls, it successfully renumbers the textbox but doesn't change the number of the checkbox. This also results in a duplicate name assigned if the same top button to dynamically add new fields is pressed. The end result is incorrect data being passed when the form is submitted. How can I fix this to properly renumber the checkboxes?
Here's a sample of the Alpaca configuration:
$("#form1").alpaca({
"schema": {
"title": "Testing checkbox array IDs",
"description": "Testbox checkbox array test.",
"type": "object",
"properties": {
"form-fields": {
"title": "Fields",
"description": "These are the fields.",
"type": "array",
"items": {
"type": "object",
"properties": {
"field-name": {
"type": "string",
"title": "Field Name",
"description": "Enter the name for this field.",
"required": true
},
"field-box": {
"type": "boolean",
"title": "Field Box",
"description": "Check this box.",
"default": false
}
}
}
}
}
}
});
I couldn't find a way to correct the behavior itself but I was able to work around it by adding a postRender event to the Alpaca definition as follows:
"postRender": function(control) {
control.childrenByPropertyId["form-fields"].on("move", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
control.childrenByPropertyId["form-fields"].on("add", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
control.childrenByPropertyId["form-fields"].on("remove", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
}
This is a bit of a hack but it works because the parent object does get assigned the correct name value and the form will post with those values if the name is just copied down into the input elements.

How to use single json file to consume in alpacajs

I have created a simple form using alpacajs, as per the documentation provided by alpacajs.org we can use properties such as optionsSource, schemaSource, viewSource, dataSource for loading the external json files into our application. But what i need is i need to use only one json file for all these. I mean instead of using all these 3 different properties can i use only one parameter for loading the single json file which comes from the backend. please check my code below..
<html>
<head>
<meta charset="UTF-8">
<title>My Little Alpaca Form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.js"></script>
<!-- typeahead.js https://github.com/twitter/typeahead.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/bloodhound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<link href="//code.cloudcms.com/alpaca/1.5.22/bootstrap/alpaca.min.css" rel="stylesheet" />
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div id="form1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").alpaca({
"dataSource": "/fulfiller/connector-custom-data.json",
"schemaSource": "/fulfiller/connector-custom-schema.json",
"optionsSource": "/fulfiller/connector-custom-options.json",
"viewSource": "/fulfiller/connector-custom-view.json",
"view": {
"parent": "bootstrap-edit",
"layout": {
"template": "threeColumnGridLayout",
"bindings": {
"requestedfor": "column-1",
"location": "column-2",
"shortdescription": "column-3",
"description": "column-3",
}
},
"templates": {
"threeColumnGridLayout": '<div class="row">' + '{{#if options.label}}<h2>{{options.label}}</h2><span></span>{{/if}}' + '{{#if options.helper}}<p>{{options.helper}}</p>{{/if}}' + '<div id="column-1" class="col-md-6"> </div>' + '<div id="column-2" class="col-md-6"> </div>' + '<div id="column-3" class="col-md-12"> </div>' + '<div class="clear"></div>' + '</div>'
}
},
"options": {
"fields": {
"requestedfor": {
"type": "text",
"id": "requestedfor",
"label": "*Requested For",
"typeahead": {
"config": {},
"datasets": {
"type": "remote",
"displayKey": "value",
"templates": {},
"source": "http://www.alpacajs.org/data/tokenfield-ajax1.json"
}
}
},
"location": {
"type": "text",
"label": "*Location"
},
"shortdescription": {
"type": "text",
"label": "Short Description"
},
"description": {
"type": "textarea",
"rows": 5,
"cols": 40,
"label": "Description"
}
},
"form": {
"attributes": {
"action": "#",
"method": "post"
},
"buttons": {
"submit": {
"value": "Submit",
"class": "btn btn-default"
}
}
}
}
});
});
</script>
</body>
</html>
So here in the above code i have used these urls for loading json data..
"dataSource": "/fulfiller/connector-custom-data.json"
"schemaSource": "/fulfiller/connector-custom-schema.json"
"optionsSource": "/fulfiller/connector-custom-options.json"
"viewSource": "/fulfiller/connector-custom-view.json"
So instead of using these 3 different properties can i use only one property like "oneSingleJSONSource": "oneJSONRemoteFile.json"
Can anybody provide inputs?
For Alpaca to be inialized it must have a DOM element + a config object that contains the schema, options and other properties that Alpaca already knew in its core code, so in your case this is possible if you try to modify the alpaca core code... If your objective is only to optimize resource loading you can use only one json file that contains all the configuration and input them in the alpaca initialization $(dom).alpaca(_json_data_from_loaded_file). And if you want to have only schema, options and view settings in on file you should divide the data loaded to 3 objects, 1 for schema, 1 for options and the last one for view settings.
Tell me if you want more details on achieving this.
I'll be glad to help.

Resetting form with token field on alpaca.js

I have spent a couple of hours trying to figure out how to properly reset a form with token field on alpaca.js.
Not sure if this is a bug, or I am doing something wrong. I placed two reset buttons, a generic one and a second one that calls a function to reset the form.
<script type="text/javascript">
var value = {};
$("#myform").alpaca({
"schema": {
"title": "token field",
"type": "object",
"properties": {
"text_field": {"type": "text" },
"token_field": { "type": "token"},
}
},
"options": {
"fields": {
"text_field": {
"label": 'this is a text field',
"type": "text"
},
"token_field": {
"label": 'this is a token field',
"type": "token",
"tokenfield": {
},
},
},
"form": {
"buttons": {
"load": {
label:"load saved values",
"click": function() {
$('form#' + this.attributes.id)[0].reset();
this.setValue(value);
},
},
"reset": {},
"fancy_reset": {
"label": "reset with function",
"click": function() {
console.log(this.attributes.id);
$('form#' + this.attributes.id)[0].reset();
},
},
"save": {
label:"save",
"click":function(){
value = this.getValue();
console.log(this.getValue());
console.log(value);
},
},
},
},
},
});
</script>
Any insights on whats wrong here?
I've been working with Alpaca for year but I haven't use that type of and after some research I haven't found any solution in the Alpaca lib to reset that type of field, so I tried to use jquery and bootstrap tokenizer methods.
and I've came to this solution :
Create an eventlistener to the reset form event
$('form').on('reset', function(e) {
var control = $("#myform").alpaca("get");
var field = control.childrenByPropertyId['token_field'];
field.refresh();
});
In your load function after this.setValue(value) add this code:
if (typeof value.token_field != undefined) {
// getting Alpaca parent control (this holds everything)
var control = $("#myform").alpaca("get");
// get the token field
var field = control.childrenByPropertyId['token_field'];
// setting the saved token to the field using bs-tokenizer method setTokens
$(field.control).tokenfield('setTokens', value.token_field);
}
Here's a fiddle for that.
Tell me if you still have any issue.

Alpaca form submission, stay on same page

I am building a form with PHP and ALPCA (jquery,ajax). I am having trouble with file submitting and staying on the same page. I have tried the recommended techniques for doing as such with AJAX event.preventDefault();, also using hidden frame but with no success. My question is does the ALPACA package require a different method?
FORM SECTION
<script type="text/javascript">
$(document).ready(function() {
$("#form").alpaca({
"schema": {
"title":"User Feedback",
"description":"What do you think about this Speaker?",
"type":"object",
"properties": {
"email": {
"type":"string",
"title":"Email",
"required":false
},
"feedback": {
"type":"string",
"title":"Feedback"
},
"ranking": {
"type":"string",
"title":"Ranking",
"enum":['It is Great', 'Not so cool', 'Very poor quality', 'I think there may be a Privacy or Copyright issue'],
"required":false
}
}
},
"options": {
"form":{
"attributes":{
"action":"FORM.php",
"method":"post"
"target":"hiddenFrame"
},
"buttons":{
"submit":{}
}
},
"helper": "What do you think about this Speaker?",
"fields": {
"email": {
"size": 20,
"placeholder": "email not nessasary"
},
"feedback" : {
"type": "textarea",
"name": "your_feedback",
"rows": 4,
"cols": 40,
"helper": ""
},
"ranking": {
"type": "select",
"helper": "",
"optionLabels": ["It is Great", "Not so cool", "Very poor quality", "I think there may be a Privacy or Copyright issue"]
}
}
},
e.preventDefault();
});
});
</script>
PHP FILE
<?php
$file = "people.txt";
$feedback = $_REQUEST['feedback'];
$ranking = $_REQUEST['ranking'];
$email= $_REQUEST['email'];
$string = file_get_contents("/tmp/live-info");
$json = str_replace('***(', $callback, $string);
$json = rtrim($json, ')');
$json_a = json_decode($json, true);
$current_name = $json_a['current'][name];
$current_name .= "|$email|$ranking";
$feedback .= "|$current_name" .PHP_EOL;
file_put_contents($file, $feedback, FILE_APPEND | LOCK_EX);
?>
Thank You
If you want an alpaca form to submit solely trough ajax you can use something along these lines.
First, to make the submit button use ajax when clicked set its click property (i.e. options.form.buttons.submit.click) to something like:
function(){
this.ajaxSubmit().done(function(){
console.log('Saved');
}).fail() {
console.warn('Failed to save');
});
}
Now, clicking the submit button will save the form with ajax and the user will remain on page. What's left is handling the standard submit. This can be done setting postRender (a root callback, see documentation) to something along these lines:
function(control) {
if (control.form) {
control.form.registerSubmitHandler(function (e) {
control.form.getButtonEl('submit').click();
return false;
});
}
Hope this still helps.

Categories

Resources