I'm embedding a form in the admin orders list if an order has a certain status. Code:
function bkf_petals_actions( $column, $post_id ) {
$bkfoptions = get_option("bkf_petals_setting");
if ( $column == 'wc_actions' ) {
$order = wc_get_order( $post_id );
if ( $order->has_status( 'new' ) ) {
$nonce = wp_create_nonce("bkf_petals_decision_nonce");
$pid = get_post_meta($post_id,'_petals_on',1);
$url = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
$acceptlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=accept&nonce='.$nonce);
$rejectlink = admin_url('admin-ajax.php?action=petals_decision&orderid='.$post_id.'&petalsid='.$pid.'&outcome=reject&nonce='.$nonce.'&code=');
echo '<form action="'.$url.'" method="get" id="petals-decision-'.$post_id.'-form">
<input type="hidden" name="action" value="petals_decision" />
<input type="hidden" name="petalsid" value="'.$pid.'" />
<input type="hidden" name="nonce" value="'.$nonce.'" />
<input type="hidden" name="orderid" value="'.$post_id.'" />
<select name="decision" id="petals-decision-'.$post_id.'-select" class="petals-decision" style="width:150px;" required>
<option value="" disabled selected>Select an action...</option>
<optgroup label="Accept">
<option value="accept">Accept Order</option>
</optgroup>
<optgroup label="Reject">
<option value="293">Cannot deliver flowers</option>
<option value="294">Don\'t have the required flowers</option>
<option value="270">We cannot deliver to this location ever</option>
<option value="280">Cannot deliver to this location today</option>
<option value="281">Do not have these flowers but could do a florist choice</option>
<option value="282">Do not have any flowers to meet delivery date</option>
<option value="272">Need more information to deliver this order</option>
<option value="283">Do not have this container but could do with a substitution of container</option>
<option value="273">Do not do this product ever</option>
<option value="274">There is a problem with this address</option>
<option value="284">This area is restricted, can go on next run but not this delivery date</option>
<option value="285">This area is restricted and can\'t be delivered until next week</option>
</optgroup>
</select>
<input type="submit" />
</form>';
}
}
}
It's rendering as you would expect visually:
Image of rendered form
Here's my problem - as soon as you click on the select field to drop down its options, it triggers the underlying link of the whole row and navigates to the order edit page.
Any ideas? Am I missing something?
#martin-mirchev hit the nail on the head - need to set the z-index of the <select> element to at least 20ish
I am trying to get a list from datatbase using Freemarker. I want to make select dropdown list, but I don't undestand what I missed.
I did this:
<div class="form-group">
<select name="category" class="form-control" required>
<#list categories! as category>
<option value="${category.id}">${category.name}</option>
</#list>
</select>
</div>
I have a form but I don't see any options.
With Thymeleaf I could do this but in the project I want to use freemarker
<div class="form-group">
<select th:field="*{category}" class="form-control" required>
<th:block th:each="category : ${categories}">
<option th:text="${category.name}" value="${category.id}"/>
</th:block>
</select>
</div>
In fact I need "translate" this part from Thymeleaf to Freemarker and I don't know how.
Yes, the code fragement was correct, I just placed in a PostMapping instead of GetMapping. Now it works good with controller below:
#GetMapping("/items")
public String main(Model model) {
Iterable<Item> items;
model.addAttribute("items", items);
List<Category> categories = categoryRepository.findAll();
model.addAttribute("categories", categories);
return "items";
}
I have Created Custom Post Type Named Tours and Different Taxonomies.
I have custom metabox for Tour Duration.
Now, I want to have search Form Filter option .
If I Insert Duration Value Like 14 Days In Metabox, How Can I Query Whether My Custom Metabox Value (Duration) Lies Within My Option Values In Form Like Below and filter Results.
It Should Lies Between 11-15days
<form action="/search-results/" method="post">
<div class="form-group select">
<select name="search_duration">
<option value="">Any Duration</option>
<option value="19">1-5 days</option>
<option value="20">6-10 days</option
><option value="21">11-15 days</option>
<option value="22">16-20 days</option>
<option value="36">21-25 days</option>
<option value="37">26-30 days</option>
<option value="39">31-35 days</option>
</select>
</div><div class="form-group">
<input type="text" name="search" placeholder="Keyword"/></div>
<div class="form-group">
<button class="button secondary" type="submit">Submit</button>
</div>
</form>
On your search results page you could write a custom loop that uses meta_query in it's $args
https://codex.wordpress.org/Class_Reference/WP_Meta_Query
I am trying to use a multi select box in meteor and have some of the options be marked with selected based on info from the db for use with slectize.js. however it seems like meteor when building its DOM tree ignores the selected property.
<label>User</label>
<select id="customer_user_id" name="user_id" class="form-control input-sm" multiple>
{{#each users}}
{{#if inList _id ../customer_user_id}}
<option value="{{_id}}" selected>{{full_name}}</option>
{{else}}
<option value="{{_id}}">{{full_name}}</option>
{{/if}}
{{/each}}
</select>
and the helper
Handlebars.registerHelper("inList", function (val, list) {
console.log(list.indexOf(val) > -1)
console.log(list)
console.log(val)
return list.indexOf(val) > -1;
});
i see that the condition is true but there is no options with the selected property
I have been breaking my head on this for more then 24 hours now
I have also tried this method with the same result
<label>User</label>
<select id="customer_user_id" name="user_id" class="form-control input-sm" multiple>
{{#each users}}
<option value="{{_id}}" {{selected _id ../customer_user_id "selected"}}>{{full_name}}</option>
{{/each}}
</select>
with this helper
Handlebars.registerHelper("selected", function (val1, val2, string) {
if (val1 === val2) {
return string;
}
});
Try using selected="selected" instead of just selected:
<option value="{{_id}}" selected="selected">{{full_name}}</option>
I have a handlebars template that I am embedding in my html page. There is a select element with all of the available options already rendered. How can I set the selected value of the select list when I render my template?
<script id="my-template" type="text/x-handlebars-template">
<div id="my-modal">
<form action="/TestAction" method="post">
<input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />
<label for="Test">Test: (optional)</label>
<select id="Test" name="Test">
<option value="">-- Choose Test --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
</div>
</script>
If you don't want to build out the option as part of the helper, you can use a combination of a small custom handlebars helper and parent context, denoted using the ../ syntax:
First write the helper:
Handlebars.registerHelper('selected', function(option, value){
if (option === value) {
return ' selected';
} else {
return ''
}
});
And then in your template you call your helper and pass in the parent context inside the each loop to check for selectedState
{{#each states}}
<option value="{{this}}" {{selected this ../selectedState}}>{{this}}</option>
{{/each}}
I took the {{#each}} helper as inspiration, and wrote a custom helper that does the same thing: loops over a list, and continually appends the contents of the arguments to an output string. (From here: Handlebars block helpers)
In this case, I'm not passing in a chunk of template HTML to serve as the function's options parameter, like you would when using {{#each}}. Instead I am just building up the <option>
tags by brute force, and testing every iteration of the context list. Lastly, I return a big long string of <option></option> tags, and hopefully one of them has selected="selected".
The function:
Handlebars.registerHelper('options_selected', function(context, test) {
var ret = '';
for (var i = 0, len = context.length; i < len; i++) {
var option = '<option value="' + context[i]+'"';
if (test.toLowerCase() == context[i].toLowerCase()) {
option += ' selected="selected"';
}
option += '>'+ Handlebars.Utils.escapeExpression(context[i]) + '</option>';
ret += option;
}
return new Handlebars.SafeString(ret);
});
The tag in use:
<script id="form-state" type="text/x-handlebars-template">
<select name="state">
{{{options_selected states selectedState}}}
</select>
</script>
Please suggest any edits that would improve this, thanks!
You can use values straight in the Handlebars template like so.
Handlebars Template
<select id="distance">
<option value="15" {{#if (isEqual 15 distance)}} selected {{/if}}>15</option>
<option value="25" {{#if (isEqual 25 distance)}} selected {{/if}}>25</option>
<option value="50" {{#if (isEqual 50 distance)}} selected {{/if}}>50</option>
<option value="100" {{#if (isEqual 100 distance)}} selected {{/if}}>100</option>
<option value="300" {{#if (isEqual 300 distance)}} selected {{/if}}>300</option>
</select>
Handlebars Helper
define(['hbs/handlebars'], function (Handlebars) {
'use strict';
Handlebars.registerHelper('isEqual', function (expectedValue, value) {
return value === expectedValue;
});
});
Here is a solution (built over EmberJS to ease the JS part)
I refactored your sample a little, to have objects for proposed values, which can by the way carry the selected attribute...
The template part:
<script type="text/x-handlebars" data-template-name="my-template">
<div id="my-modal">
<form action="/TestAction" method="post">
<input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />
<label for="Test">Test: (optional)</label>
<select id="Test" name="Test">
<option value="">-- Choose Test --</option>
{{#each values}}
<option {{bindAttr value="id" selected="selected"}}>{{label}}</option>
{{/each}}
</select>
</form>
</div>
</script>
The JS part:
App.MyView = Ember.View.extend
templateName: 'my-template'
MyId: 42
values: [{
id: 1,
label: '1'
}, {
id: 2,
label: '2'
}, {
id: 3,
label: '3',
selected: true
}, {
id: 4,
label: '4'
}]
You can try it # http://jsfiddle.net/MikeAski/uRUc3/
I had same problem.
$('select').val(value);
This is how I solved it, I set the desired value with jQuery after rendering the template. Was surprisingly easy. (Maybe its also a way to keep the templates logicless)