I'm creating custom validation function used in Magento and there are passed 2 parameters to callback: v - value of field, element - element that is validated. My problem is that this HTML element is string and I can't use Prototype to create JavaScript object like when I use jQuery:
var element = '<input type="text" value="ABC" name="some_name" class="class1 class2" />';
console.log(jQuery(element));
How to get the same result with Prototype?
If you have a string that is HTML and want a HTMLElement object from it this will work
var element = '<input type="text" value="ABC" name="some_name" class="class1 class2" />';
var $element = new Element('div').update(element).down('input');
//change the down() method to the appropriate CSS selector
This is also helpful if you need to select specific elements out of a long string of HTML
var element = '<div id="div1"><input type="text" value="ABC" name="some_name" class="class1 class2" /></div><div id="div2"><span>Valuable text</span></div>';
var $element = new Element('div').update(element).down('div2 span');
Related
I'm using Laravel for my application.
I have made a PRINT button on my HTML page which is simply calling a route, to be able to send it throught DOMPDF to print it to PDF.
Print
Now, in my Controller, I would like to get the value of a radio button which has been created in the HTML this way
<div class="col-lg-7 selectie">
<input type="radio" name="factuur_selectie" id="factuur_selectie" value="1" checked> Alle facturen 
<input type="radio" name="factuur_selectie" id="factuur_selectie" value="2"> Betaalde facturen
<input type="radio" name="factuur_selectie" id="factuur_selectie" value="3"> Onbetaalde facturen
</div>
In my controller I can not find the way to get the value of the checkbox, I suppose because I'm not doing a submit ?
How would I be able to get the value of the radio button please?
public function printFacturen(Request $request){
}
I already tried three following ways, but it is not working :
$fields = Input::get('factuur_selectie');
$value = $request->get('factuur_selectie');
$request->input('factuur_selectie');
Bestregards,
Davy
You need to grab the value of factuur_selectie using JavaScript and add it to the generated URL, something like:
var val = document.querySelector('#factuur_selectie:checked').value;
var btn = document.querySelector('.btn.btn-default');
var url = btn.getAttribute('href');
btn.setAttribute('href', url + '?factuur_selectie=' + val);
Then you should be able to retrieve factuur_selectie from your controller.
Probably you are going to need to update the value everytime an option is selected. In that case you can retrieve the value from then event itself:
var btn = document.querySelector('.btn.btn-default');
document.querySelector('.selectie').addEventListener('change', function(event) {
var val = event.target.value;
var url = btn.getAttribute('href');
var pos = url.indexOf('?');
// If URL already contains parameters
if(pos >= 0) {
// Remove them
url = url.substring(0, pos);
}
btn.setAttribute('href', url + '?factuur_selectie=' + val);
});
Here you have a working example.
Could not find any examples/Code Samples on the web.Just setting the value attributes doesn't work with angular so wanted to know if there is any other way of setting the value for the input box.
<input id="company_name" ng-model="company.name" type="text">
Wanted to set the value to the AJAX response received.
bind the input to a property in the controller, call a function in ng-click and set the property value:
function myCtrl(DataService){
var vm= this;
vm.getData = function(){
DataService.getData().then(function(res){
vm.company = res;
});
}
<input id="company_name" ng-model="company.name" type="text" >
<button ng-click="ctrl.getData()">Get Data</button>
I was creating a model where the structure as follows:
public class A {
private Long id;
private Type type;
private Set<String> names;
private Set<Long> ids;
private Set<String> subnames;
private Set<Long> subids;
...........
}
I would like to create the model, with multiple fields as many as I like.
so the I have created the form as follows to add new rows dynamically.
Creation Form: One of the fields-->
<form>
<div id="addNewname" class="form-group">
<label>name</label>
<div class="col-lg-4">
<input type="text" name="name_1" id="name" readonly>
</div>
<button id="btnAddname" type="button"
type="hidden"
value="btnAddName" name="btnAddName">Add
New</button>
</div></form>
With the Script to add new as follows:
int count = 1;
$(document).on("click", "#btnAddNew", function(){
count++;
$('#addNewNew').after(
'<div>' +
'<label> New Name</label>'+
'<div >' +
'<select name="name_'+ count +'">'+
'<option value="0">None</option>' +
'<c:forEach items="${names}" var="name">' +
'<option value="${name.id}">${name.name}</option> '+
'</c:forEach>'+
'</select>'+
'</div>'+
'</div>');
});
I was able to send the value to the controller of the value name="name_1" where the form been defined, but I could not do the same for the values created from the append form--script.
Any idea or suggestion to work out this, I have tried many methods but ...
You may use LazyList to add as many names you want.
In your command class, instead of using Set to define your names, try this,
import org.apache.commons.collections.FactoryUtils;
import org.apache.commons.collections.list.LazyList;
...
private List names = LazyList.decorate( new ArrayList(),
FactoryUtils.instantiateFactory(String.class));
...
In the Jsp page, all that are needed is using the arrayIndex to access or bind values. i.e.
<form:input path="names[0]" cssErrorClass="errorInput" maxlength="30"/>
In the javascript, do the same, use the arrayIndex when your create more text input on the fly.
I have this issue: Multiple classes with several span inside of each class and want to extract all data attributes of the first class.
<div class="parent_class">
<span data-year="a_1">Data</span>
<span data-make="b_1">Data</span>
<span data-model="c_1">Data</span>
<span data-motor="d_1">Data</span>
</div>
<div class="parent_class">
<span data-year="a_2">Data 2</span>
<span data-make="b_2">Data 2</span>
<span data-model="c_2">Data 2</span>
<span data-motor="d_2">Data 2</span>
</div>
I have made several tries and just got the first data attribute with not problem.
var year_response = $('.parent_class:first span').data('year');
Response:
year_response = a1;
But when I tried for the make and other data attribute I got undefined
Actual:
var make_response = $('.parent_class:first span').data('make');
**Response:
make_response = undefined;**
Desire:
var make_response = $('.parent_class:first span').data('make');
**Response:
make_response = b_1;**
How about just fetching all data attributes of the spans as objects and mapping them to an array :
var data = $.map($('.parent_class:first span'), function(el) {
return $(el).data();
});
FIDDLE
or an object if all the data attributes are different :
var data = {};
$.each($('.parent_class:first span'), function(i, el) {
$.each($(el).data(), function(k,v) {data[k] = v});
});
FIDDLE
You are telling it to get the first span, but the you want the second span (the one with make). What about getting the first with the make data attribute?
console.log($('.parent_class > span[data-make]:first').data('make'));
You could also select the nth element with the nth-child selector:
console.log($('.parent_class > span:nth-child(2)').data('make'));
I have the following code on a view:
#using (Html.BeginForm()) {
<div class="select-box form">
<p>
<strong>Select transcript name to view:</strong>
#Html.DropDownList("license", (SelectList)ViewBag.Licenses, new { onchange = "this.form.submit();" })
</p>
</div>
<div class="select-box form">
<p>
<strong>You may have multiple periods for each transcript name:</strong>
#Html.DropDownList("period", (SelectList)ViewBag.Periods, new { onchange = "this.form.submit();" })
</p>
</div>
}
I need to implement some logic depending on which dropdown cause the postback. I'm thinking to add a hidden input and set value of the control name by jQuery before submit the form, but I'm wondering if there is a 'native' way to do this.
This is my controller signature:
public ActionResult Checklist(int license, int period)
Thanks in advance!
I would apply a class to the dropdown so that my jQuery can use that as the selector criteria
#Html.DropDownList("license", (SelectList)ViewBag.Licenses, new { #class="mySelect"})
#Html.DropDownList("period", (SelectList)ViewBag.Periods, new { #class="mySelect"})
<input type="hidden" id="source" name="source" value="" />
And the script is
$(function(){
$(".mySelect").change(function(){
var itemName=$(this).attr("name");
$("#source").val(itemName);
$("form").submit()
});
});
Use something like this. (Here you are calling the action method instead of submitting the form)
Which ever dropdown caused the change will pass non zero value to the action method and the other will pass 0.
#Html.DropDownList("license", (SelectList)ViewBag.Licenses, new { onchange = "document.location.href = '/ControllerName/Checklist?license=' + this.options[this.selectedIndex].value + '&period=0'" })
#Html.DropDownList("period", (SelectList)ViewBag.Periods, new { onchange = "document.location.href = '/ControllerName/Checklist?license=0&period=' + this.options[this.selectedIndex].value;" })
Hope this helps!