I've created a grid with a custom popup edit window. In the template I'm using data attributes to give values to the appropriate inputs. For example:
<input id="cgrid-edit-contact" name="contact" tabindex="3" data-bind="value: contact.contactid" style="width:214px" />`
The problem I'm having is I have a KendoUpload widget where I want to show the file that has been previously uploaded. The following page says that to configure widgets you provide data- followed by the Kendo attribute name. So to set the files attribute would look like this:
<input id="cgrid-edit-file" type="file" data-files="[{name: 'file1.doc', size: 525, extension: '.doc'}]" style="width:214px;display:inline" />
Obviously the content should be dynamic, but I cannot even get static values to initialize. Has anyone run into this before?
In the meantime MVVM is supported:
HTML:
<!-- .. -->
data-files="[ viewModel.GetCurrentFilename() ]"
<!-- .. -->
JS:
//.. viewModel ..
GetCurrentFilename: function ()
{
return {name: 'file1.doc', size: 525, extension: '.doc'};
}
//..
The following should work:
<input id="cgrid-edit-file"
type="file"
data-files="[{name: 'file1.doc', size: 525, extension: '.doc'}]"
data-role="upload"
data-async="{ saveUrl: 'save' }"
/>
However you currently cannot use MVVM to specify the files which the upload can display. You can only specify them as a data attribute.
Related
I'm using Filepond with the Laravel framework.
I need to send a file related to an article.
HTML code:
<form action="submit.php" enctype="multipart/form-data" method="POST">
<input type="hidden" name="post_id" value="2" />
<input type="file" class="filepond" name="filepond" data-max-files="1"/>
<input type="submit" value="Upload" name="submit" class="btn btn-info" />
</form>
<script>
// get a reference to the input element
const inputElement = document.querySelector('input[type="file"]');
// create a FilePond instance at the input element location
const pond = FilePond.create( inputElement, {
maxFiles: 1,
allowBrowse: false,
instantUpload: false,
});
</script>
How can I use the submit form button to download my files and get $_POST['post_id']?
Unfortunately that's not possible on most browsers because the value of a file input field cannot be set.
To work around this limitation you can:
Upload the file asynchronously (using the FilePond server.process property)
Encode the file as base64 data (using the FilePond encode plugin)
Use a DataTransfer object to set the file input value (at the moment this only works on Chrome / Firefox)
For more information on the DataTransfer solution see:
https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/
I use vee-validate in my project with custom components with no problems.
But now for a Password Confirmation input field, I'm not able to make it work properly.
I have custom components for the input fields, somethink like <base-input-field>.
If I add a ref="password" attribute in my custom component (<base-input-field ref="password">), it will not reference the <input> inside my custom component, but the <div> wrapper that encapsulates the <input> html component.
Code example:
<!-- Password -->
<div class="row">
<base-text-field
ref="password"
name="password"
type="password"
:error="isVisible && errors.first('password')"
v-validate="{
required: true,
min: 6,
max: 30,
}"
v-model.trim="password"
required
/>
</div>
<!-- Confirm Password -->
<div class="row">
<base-text-field
name="password_conf"
type="password"
:error="isVisible && errors.first('password_conf')"
v-validate="{
required: true,
confirmed: 'password',
}"
:data-vv-as="password"
v-model.trim="password_conf"
required
/>
</div>
I don't know vee-validate but here is an idea from a similar problem I had with custom components not having access to <input> directly:
Get the reference to the input using JS:
this.$refs.password.$el.querySelector("input")
You could save it in a variable and pass it to your component I guess. Again, I don't know vee-validate. Hope it gives you some ideas.
Can u check which events are supported on your custom component(May be #input/#change)?
If any of events are fired on change of your input there is an option data-vv-validate-on in v-validate where you can set on which event you want to check the validation. Read more here
<base-text-field
ref="password"
name="password"
type="password"
:error="isVisible && errors.first('password')"
v-validate="{
required: true,
min: 6,
max: 30,
}"
v-model.trim="password"
data-vv-validate-on="change"
required
/>
Follow the requirements in this page and you should be fine:
emit input event when the value in your component changes
have name and value defined in component via $_veeValidate. Or, use data-vv-name and data-vv-value-path (details here).
Since you didn't provide the code in base-text-field I can't really give you any further example of how it should work for you.
I would like to allow users to be able to enter multiple dates, and was hoping I could use the repeatable form field type (new as of Joomla 3.3).
I do get the modal popup with rows to add/remove items, however the calendar icon does not popup a calendar picker. I tried with just a text input and that seems to work ok.
The relevant part of my form definition:
<field
name="event_dates"
type="repeatable"
id="event_dates"
icon="calendar"
label="Event calendar dates"
select="Select dates"
>
<fields name="jmfields_event_dates">
<fieldset
name="event_dates_modal"
repeat="true"
hidden="true">
<field
name="event_date"
type="calendar"
format="%d-%m-%Y"
label="Date"
/>
</fieldset>
</fields>
</field>
I haven't tried to have a calendar field inside the Repeatable field, but Repeatable field is too buggy yet with a bunch of javascript issues/conflicts. Check in your browser error console for any such issues. I would suggest to wait till Repeatable Field becomes more stable.
I also wanted to do the same, and instead of the default calendar field I end-up using the jQuery date picker on a normal text field instead. You add the jQuery script on the page to target the input field and you have a little work around until the actual fix for the default calendar is out.
You need these files in your header:
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');
$doc =& JFactory::getDocument();
// loaded from the code.jquery.com site
$doc->addStylesheet('http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// I downloaded the datepicker only and placed it in this folder
$doc->addScript(JURI::root().'/media/jui/js/datepicker/jquery-ui.min.js');
The xml for the field:
<!-- Course_date Field. Type: Repeatable. (joomla) -->
<field
type="repeatable"
name="course_date"
label="Course Dates"
description="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_DESCRIPTION"
id="course_date"
class="course_dates"
select="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_SELECT"
icon="list"
maximum="50">
<fields name="course_date_fields" label="">
<fieldset hidden="true" name="course_date_modal" repeat="true">
<!-- Course Field. Type: Courses. (custom) -->
<field
type="courses"
name="course"
label="COM_LEARNINGMANAGER_EVENT_COURSE_LABEL"
class="list_class"
button="false"
/>
<!-- Date Field. Type: Text. (joomla) -->
<field
type="text"
name="date"
label="COM_LEARNINGMANAGER_EVENT_DATE_LABEL"
size="20"
maxlength="50"
description="COM_LEARNINGMANAGER_EVENT_DATE_DESCRIPTION"
class="text_area datepicker"
readonly="false"
disabled="false"
filter="STRING"
message="Error! Please add date here."
hint="COM_LEARNINGMANAGER_EVENT_DATE_HINT"
/>
</fieldset>
</fields>
</field>
Here is the script you need to add to the default.php or edit.php file:
<script type="text/javascript">
// means your repteable field can only take 50 rows
<?php $fieldNrs = range(1,50,1); ?>
jQuery('input.form-field-repeatable').on('row-add', function (e) {
<?php foreach($fieldNrs as $nr): ?>
jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').datepicker(
{
minDate: -1,
prevText: '',
nextText: '',
maxDate: '+3M',
firstDay: 1,
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').val(dateText);
}
});
<? endforeach; ?>
});
</script>
Enjoy!
You can try with this ("Multiplier module"). I used different approach to get same result like with Joomla repeatable form field type, and also with that avoid "pop-ups inside popup". Still in development phase, but maybe you can try with that concept. Regards.
What I did to solve similar problem?
I had a similar problem with default Joomla repeatable form field type, especially with "pop-up" form fields type (eg. Joomla "date"). Because of that I created some kind of module pattern (mod_multiplier) where I used different approach -> I wouldn't repeat form of fields (section), I want to use same section for multiple insertion.
Module mod_multiplier
Inside module xml file are 3 reserved fields "wrapper", "repeater", and "content".
Inside "wrapper" is the place for "repeatable" fields:
<fieldset name="basic" addfieldpath="/modules/mod_multiplier/models/fields">
<!-- Wrapper is container for repeatable fields-->
<fields name="wrapper">
<!--This is the place where you insert your fields-->
</fields>
<field name="repeater" label="" type="repeater" />
<field name="content" hidden="true" label="Content" type="hidden" />
</fieldset>
All content would be stored inside "content" field in JSON format. Every time when we press form "Add" button we will add one row of data to "content" field. After all, inside "content" we will have rows of data.
How that look inside tmpl/default.php file and how to get fields values?
Hierarchical data structure has 3 levels: rows, row and field.
all data => $rows
one row of data => $row
one field => $row->field_name
Practical example from mod_multiplier:
Inside "wrapper" are fields "country", and "city" and we call them by name (inside tmpl/default.php) like this:
<ul>
<?php foreach ($rows as $row):?>
<li>
<?php echo $row->country;?>:<?php echo $row->city;?>
</li>
<?php endforeach; ?>
</ul>
I am trying to use jQuery validate for a form.
I have added
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
My form:
<form id="Main">
<asp:TextBox ID="Box" name="box" required runat="server"
</form>
At bottom of page
$('#Main').validate();
This works. Which is great. But if I remove the required attr and try say
$('#Main').validate({rules:{box:{required:true}}});
This does not work. For the life of me i cant figure out what I am doing wrong.
In the end I need that input to be required and numeric.
I tried adding 'number' as an attribute but that didn't work either.
some guidance would be great.
Thanks.
There are a number of validation plugins available, after some searching I think I found the plugin you're using based on the usage here.
I created a fiddle to demo how to make a field required and numeric ... click here for fiddle.
Based on the code you provided, it looks like you're only including the base validate.js library. You need to be sure to include the css file, and if you want to use some out of the box validations, such as number validations then you will also need to include the additional-methods.js file. All these files can be found HERE.
Here is the code from the fiddle above..
<form id="myform">
<input type="text" class="box" id="box" name="box">
<br/>
<input id="submit" type="submit" value="Validate!">
</form>
$(document).ready(function()
{
$("#myform" ).validate(
{
rules:
{
box:
{
required: true,
number: true
}
}
});
});
I'm using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to.
The HTML for the dialog content is retrieved using AJAX so I want to be able to call ko.applyBindings once the request has completed, and I want to bind the child view model to just the portion of the HTML loaded via ajax inside the dialog div.
Is this actually possible or do I need to load ALL my views and view models when the page initially loads and then call ko.applyBindings once?
ko.applyBindings accepts a second parameter that is a DOM element to use as the root.
This would let you do something like:
<div id="one">
<input data-bind="value: name" />
</div>
<div id="two">
<input data-bind="value: name" />
</div>
<script type="text/javascript">
var viewModelA = {
name: ko.observable("Bob")
};
var viewModelB = {
name: ko.observable("Ted")
};
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));
</script>
So, you can use this technique to bind a viewModel to the dynamic content that you load into your dialog. Overall, you just want to be careful not to call applyBindings multiple times on the same elements, as you will get multiple event handlers attached.
While Niemeyer's answer is a more correct answer to the question, you could also do the following:
<div>
<input data-bind="value: VMA.name" />
</div>
<div>
<input data-bind="value: VMB.name" />
</div>
<script type="text/javascript">
var viewModels = {
VMA: {name: ko.observable("Bob")},
VMB: {name: ko.observable("Ted")}
};
ko.applyBindings(viewModels);
</script>
This means you don't have to specify the DOM element, and you can even bind multiple models to the same element, like this:
<div>
<input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
I've managed to bind a custom model to an element at runtime. The code is here: http://jsfiddle.net/ZiglioNZ/tzD4T/457/
The interesting bit is that I apply the data-bind attribute to an element I didn't define:
var handle = slider.slider().find(".ui-slider-handle").first();
$(handle).attr("data-bind", "tooltip: viewModel.value");
ko.applyBindings(viewModel.value, $(handle)[0]);
You should look at the with binding, as well as controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html