I'm using Advanced Custom Fields on my WordPress site and I have a datepicker start-date & end-date that I'm trying to set min/max on when one is selected. From jQuery's datepicker date-range I'm trying to add the onClose option.
I currently have the following code based off the custom javascript fields page but it's not working.
<?php function takeover_scripts() { ?>
<script type="text/javascript">
(function($) {
var startDate = $('.acf-field-568d4b2968a3e');
acf.add_filter('date_picker_args', function( args, startDate ){
// do something to args
args.changeMonth = false;
args.onClose = function( selectedDate ) {
$( ".acf-field-568d4bbd68a3f" ).datepicker( "option", "minDate", selectedDate );
}
// return
return args;
});
var endDate = $('.acf-field-568d4bbd68a3f');
acf.add_filter('date_picker_args', function( args, endDate ){
// do something to args
args.changeMonth = true;
args.onClose = function( selectedDate ) {
$( ".acf-field-568d4b2968a3e" ).datepicker( "option", "minDate", selectedDate );
}
// return
return args;
});
})(jQuery);
</script>
<?php }
add_action('acf/input/admin_footer', 'takeover_scripts'); ?>
I'm not sure if I need to target the id of the end-date input or the field number or if I even have the start-date field selected correctly. If anyone has any experience with this please let me know what I'm setting/selecting wrong.
Here's the markup for the two fields :
<div class="acf-field acf-field-date-picker acf-field-568d4b2968a3e" style="width:25%;" data-name="start_date" data-type="date_picker" data-key="field_568d4b2968a3e" data-required="1" data-width="25">
<div class="acf-label">
<label for="acf-field_568d479e68a3b-0-field_568d4b2968a3e">Start Date <span class="acf-required">*</span></label>
</div>
<div class="acf-input">
<div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0">
<input id="acf-field_568d479e68a3b-0-field_568d4b2968a3e" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4b2968a3e]" value="">
<input type="text" value="" class="input active hasDatepicker" id="dp1452127570218">
</div>
</div>
</div>
<div class="acf-field acf-field-date-picker acf-field-568d4bbd68a3f" style="width:25%;" data-name="end_date" data-type="date_picker" data-key="field_568d4bbd68a3f" data-required="1" data-width="25">
<div class="acf-label">
<label for="acf-field_568d479e68a3b-0-field_568d4bbd68a3f">End Date <span class="acf-required">*</span></label>
</div>
<div class="acf-input">
<div class="acf-date_picker acf-input-wrap" data-display_format="MM d, yy" data-first_day="0"><input id="acf-field_568d479e68a3b-0-field_568d4bbd68a3f" class="input-alt" type="hidden" name="acf[field_568d479e68a3b][0][field_568d4bbd68a3f]" value=""><input type="text" value="" class="input active hasDatepicker" id="dp1452127570219"></div>
</div>
</div>
Thanks
P.S. : I also have this on ACF's support located here.
A little late to this, but I finally figured it out.
So it turns out the .datepicker() function needs to be called on the input field with the class .hasDatepicker and not the input field with the acf id.
I have the following working:
$('.acf-field-568d4b2968a3e').find('.hasDatepicker').datepicker('option', 'minDate', minDateVar );
Hope this helps someone!
Related
need help with drupal 7. I'm newbie with drupal.
I have code below for validation and validation errors, and it works fine. But errors always appear in wrong place.
I think the problem in $element, but i'm note sure.
some example html
<form id="webform_client_form_226">
<div class="catalogue__form-input-inner">
<div class="catalogue__form-input">
<div class="form-item">
// i need it here
<label for="edit-submitted-vashe-imya--3">Your name</label>
<input name="submitted[vashe_imya]" value="" size="60" maxlength="128" class="form-text error">
</div>
</div>
<div class="catalogue__form-input">
<div class="form-item webform-component webform-component-textfield webform-component--nomer-telefona webform-container-inline">
// and here
<label>Phone number</label>
<input name="submitted[nomer_telefona]">
</div>
</div>
<div class="catalogue__form-button">
// always appears here right now
<div class="form-actions">
<input name="op" value="send"></div>
</div>
</div>
</div>
and template.php
function pkpro_uikit_form_alter(&$form, &$form_state, $form_id) {
// Check the form id
if($form_id == 'webform_client_form_226') {
$form['#validate'][] = 'form_validate';
}
}
function form_validate(&$form, &$form_state) {
$message = "Field required";
if(isset($form_state['values']['submitted']['vashe_imya'])) {
$name = $form_state['values']['submitted']['vashe_imya'];
if( condition ) {
form_error($form['submitted']['vashe_imya'], $message);
}
}
if(isset($form_state['values']['submitted']['nomer_telefona'])) {
$name = $form_state['values']['submitted']['nomer_telefona'];
if( condition ) {
form_error($form['submitted']["nomer_telefona"], $message);
}
}
// get all validation errors.
$form_errors = form_get_errors();
if (!empty($form_errors)) {
foreach ($form_errors as $element => $error) {
$form[$element]['#suffix'] = '<div>'.$error.'</div>';
}
}
// clear default error messages.
drupal_get_messages('error');
}
Help, pls)
You need to modify your template. Look for page.tpl.php. It should have a $message variable on it. Move it to the correct location. If you only want it for one content type or page, copy the page.tpl.php so it only targets what you want.
I'm trying to get the value of each checked box that has been selected as true. Each time I select a checkbox it grabs the value of that checkbox instead of all the selected checkboxes.
Path: talentList.html
<fieldset>
<div class="checkbox">
<label>
<input name="specialisation" type="checkbox" value="Accounting Firm"> Accounting Firm
</label>
</div>
<div class="checkbox">
<label>
<input name="specialisation" type="checkbox" value="Accounting in Industry"> Accounting in Industry
</label>
</div>
</fieldset>
Path: talentList.js
Template.talentList.events({
'change [name="specialisation"]': function ( event, template ) {
let specialisation = event.target.value;
template.candidateListFilter.set( specialisation );
}
});
There is only one target set in the event handler so event.target.value will be a scalar instead of an array. You need to iterate over the array of checkboxes.
Template.talentList.events({
'change [name="specialisation"]': function ( event, template ) {
$.each($('[name="specialisation"]'),function(i,cb){
let specialisation = cb.value;
template.candidateListFilter.set( specialisation );
});
}
});
To be honest this seems like an odd pattern. If you want to update a document whenever a checkbox is checked/unchecked you shouldn't have to set the state of all the other checkboxes at the same time, you should be able to just poke the one you want.
Not sure if this is correct. It creates an object of all selected options.
'change [name="specialisation"]': function ( event, template ) {
$(document).ready(function(){
var specialisation = $('input[name="specialisation"]:checked').map(function(){
return $(this).val();
});
var specialisationListArray = specialisation.get();
template.candidateListFilter.set( specialisationListArray );
});
},
I am new to Meteor :)
I have a template helper:
userRoleMap: function() {
var u = getUser();
if (u) {
var lstRoles = Meteor.roles.find({}).fetch();
var userRoles = u.roles ? u.roles : [];
_.map(lstRoles, function(r) {
_.extend(r, {
userMapped: _.contains(userRoles, r.name)
});
return r;
});
return lstRoles;
}
return [];
}
I am using this helper in my template as:
{{#each userRoleMap}}
<div class="checkbox">
<label>
<input type="checkbox" class="chkUserRole" value="{{name}}" checked="{{userMapped}}"> {{name}}
</label>
</div>
{{/each}}
I am showing the above html/template in a bootstrap-modal. I am showing this modal on click of a button (and setting user-id in a Session which I am using when calling getUser() function).
The issue is the checkbox check state is not changing based on value of "userMapped". It is getting set correctly first time, but not afterwards. The helper userRoleMap is getting called every-time I open modal, but the checkboxes are having same checked state which they had when it was opened previously (manual checks/unchecks are getting maintained).
The return value of helper method is working as expected (verified by logging it on console).
Anything I am missing here ? Something to do with _.extend() ?
The Meteor way to do this is to either return checked as an element attribute or not:
Template.registerHelper( 'checked', ( a, b ) => {
return a === b ? 'checked' : '';
});
{{#each userRoleMap}}
<div class="checkbox">
<label>
<input type="checkbox" class="chkUserRole" value="{{name}}" {{checked userMapped true}}> {{name}}
</label>
</div>
{{/each}}
Right now, my Posts model has a title and a content field:
client/client.js:
Meteor.subscribe('all-posts');
Template.posts.posts = function () {
return Posts.find({});
};
Template.posts.events({
'click input[type="button"]' : function () {
var title = document.getElementById('title');
var content = document.getElementById('content');
if (title.value === '') {
alert("Title can't be blank");
} else if (title.value.length < 5 ) {
alert("Title is too short!");
} else {
Posts.insert({
title: title.value,
content: content.value,
author: userId #this show displays the id of the current user
});
title.value = '';
content.value = '';
}
}
});
app.html:
<!--headder and body-->
<div class="span4">
{{#if currentUser}}
<h1>Posts</h1>
<label for="title">Title</label>
<input id="title" type="text" />
<label for="content">Content</label>
<textarea id="content" name="" rows="10" cols="30"></textarea>
<div class="form-actions">
<input type="button" value="Click" class="btn" />
</div>
{{/if}}
</div>
<div class="span6">
{{#each posts}}
<h3>{{title}}</h3>
<p>{{content}}</p>
<p>{{author}}</p>
{{/each}}
</div>
</div>
</div>
</template>
I tried adding an author field (already did meteor add accounts-password and accounts-login):
author: userId
But it just shows the id of the current user who is logged in.
I would like it to show the email of the author of the post instead.
How to accomplish that?
I think you can get the email with
Meteor.users.findOne(userId).emails[0];
#danielsvane is correct, but since your Post document's author field stores the _id of the author and not the email address, you'll need a template helper in order for the template to know how to get the email address. Try the following:
// html
...
<div class='span6'>
{{#each posts}}
{{> postDetail}}
{{/each}}
</div>
...
<template name="postDetail">
<h3>{{title}}</h3>
<p>{{content}}</p>
<p>{{authorEmail}}</p>
</template>
// javascript
Template.postDetail.helpers({
// assuming the `author` field is the one storing the userId of the author
authorEmail: function() { return Meteor.users.findOne(this.author).emails[0]; }
});
If it's always showing the current user and not the user who is the author of the post, then the problem lies in how you're setting the value of the userId variable in your event handler, which isn't code that you showed in your question.
I would like to pass information to an iframe via post. (Could be jquery or javascript that executes the post, it doesn't really matter).
The information cannot be sent via querystring as I do not have access to change the way the page brought in by the iframe is.
This data will determine the layout of the content in the iframe so how can I make it so that after the post is sent the iframe is updated? (possibly refresh?)
I wrote a blog post about doing this with jQuery to upload a file using a hidden iframe. Here's the code:
Here is the HTML for the form:
<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>
The DIV in which to allow jQuery to create the iframe you can hide it with a little CSS:
<div id="iframe" style="width:0px height:0px visibility:none">
</div>
The DIV in which to show the results of the callback:
<div id="textarea">
</div>
The jQuery code:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#formsubmit").click(function() {
var userFile = $('form#userfile').val();
var max = $('form#max').val();
var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
$('div#iframe').append( iframe );
$('#theuploadform').attr( "action", "uploader.php" )
$('#theuploadform').attr( "method", "post" )
$('#theuploadform').attr( "userfile", userFile )
$('#theuploadform').attr( "MAX_FILE_SIZE", max )
$('#theuploadform').attr( "enctype", "multipart/form-data" )
$('#theuploadform').attr( "encoding", "multipart/form-data" )
$('#theuploadform').attr( "target", "postframe" )
$('#theuploadform').submit();
//need to get contents of the iframe
$("#postframe").load(
function(){
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("div#textarea").html(iframeContents);
}
);
return false;
});
});
</script>
I used a php app like this uploader.php to do something with the file:
<?php
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];
if ($maxfilesize > 5000000) {
//Halt!
echo "Upload error: File may be to large.<br/>";
exit();
}else{
// Let it go
}
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
print('File is valid, and was successfully uploaded. ');
} else {
echo "Upload error: File may be to large.<br/>";
}
chmod($uploadfile, 0744);
?>
There's more there than you need, but it illustrates the concept in jQuery.
I don't have the code handy but my team accomplished this purely in Javascript. As I recall it went something like this:
function postToPage() {
var iframe = document.getElementById('myIFrame');
if (iframe) {
var newForm = '<html><head></head><body><form...> <input type="hidden" name="..." value="..." /> </form><script type=\"text/javascript\">document.forms[0].submit();</scrip' + 't></body></html>';
iframe.document.write(newForm); //maybe wrong, find the iframe's document and write to it
}
}