best way to construct datalist with mojolicious - perl

What is the best way to construct a html5 datalist with mojolicious?
I looked for a tag helper but did not find a tag helper for constructing it.
Here is an example of a datalist:
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
The list is dynamic and is fetched from a db, so i cannot use a static html chunk.
There are similar tag helpers, e.g. for a <select> tag I can put into my template:
%= select_field country => [[Germany => 'de'], 'en']
which produces:
<select name="country">
<option value="de">Germany</option>
<option value="en">en</option>
</select>
but I couldn't find anything regarding a datalist in the default tag helpers.

It's been a while, but maybe will find it useful.
In the controller, you need to have an array with some items. Let's create it:
my #levelsArray = ();
for (my $i=0;$i<10;$i++){
push #levelsArray, "level00".$i;
}
After that, send it to the template:
get '/index' => sub {
my ( $mojo ) = #_;
$mojo -> stash ('levelsArray' => \#levelsArray);
$mojo -> render (template => 'index' );
};
and finally, render it using:
<%= select_field 'levelSelected' => [ #{ stash('levelsArray') }] %>

I'm not sure how this is mojolicious specific, but wouldn't simple html in your template would be enough:
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
<input type="text" list="frameworks" />
EDIT
Let me clarify, this wouldn't be static HTML in your template...you would fetch your data within controller and pass that data to template which would construct this kind of HTML with it's templating engine.

Related

Change form action according to select option

I have a simple form:
<form name="simple" id="simple" method="post" action="X.php">
<select name="select">
<option value="none"> Select </option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
</select>
</form>
I want X (X.php) to change with option values.
For example, when user selects 1st, it should change to 1.php.
Is it possible?
Yes you can, example with jquery is as follows:
$("#selectID").change(function() {
var action = $(this).val();
$("#simple").attr("action", action + ".php"); // Can also use .prop("action", action + ".php");
});

Custom data-attributes from select_tag not submitting - Rails 4

I have a simple search form_tag in a Rails 4 app.
One of the options is a select_tag:
<%= select_tag "plottable[plottable_id]", options_for_select(Plottable.all.map{ |plottable| [ plottable, plottable.id, { 'plottbale-type' => plottable.class } ] }), prompt: 'Select one option'%>
The HTML is generated properly, resulting in:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
When submitting the form the plottable-type does not get submitted. Here are the params:
Parameters: {"utf8"=>"✓", "from_time"=>"", "to_time"=>"", "plottable"=>{"plottable_id"=>"35"}, "commit"=>"Search"}
Thanks for your suggestions.
Just try this:
<select name="plottable[plottable_id]" id="plottable_plottable_id">
<option value="">Select one option</option>
<option plottable-type="Pool" value="3">Pool1</option>
<option plottable-type="Pool" value="4">Pool2</option>
<option plottable-type="Asset" value="33">Asset1</option>
<option plottable-type="Asset" value="34">Asset2</option>
</select>
<input type="hidden" name=plottable[type] value="", id="plottable_plottable_type">
$('#plottable_plottable_id').on('change', function(){
var type = $('option:selected', this).attr('plottable-type');
$('#plottable_plottable_type').val(type);
})
you can add hidden field tag by rails code as well
<%= hidden_field_tag "plottable[plottable_type]"%>

Catalyst $c->req->params empty?

Trying to Catalyse some prototype pages with form fields. My Catalyst controller does not seem to be getting the inputs from the form when it is submitted.
I have tried to reduce the template & controller down as far as I can and I am still getting this problem.
template is simply:
<body>
<form action="/minimal-testing" method="get">
<select id="select02">
<option value="cat1">cat1</option>
<option value="cat2">cat2</option>
</select>
<select id="select06">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" value="submit" title="submit" />
</form>
<p> Hello, params says: </p>
<p>
[% FOR param IN params ; param.key ; ' = ' ; param.value; END %]
</p>
</body>
Controller is:
sub minimal_testing :Path('minimal-testing') :Args(0) {
use Data::Dumper;
my ( $self, $c ) = #_;
$c->stash(params=>$c->req->params);
$c->stash(template => "dynamic/minimal-testing.tt");
$c->log->debug(Dumper($c->request->params));
}
When I browse to the form, pick from the select options, and submit, my debug log simply says
[debug] $VAR1 = {};
Obviously I am missing something so obvious I am just not seeing it... please enlighten me.
You're dead right. I suspect your Catalyst log should be giving you a clue what's going wrong here. The problem isn't with Catalyst.
Basically, it's malformed HTML - your form inputs each need a name parameter that can be passed back to the server in the POST.
<select id="select02" name="select02">
<option value="cat1">cat1</option>
<option value="cat2">cat2</option>
</select>
id is for CSS, name is for FORM processing.
Try that, and you should get logging like:
[11:31:28.499 16014:debug] Body Parameters are:
.-------------------+----------------------------------------.
| Parameter | Value |
+-------------------+----------------------------------------+
| select02 | cat1 |
| select06 | 2 |
'-------------------+----------------------------------------'
Hope that helps.

jQuery addClass using input select

Im a bit of a jQuery novice.
I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.
Here is an example if it helps!
Thanks
<form>
<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>
<div class="3">styled content</div>
</form>
You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:
$("select").change(function() {
$("div").attr("class", $(this).val());
});
(EDIT) Change it to:
$("select#np_blog_layout").change(function() {
$("div#changebox").attr("class", $(this).val());
});
What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.
$('select').change(function() {
$('div').attr('class', $(this).attr('id'));
});
First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using jQuery.
<form>
<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>
<div id="styledContent" class="3">styled content</div>
</form>
On JS
//Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);
//The event handler
function changeStyle()
{
//Set class to selected value
$('#styledContent').class($('#SelectElement').val());
}

Converting checkbox to select (perl)

Before:
<input type='checkbox' name='killerFeature' id='killerFeature'
<%= param('killerFeature') ? ' checked' : ''%>
/>
Now:
<select name="killerFeature" id="killerFeature" class="select">
<option value="1">Enable</option>
<option value="0">Disable</option>
</select>
How do I insert the same checked (should be 'selected' now I guess?) condition in the select now?
This is a perl app, built using Mojolicious web framework.
Many thanks for your help!
Yes, the condition should be selected (selected="selected") but i belive you already figured that out from your other post :)
<select name="killerFeature" id="killerFeature" class="select">
<option value="1" selected="selected">Enable</option>
<option value="0">Disable</option>
</select>
Also from what i saw there inst a way to create the select like you can for the input as in the below example:
<%= input 'test', type => 'text' %>
So it would be something like:
<%== param('killerFeature') eq $my_var ? ' selected="selected"' : ''; %>
Ofc you would need to replace the above to your current variables and field names.
GL:)