I have a strongly typed view where I have a form. I display values of a Contact (object) in Textboxes. The contact has a list of functions. I have also a list of all the functions that exist in database. In the view I'm listing all the functions by displaying checkboxes (value : Id of the function, display : name of the function). Before that, I compare the list of the Contact's functions to all to functions and I checked those of the contact. Like that :
#foreach (extranetClient.Models.Classes.FonctionContact fonction in ViewBag.Fonctions)
{
string coche = "";
if ((#Model.ListeFonctions).Where(c => c.IdFonction == fonction.IdFonction).Count() > 0)
{
coche = "checked";
}
<input type="checkbox" #coche id="#fonction.IdFonction" />#fonction.LibelleFonction <br />
}
It looks like that:
But now, if the user checks a checkbox to add a function to the contact, I need to save it in the contact's list. I cannot find how to do that. Somebody has idea ?
First we need to modify your checkboxes so they will post properly. When a checkbox is checked it will be posted like this name=value. But we want all your checkboxes to be posted into a collection, so the name will follow this format function[x] where x is an index of the checkbox. The value then becomes the ID of the function.
#{
var i = 0;
}
#foreach (extranetClient.Models.Classes.FonctionContact fonction in ViewBag.Fonctions)
{
string coche = "";
if ((#Model.ListeFonctions).Any(c => c.IdFonction == fonction.IdFonction))
{
coche = "checked";
}
<input type="checkbox" #coche id="functions[#(i++)]" value="#fonction.IdFonction" />#fonction.LibelleFonction <br />
}
Now create an action method which can receive the checkboxes's data. Simply provide a parameter which can recieve an enumeration of int assuming your function IDs are ints.
public ActionResult UpdateFunctions(IEnumerable<int> functions)
{
// TODO: functions contains IDs of all checked boxes.
}
Hope this helps.
Related
I have a content type called DayTile which I have setup with a content picker field that is limited to HotelSection type. This type is a container for the Hotels type.
I want to render all the hotels in the HotelSection when the DayTile has that section picked. Is this possible?
From what I have tried so far, it does not seem that the HotelSection's contained items are accessible as a content picker field.
The selected content items are exposed by the ContentPickerFields ContentItems property (see Orchard.ContentPicker.Fields.ContentPickerField).
To access this from a DayTile content item, let's say from a Razor template named "Content-DayTile.cshtml", you would do it like so:
#{
dynamic contentItem = Model.ContentItem; // How to access the content item depends on the context. In this case, we're in a Content shape template.
// Assuming your picker field is named "HotelSections" and attached to your DayTile content type (which in reality means it's attached to an automatically created part called "DayTile").
var picker = contentItem.DayTile.HotelSections;
var hotelSectionContentItems = picker.ContentItems; // Typed as IEnumerable<ContentItem>.
}
<ul>
#foreach(var hotelSectionContentItem in hotelSectionContentItems)
{
// You can now either access individual parts and fields of each hotel section content item and render it, or you can choose to build a shape for each item and display that. Here are examples:
<li>#hotelSectionContentItem.TitlePart.Title</li>
// or:
// Build a content shape for the content item.
var hotelSectionContentShape = BuildDisplay(hotelSectionContentItem, "Summary");
// Render the shape.
<li>#Display(hotelSectionContentShape)</li>
}
If I understand you correctly this should absolutely be possible.
You will want to override the Fields.ContentPicker view in your theme/module, and in the foreach loop instead of displaying a link to each HotelSection, you want to display that HotelSection content item, which in turn will display all the Hotels contained within the HotelSection, like so:
#using Orchard.ContentPicker.Fields
#using Orchard.Utility.Extensions;
#{
var field = (ContentPickerField) Model.ContentField;
string name = field.DisplayName;
var contentItems = field.ContentItems;
}
<p class="content-picker-field content-picker-field-#name.HtmlClassify()">
<span class="name">#name</span>
#if(contentItems.Any()) {
foreach(var contentItem in contentItems) {
#Display(contentItem.ContentManager.BuildDisplay(contentItem, "Detail"))
}
}
else {
<span class="value">#T("No content items.")</span>
}
</p>
If you are looking to access the Hotels directly from within the content picker field you will need to add a little bit more to the view, a little messy but like this:
#using Orchard.ContentPicker.Fields
#using Orchard.Utility.Extensions;
#{
var field = (ContentPickerField) Model.ContentField;
string name = field.DisplayName;
var contentItems = field.ContentItems;
}
<p class="content-picker-field content-picker-field-#name.HtmlClassify()">
<span class="name">#name</span>
#if(contentItems.Any()) {
foreach(var contentItem in contentItems) {
var container = contentItem.As<ContainerPart>();
if(container == null) {
continue;
}
var hotels = contentItem.ContentManager
.Query(VersionOptions.Published)
.Join<CommonPartRecord>().Where(x => x.Container.Id == container.Id)
.Join<ContainablePartRecord>().OrderByDescending(x => x.Position);
foreach(var hotel in hotels) {
// do something
}
}
}
else {
<span class="value">#T("No content items.")</span>
}
</p>
I'm missing some using statements at the top but the gist of it is there.
I'm learning Shopware and I got to something I can't figure out how to solve.
I'm writing a test plugin that adds an attribute to the customer. I've added the correspondent field to the Registration form and it saves its value to the db automatically, like I read somewhere in the docs.
Now I wanted to let the attribute be editable in the account profile page, after the password field. I managed to put the input there, and even show the value from the db. But when I change the value and save, the value its not updated. I don't know if it is just a matter of getting the field name right, or do I need to override something else. Or is it just not possible? Any help on how to achieve this would be greatly appreciated.
Relevant code below:
plugin bootstrap
public function install(InstallContext $context)
{
$service = $this->container->get('shopware_attribute.crud_service');
$service->update('s_user_attributes', 'test_field', 'string');
$metaDataCache = Shopware()->Models()->getConfiguration()->getMetadataCacheImpl();
$metaDataCache->deleteAll();
Shopware()->Models()->generateAttributeModels(['s_user_attributes']);
return true;
}
register/personal_fieldset.tpl
{extends file="parent:frontend/register/personal_fieldset.tpl"}
{block name='frontend_register_personal_fieldset_password_description'}
{$smarty.block.parent}
<div class="register--test-field">
<input autocomplete="section-personal test-field"
name="register[personal][attribute][testField]"
type="text"
placeholder="Test Field"
id="testfield"
value="{$form_data.attribute.testField|escape}"
class="register--field{if $errorFlags.testField} has--error{/if}"
/>
</div>
{/block}
account/profile.tpl
{extends file="parent:frontend/account/profile.tpl"}
{block name='frontend_account_profile_profile_required_info'}
<div class="profile--test-field">
<input autocomplete="section-personal test-field"
name="profile[attribute][testfield]"
type="text"
placeholder="Test Field"
id="testfield"
value="{$sUserData.additional.user.test_field|escape}"
class="profile--field{if $errorFlags.testField} has--error{/if}"
/>
</div>
{$smarty.block.parent}
{/block}
The form type that it's used on registration isn't the same you have on profile.
If you check \Shopware\Bundle\AccountBundle\Form\Account\PersonalFormType::buildForm, you can see
$builder->add('attribute', AttributeFormType::class, [
'data_class' => CustomerAttribute::class
]);
That means the attributes are included on form and they will be persisted. That's why you can save the value on registration form.
On profile you have \Shopware\Bundle\AccountBundle\Form\Account\ProfileUpdateFormType. And here the attribute isn't added to form builder.
How to extend the ProfileUpdateFormType?
Subscribe Shopware_Form_Builder on Bootstrap (or on a specific Subscriber class)
$this->subscribeEvent('Shopware_Form_Builder', 'onFormBuild');
Create the method onFormBuild to add your logic
public function onFormBuild(\Enlight_Event_EventArgs $event) {
if ($event->getReference() !== \Shopware\Bundle\AccountBundle\Form\Account\ProfileUpdateFormType::class) {
return;
}
$builder = $event->getBuilder();
$builder->add('attribute', AttributeFormType::class, [
'data_class' => CustomerAttribute::class
]);
}
With this approach all attributes are available on your profile form.
Other possibility you have is using the 'additional' property instead of 'attribute' and then subscribe a controller event or hook a controller action to handle your custom data.
I am playing with node.js and jade and currently have this simple template:
extends layout
block content
h1 #{title}
br
form(action="/updateingredient", method="post")
table.table.table-striped.table-bordered
tr
td Name
td Category
td Available
if (typeof ingredients === "undefined")
tr
td
else
each ingredient in ingredients
tr
td #{ingredient.name}
td #{ingredient.category}
td
input(type="checkbox", name="#{ingredient.id}",
value="#{ingredient.available}", checked=ingredient.available)
button.btn(type="submit") Update Ingredients
When submitting this I get hit in upgradeIngredients as expected:
updateIngredient: function (req, res) {
console.log(req.body);
}
My problem lies in. That the Post only includes the checkboxes that are checked, also the value of checked boxes always seem to be false. I presume that is because that was the value before the form Post.
What I preferably would like is to get all checkbox values in the form, checked or not. Is this possible?
The current output from the updateIngredient method gives me the following when a checkbox is checked (currently just testing with one item):
{ 'b56a5f79-b074-4815-e7e0-4b746b2f65d8': 'false' }
and when unchecked:
{}
Edit
Looking at the constructed HTML I see this for an item:
<tr>
<td>Ost</td>
<td>Mælkeprodukt</td>
<td>
<input
type="checkbox"
name="b56a5f79-b074-4815-e7e0-4b746b2f65d8"
value="false"
checked="false">
</td>
</tr>
Verify that the checkbox HTML is correctly constructed
look in console for errors and warnings
ensure that the boxes all have either "true" or "false" for the checked value.
This example contains working syntax:
Node Express Jade - Checkbox boolean value
After searching some more here on SO, I found this answer: Post the checkboxes that are unchecked
It seems like checkboxes, which are not checked are not part of a form when posting HTML. This is exactly what I am seeing.
I did change my checked code to the following before going down another path.
checked=ingredient.available?"checked":undefined
This did not change anything, and did not give me any data in my form post when unchecked.
So I used the JavaScript approach, adding a submit event handler to my form. I added a new checkbox.js file in my javascripts folder, this code is taken from this answer:
// Add an event listener on #form's submit action...
$("#updateform").submit(
function() {
// For each unchecked checkbox on the form...
$(this).find($("input:checkbox:not(:checked)")).each(
// Create a hidden field with the same name as the checkbox and a value of 0
// You could just as easily use "off", "false", or whatever you want to get
// when the checkbox is empty.
function() {
console.log("hello");
var input = $('<input />');
input.attr('type', 'hidden');
input.attr('name', $(this).attr("name")); // Same name as the checkbox
// append it to the form the checkbox is in just as it's being submitted
var form = $(this)[0].form;
$(form).append(input);
} // end function inside each()
); // end each() argument list
return true; // Don't abort the form submit
} // end function inside submit()
); // end submit() argument list
Then I added the script to the end of my layout.jade file:
script(src='/javascripts/checkbox.js')
And I modified my form to include an ID:
form#updateform(action="/updateingredient", method="post")
And removed the value from the checkbox:
input(type="checkbox", name="#{ingredient.id}",
checked=ingredient.available?"checked":undefined)
Now I get the following when value is unchecked:
{ 'b2a4b035-8371-e620-4626-5eb8959a36b0': '' }
And when checked:
{ 'b2a4b035-8371-e620-4626-5eb8959a36b0': 'on' }
Now in my method I can find out whether it was checked or not with:
var available = req.body[ingredient] === "on" ? true : false;
Where ingredient is the key.
I've got typeahead working just fine, but I am too inexperienced with the Javascript to understand how to turn the typed results into a link.
<input type="text"
class="span3"
data-provide="typeahead"
placeholder="City Search:"
data-items="6"
autocomplete="off"
data-source=["Neuchatel","Moutier"]">
So, I really just want to know how to turn the strings from data-source into links to other pages. Hopefully this is fairly simple.
thanks!
You can turn the strings into links easily..
<input type="text" data-provide="typeahead" data-source="["/foo.html","http://www.google.com","/about.html"]">
Are you also looking to take the link from the input and then navigate to the selected page?
EDIT: Navigate to item selected in typeahead..
In this case you'd define an object map that contain keys (label) and values (url) like..
var data = {
"login":"/login",
"home":"/",
"user":"/user",
"tags":"/tags",
"google":"http://google.com"
};
Then you'd initiate the typeahead. The source and updater functions would be defined to handle 1) creating the typeahead data source array from the map object, and 2) navigate to the appropriate url when an item is selected..
$('.typeahead').typeahead({
minLength:2,
updater: function (item) {
/* navigate to the selected item */
window.location.href = data[item];
},
source: function (typeahead, query) {
var links=[];
for (var name in data){
links.push(name);
}
return links;
}
});
Demo on Bootply
I am using a customised version of search-theme-form.tpl
When I use the search box, I do get transferred to the search page. But the search does not actually take place. The search box on the search results page does work though. This is my search-them-form.tpl.php file (demo :
<input type="text" name="search_theme_form_keys" id="edit-search-theme-form-keys" value="Search" title="Enter the terms you wish to search for" class="logininput" height="24px" onblur="restoreSearch(this)" onfocus="clearInput(this)" />
<input type="submit" name="op" id="edit-submit" value="" class="form-submit" style="display: none;" />
<input type="hidden" name="form_token" id="edit-search-theme-form-form-token" value="<?php print drupal_get_token('search_theme_form'); ?>" />
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
There is also a javascript file involved. I guess it's use is pretty clear from the code:
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
function clearInput(e) {
e.value=""; // clear default text when clicked
e.className="longininput_onfocus"; //change class
}
function restoreSearch(e) {
if (trim(e.value) == '') {
{
e.value="Search"; // reset default text onBlur
e.className="logininput"; //reset class
}
}
}
What can be the problem and how can I fix it?
Apparently, you cannot directly modify the HTML in search-theme-form.tpl.php since thats not the right way to do it. So my adding the class and onFocus and onBlur attributes was the problem.
The correct way to do it is to modify the themes template.php file. Basically we will be using form_alter() to modify the form elements. Since using the HTML way is wrong. Take a look at the code below (taken from : here )
<?php
/**
* Override or insert PHPTemplate variables into the search_theme_form template.
*
* #param $vars
* A sequential array of variables to pass to the theme template.
* #param $hook
* The name of the theme function being called (not used in this case.)
*/
function yourthemename_preprocess_search_theme_form(&$vars, $hook) {
// Note that in order to theme a search block you should rename this function
// to yourthemename_preprocess_search_block_form and use
// 'search_block_form' instead of 'search_theme_form' in the customizations
// bellow.
// Modify elements of the search form
$vars['form']['search_theme_form']['#title'] = t('');
// Set a default value for the search box
$vars['form']['search_theme_form']['#value'] = t('Search this Site');
// Add a custom class and placeholder text to the search box
$vars['form']['search_theme_form']['#attributes'] = array('class' => 'NormalTextBox txtSearch',
'onfocus' => "if (this.value == 'Search this Site') {this.value = '';}",
'onblur' => "if (this.value == '') {this.value = 'Search this Site';}");
// Change the text on the submit button
//$vars['form']['submit']['#value'] = t('Go');
// Rebuild the rendered version (search form only, rest remains unchanged)
unset($vars['form']['search_theme_form']['#printed']);
$vars['search']['search_theme_form'] = drupal_render($vars['form']['search_theme_form']);
$vars['form']['submit']['#type'] = 'image_button';
$vars['form']['submit']['#src'] = path_to_theme() . '/images/search.jpg';
// Rebuild the rendered version (submit button, rest remains unchanged)
unset($vars['form']['submit']['#printed']);
$vars['search']['submit'] = drupal_render($vars['form']['submit']);
// Collect all form elements to make it easier to print the whole form.
$vars['search_form'] = implode($vars['search']);
}
?>
In yourthemename_preprocess_search_theme_form - 'yourthemename' will obviously reflect the name of your custom theme. Basically the code is self-explanatory. what with the comments and all.
So, basically thats the way it works.