This question already has answers here:
Dynamic controlgroup and checkboxes unstyled
(6 answers)
Closed 8 years ago.
<div data-role="fieldcontain">
<div id="listado" data-role="listview">
<fieldset data-role="controlgroup" id="equiposHechos">
</fieldset>
</div>
</div>
and my javascript is
var identificador=4
$( "#recibo" ).on( "pageinit", function( event ) {
for(i=0;i<=identificador;i++){
$("#equiposHechos").append('<input type="checkbox" name="calificarEquipo'+i+' id="calificarEquipo'+i+'"/>'+'<label for="calificarEquipo'+i+'">Equipo Numero'+(i+1)+'</label>');
}
})
I want to add checkboxes dynamically ... but I get no styles as I do to recharge them or that they charge me as they should be when they are static
If you're using jQuery Mobile 1.3.2 or below, you need first to enhance/style markup of checkbox or radio buttons using .checkboxradio() and then re-style controlgroup by calling .controlgroup("refresh").
var identificador = 4;
for (i = 0; i <= identificador; i++) {
$('<label for="foo' + i + '">Foo' + i + '<input type="checkbox" id="foo' + i + '"/></label>').appendTo("#equiposHechos");
}
/* widgets enhancement */
$("[type=checkbox]").checkboxradio();
$("#equiposHechos").controlgroup("refresh");
Demo
You have to explicitely ask jquery mobile to restyle them:
Check this:
Dynamic controlgroup and checkboxes unstyled
$("input[type='checkbox']").checkboxradio("refresh");
Related
I'm trying to load selected values from db and set it on the select2. i'm using the select2 4.0.10 version. im loading the data using ajax and set the select option to the select2 element after the document is ready.
so, i tried using the $("#area").val(selectedValues).trigger("change"); but nothing seems to be selected.
here is some code of my view.
<input class="form-control" type="text" id="sourceValues" value="CMS,KDY,RWG">
here is my select2 element
<div class="form-group row">
<label class="col-md-3" for="area">Area Tagih Kolektor</label>
<div class="col-md-9">
<select id="area" class="js-example-basic-multiple form-control" name="area[]" multiple="multiple" required>
</select>
</div>
</div>
and here is my script for set the selected values.
<script>
$(document).ready(function(){
nav_active();
var selectedValues = ["CMS","KDY","RWG"];
$('.js-example-basic-multiple').select2({
placeholder: "Pilih Cabang Area Tagih Collector Agency...",
multiple: true
});
console.log(selectedValues);
//Date picker
$('#tgl_berlaku').datepicker({
autoclose: true
})
//Prevent enter to submit
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
alertify.error('Untuk melakukan submit form, tekan tombol "Simpan"!');
return false;
}
});
$.ajax({
url: "<?php echo base_url();?>ama/c_agency/populate_dropdown_cabang",
type: 'GET',
success: function(data) {
var html = '';
var j;
data = JSON.parse(data);
for(j=0; j<data.length; j++){
html += '<option value="'+data[j].GroupBranchID+'">'+data[j].branch+'</option>';
}
var posisi = "#area";
$(posisi).append(html);
}
});
$("#area").val(selectedValues).trigger("change");
});
function nav_active(){
var d = document.getElementById("nav-ama-agency");
d.className = d.className + "active";
}
</script>
there is no error when im running the script.
You need to change the way you are appending options to Select Box in your ajax success callback.
Instead of following way to append options.
data = JSON.parse(data);
for(j=0; j<data.length; j++){
html += '<option value="'+data[j].GroupBranchID+'">'+data[j].branch+'</option>';
}
You need to append options using the following method
for(j=0; j<data.length; j++){
var option = new Option(data[j].branch, data[j].GroupBranchID );
$("#area").append(option);
}
Document states that
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control:
Here is the JS Fiddle which adds New Option to Select Box on a Click Event. In your case, Click Event fires an AJAX Call and remotely fetches data.
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.
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!
just a quick question about the mvc JqueryUI framework,
i have a _layout.cshtml page which initializes a set of tabs
i have a view which has a jqueryUI datepicker on it.
the View is loaded Dynamically into the tabs and displayed, but if i load a subsequent instance of the View on the Tabs then the datepicker will only populate the first instance of the datepicker.
my question is this
1. MVC uses independent Objects to create independent Views with the same ids as on the views
2. JQueryUI uses the XML Dom with Unique Ids to create its base objects
so how are these supposed to work together.
my View is as follows
<div class="PoCreate">
<div id="pnlProject">
<fieldset>
<legend>Project</legend>
<label for="ProjectNo">
Project #:
</label>
<input type="text" name="ProjectNo" id="ProjectNo" />
<input type="button" name="btnProjectNo" id="btnProjectNo" data-linked-search="#Url.Action("Project", "SearchObj")"
value=".." />
</fieldset>
</div>
</div>
#Url.Script("~/scripts/PageScripts/_PoIndex.js")
The Script file contains
$('.PoCreate').PoCreate({});
and the PO function contains
$.fn.extend({
PoCreate: function (opt)
{
$(this).each(function ()
{
var _self = $(this.parentNode),
_opts = {}, tabIdContext = $(this.parentNode).attr('id');
$.extend(_opts, (opt || {}));
$('.date', _self).each(function ()
{
$(this).attr('id', tabIdContext + '-' + $(this).attr('id'));
$(this).datepicker(Globals.Dates).keypress(function (e) { return false; });
})
$(':button').button().filter('[data-linked-search]').click(function (e)
{
$.extendedAjax({ url: $(this).attr('data-linked-search'),
success: function (response)
{
$('#dialog-form').find('#dialog-search').html(response).dialog(Globals.Dialogs);
}
});
});
});
}
});
I found a way to solve this,
On the Create of the JQuery Widget i have to rename the ID of the DatePicker field so that it is unique for the Tab created.
so my TabId = ui-tab-01
and DatePickerId = DatePicker1
renaming the DatePickerId so that it is now ui-tab-01-DatePicker1
I am trying to create a situation where if a user clicks on an "edit" button in a list of text items, she can edit that item. I am trying to make the "edit" button post back using ajax.
Here's my ajax code:
$(function () {
// post back edit request
$('input[name^="editItem"]').live("click", (function () {
var id = $(this).attr('id');
var sections = id.split('_');
if (sections.length == 2) {
var itemID = sections[1];
var divID = "message_" + itemID;
var form = $("#newsForm");
$.post(
form.attr("action"),
form.serialize(),
function (data) {
$("#" + divID).html(data);
}
);
}
return false;
}));
});
But the form.serialize() command is not picking up all the form controls in the form. It's ONLY picking up a hidden form field that appears for each item in the list.
Here's the code in the view, inside a loop that displays all the items:
**** this is the only control being picked up: ******
#Html.Hidden(indexItemID, j.ToString())
****
<div class="datetext" style="float: right; margin-bottom: 5px;">
#Model.newsItems[j].datePosted.Value.ToLongDateString()
</div>
#if (Model.newsItems[j].showEdit)
{
// *********** show the editor ************
<div id="#divID">
#Html.EditorFor(model => model.newsItems[j])
</div>
}
else
{
// *********** show the normal display, plus the following edit/delete buttons ***********
if (Model.newsItems[j].canEdit)
{
string editID = "editItem_" + Model.newsItems[j].itemID.ToString();
string deleteID = "deleteItem_" + Model.newsItems[j].itemID.ToString();
<div class="buttonblock">
<div style="float: right">
<input id="#editID" name="#editID" type="submit" class="smallsubmittext cancel" title="edit this item" value="Edit" />
</div>
<div style="float: right">
<input id="#deleteID" name="#deleteID" type="submit" class="smallsubmittext cancel" title="delete this item" value="Delete" />
</div>
</div>
<div class="clear"></div>
}
It's not picking up anything but the series of hidden form fields (indexItemID). Why would it not be picking up the button controls?
(The ID's of the edit button controls, by the way, are in the form "editItem_x" where x is the ID of the item. Thus the button controls are central to the whole process -- that's how I figure out which item the user wants to edit.)
UPDATE
The answer seems to be in the jquery API itself, http://api.jquery.com/serialize/:
"No submit button value is serialized since the form was not submitted using a button."
I don't know how my action is supposed to know which button was clicked, so I am manually adding the button to the serialized string, and it does seem to work, as inelegant as it seems.
UPDATE 2
I spoke too soon -- the ajax is not working to update my partial view. It's giving me an exception because one of the sections in my layout page is undefined. I give up -- I can't waste any more time on this. No Ajax for this project.
You could try:
var form = $('#newsForm *'); // note the '*'
Update
Did you change the argument to $.post() as well? I think I may have been a little too simple in my answer. Just change the second argument within $.post() while continuing to use form.attr('action')
New post should look like this:
$.post(
form.attr("action"),
$('#newsForm *').serialize(), // this line changed
function (data) {
$("#" + divID).html(data);
}
);