Issue with fieldset format in multiselect cheboxes - javascript

I have the below code in my html page, the issue is with the multiselect checkbox of the div element of id 'alot'
<div id="pagePreferences" class="pageDefault pageAlertsPreferences" data-role="page" data-class="com/xyz/abc/Controller">
<div id="header" data-role="header">
<!-- Loads header here -->
</div>
<div class="contentRegular" data-role="content">
<div data-role="main" class="ui-content" data-theme="c">
<label class="inline">Yes or NO</label>
<select id="togButton" class="slider" name="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<div data-role="fieldcontain" id="alot">
<fieldset data-role="controlgroup">
<div style="font-weight: bold" id="checkBoxes">Business Category:</div>
<input type="checkbox" value="All" class="checkBoxClass" id="ckbCheckAll" />
<label for="ckbCheckAll">All</label>
<input type="checkbox" value="29" class="checkBoxClass" id="29" />
<label for="29">ABC</label>
<input type="checkbox" value="30" class="checkBoxClass" id="30" />
<label for="30">BCD</label>
<input type="checkbox" value="31" class="checkBoxClass" id="31" />
<label for="31">CDE</label>
</fieldset>
</div>
</div>
</div>
<div id="navMenu" data-role="panel" data-animate="false">
<!-- Navigation Menu is loaded here -->
</div>
</div>
First i have hardcoded the values like the lables ( ABC,BCD,CDE). This works fine and i get the output like below.
But when i want to generate the muliselect cheboxes content from the javascript file(com/xyz/abc/Controller),
i am not getting the multiselect checkbox in a proper format
Here is the screen shot
Here is the html :
<div data-role="fieldcontain" id="alot">
</div> -->
Javascript file :
var prefix = '<fieldset data-role="controlgroup">' +
'<div style="font-weight: bold" id="checkBoxes">Business Units:</div>' +
'<input type="checkbox" value="All" class="checkBoxClass" id="ckbCheckAll" />' +
'<label for="ckbCheckAll">All</label>';
var subfix = '</fieldset>';
var html = "";
$('#alot').append(prefix);
for (generate the data from db) {
html = '<input type="checkbox" value="' + unitID + '" class="checkBoxClass" id="' + unitID + '"' + '/>';
html = html + '<label for="' + unitID + '"' + '>' + unitName + '</label>';
$('#alot').append(html);
}
$('#alot').append(subfix);
What might be missing here ? Why the look & feel of the multi select checkboxes is not same when I generate the content dynamically ?

For dynamically added elements, you should enhance them manually using jQM's methods. The simplest way is using .enhanceWithin() called on parent div. This method will create any widget within that div in spite of its' type.
/* create controlgroup and append "All" checkbox to it */
var ctrlgrp = $("<div/>", {
"data-role": "controlgroup",
id: "checkBoxes"
}).append('<input type="checkbox" value="All" class="checkBoxClass" id="ckbCheckAll" /><label for="ckbCheckAll">All</label>');
/* loop through your data array and append checkboxes to ctrlgrp */
for (var i = 0; i <= 5; i++) {
ctrlgrp.append('<input type="checkbox" value="value' + i + '" class="checkBoxClass" id="cb' + i + '"' + '/><label for="cb' + i + '"' + '>Checkbox ' + i + '</label>');
}
/* append all elements to "alot" div and then enhance the elements */
$("#alot")
.append(ctrlgrp)
.enhanceWithin();
/* check/uncheck checkboxes
with change event delegated to it
since it's dynamically added */
$("#alot").on("change", "#ckbCheckAll", function () {
$(this)
.closest(".ui-controlgroup")
.find("[type=checkbox]")
.prop("checked", $(this).prop("checked"))
.checkboxradio("refresh");
});
Demo

Related

Adding values to placeholder using checkbox

Basically I have 4 checkbox elements in my form and a text field up top. The text field has a placeholder with a product name — product price format. Each checkbox has a product name and product price as well, and I want to use javascript to change the placeholder value once a checkbox is checked. The issue is that the product price should be a SUM of default placeholder base price and the product price of the checkbox that was checked. The first part of the placeholder should change from product name to product name + product name.
So far I have only been able to use javascript to change the value of the placeholder entirely, which would work if I had only one checkbox, but I have 4 so it doesn't.
In a perfect world the placeholder should display Basic Package + Video + Picture + Tour + Emergency — €30 when all checkboxes are checked, and Basic Package + Picture + Tour — €20 when only Option2 and Option3 are checked. And so on, and so on.
Here is a simplified code of what I am trying to achieve (note: only Video works in my code):
$('.Option1').on('change', function(e) {
if ($(this).is(':checked') === true) {
$('.PriceInput').attr('placeholder', 'Basic Package + Video — €15');
} else $('.PriceInput').attr('placeholder', 'Basic Package — €10');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact-basic" method="post" action="mailer-basic.php">
<div class="field">
<input class="form-control PriceInput" type="text" name="basicpackage" id="basicpackage" placeholder="Basic Package — €10" disabled />
</div>
<div class="field">
<input class="Option1" type="checkbox" id="videobasic" name="optiesbasic[]" value="Video">
<label for="videobasic">Video — €5</label>
</div>
<div class="field">
<input class="Option2" type="checkbox" id="picturebasic" name="optiesbasic[]" value="Picture">
<label for="picturebasic">Picture — €5</label>
</div>
<div class="field">
<input class="Option3" type="checkbox" id="tourbasic" name="optiesbasic[]" value="Tour">
<label for="tourbasic">Tour — €5</label>
</div>
<div class="field">
<input class="Option4" type="checkbox" id="emergencybasic" name="optiesbasic[]" value="Emergency">
<label for="emergencybasic">Emergency — €5</label>
</div>
I've removed the number from each class="Option"
then you can do something like this:
$('.Option').on('change', function(e) {
var s = "";
var p = 10;
$('.Option').each(function() {
if ($(this).is(':checked') === true) {
s += " + " + $(this).val();
var tempP = +$(this).next().text().split('€')[1];
p = p + tempP;
}
});
$('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});
Demo
$('.Option').on('change', function(e) {
var s = "";
var p = 10;
$('.Option').each(function() {
if ($(this).is(':checked') === true) {
s += " + " + $(this).val();
var tempP = +$(this).next().text().split('€')[1];
p = p + tempP;
}
});
$('.PriceInput').attr('placeholder', 'Basic Package' + s + ' — €' + p);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact-basic" method="post" action="mailer-basic.php">
<div class="field">
<input class="form-control PriceInput" type="text" name="basicpackage" id="basicpackage" placeholder="Basic Package — €10" disabled />
</div>
<div class="field">
<input class="Option" type="checkbox" id="videobasic" name="optiesbasic[]" value="Video">
<label for="videobasic">Video — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="picturebasic" name="optiesbasic[]" value="Picture">
<label for="picturebasic">Picture — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="tourbasic" name="optiesbasic[]" value="Tour">
<label for="tourbasic">Tour — €5</label>
</div>
<div class="field">
<input class="Option" type="checkbox" id="emergencybasic" name="optiesbasic[]" value="Emergency">
<label for="emergencybasic">Emergency — €5</label>
</div>

Iterate through HTML table and filter certain column values

I am using the following JS to iterate through an html table and extract values of columns 1 and 2 from the many rows in the table, the value I get contains a bunch of information that I do not require, i.e.
I get the following of column 1:
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input name="asset_cost_19" type="text" value="$5,000.00">
</div>
where as I would like to only get the dollar value:
$5,000.00
also for column 2 I get the following:
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox ui-mini">
<label for="asset_allocation_capex_19" class="ui-btn ui-corner-all ui-btn-inherit ui-checkbox-off ui-first-child">
Capex
</label>
<input type="checkbox" name="asset_allocation_capex_19" id="asset_allocation_capex_19" data-mini="true">
</div>
<div class="ui-checkbox ui-mini">
<label for="asset_allocation_opex_19" class="ui-btn ui-corner-all ui-btn-inherit ui-checkbox-on ui-btn-active ui-last-child">
Opex
</label>
<input type="checkbox" name="asset_allocation_opex_19" id="asset_allocation_opex_19" data-mini="true" checked="">
</div>
</div>
</fieldset>
where as I would like to know which of asset_allocation_opex_ or asset_allocation_capex_ is checked i.e.
checked=""
see row 11 as an example
<input type="checkbox" name="asset_allocation_opex_11" id="asset_allocation_opex_11" data-mini="true" checked="">
<input type="checkbox" name="asset_allocation_capex_11" id="asset_allocation_capex_11" data-mini="true">
Code:
$("#myTable_asset").children("tbody").children("tr").each(function (i) {
var $this = $(this);
var my_td = $this.children("td");
var second_col = my_td.eq(1);
var third_col = my_td.eq(2);
console.log("Second Column Value (row " + i + "): " + second_col.html());
console.log("Third Column Value (row " + i + "): " + third_col.html());
});
Replace
console.log("Second Column Value (row " + i + "): " + second_col.html());
to
console.log("Second Column Value (row " + i + "): " + second_col.find("input[type=text]").val());
You can use .find() to get <input type="text"> child node of second_col, .val() to get the value of an <input> element and .map() to return the values of <input type="checkbox"> as an array
var text = second_col.find(":text").val();
var checkboxes = third_col.find(":checkbox")
.map(function(_, el) { return el.checked }).get();

Jquery: How to return all the data in my Jquery to html when the document is ready?

I have an HTML page in which it has to returns data from a JSON. I made a filter in such a way that it returns the values based on the filter. Here my problem is, the page is not displaying all values when the document is ready even I made the radio button "All" as checked by default. It works when I click on radio buttons later. Can someone help me how can I return all values when the page is initiated?
Here is my fiddle: http://jsfiddle.net/sDsCM/805/
Html:
<fieldset class="question">
<input class="hello" type="radio" name="filter" value="All" checked/>
<span class="item-text">All</span>
<input class="hello" type="radio" name="filter" value="1"/>
<span class="item-text">One</span>
<input class="hello" type="radio" name="filter" value="2" />
<span class="item-text">Two</span>
<input class="hello" type="radio" name="filter" value="3" />
<span class="item-text">Three</span>
</fieldset>
<div id="dbg">
</div>
Javasript:
var i;
$("input[name=filter]").on('change', function () {
var no = $(this).val();
i=no;
var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
$.getJSON( dmJSON, function(data) {
var el = $('#dbg');
var html = '<div class="row s12"/>';
$.each(data.route, function(key, value) {
if(i=="All"){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
else if(value.no==i){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
});
el.html(html);
});
});
Your API seems to be not working message is "Quota exhausted for day" but i have updated code as you can find in below snipeet you just have to add one function which is load data on page load as well as on change function
var i;
var el = $('#dbg');
var HtmlData = LoadData();
el.html(HtmlData);
$("input[name=filter]").on('change', function () {
var no = $(this).val
i=no;
var HtmlData = LoadData();
el.html(HtmlData);
});
function LoadData()
{
var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
var html = '<div class="row s12"/>';
$.ajax({
url: dmJSON,
dataType: 'json',
async: false,
data: {},
success: function(data) {
$.each(data.route, function(key, value) {
if(i=="All"){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
else if(value.no==i){
html +='<div class="card small">' +'<div align="center">' + value.no + "<br><br>" + value.fullname + "</div>" + "</div>" +"</div>"
}
});
}
});
return html;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="question">
<input class="hello" type="radio" name="filter" value="All" checked/>
<span class="item-text">All</span>
<input class="hello" type="radio" name="filter" value="1"/>
<span class="item-text">One</span>
<input class="hello" type="radio" name="filter" value="2" />
<span class="item-text">Two</span>
<input class="hello" type="radio" name="filter" value="3" />
<span class="item-text">Three</span>
</fieldset>
<div id="dbg">
</div>

Removing dynamically created divs with jquery

EDIT: Just so I asks questions better next time. I got a -1 what did I do wrong?
I'm adding quite a lot of html dynamically and want to be able to remove them also one by one.
Below the JQuery. I want to be able to remove the whole $("#row1' + (counter) + '") div including all divs in it by clicking the remove button under it.
Here's a fiddle: http://jsfiddle.net/FullContCoder/Sf9r5/1/
Thanks a lot in advance!
$(document).ready(function() {
var counter = 0;
$(".addButton").click(function() {
var test = $( '<div id="row1' + (counter) + '" class="row"><div class="col-md-2"><p><small>Placement Name:</small></p><input id="inputPlacement' + (counter) + '" type="text" class="form-control input-sm" name="placementName" placeholder="ex: Homepage">' +
'</div><div class="col-md-3"><p><small>URL:</small></p><input id="inputURL" type="url" class="form-control input-sm" name="url" placeholder="ex: http://www.allure.com"></div>' +
'<div class="col-md-2"><div class="row"><div class="col-md-12"><p><small>Select a Date and Time:</small></p></div></div><div class="row"><div class="col-md-12">' +
'<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" readonly=""><span class="add-on"><i class="icon-calendar"></i>' +
'</span></div></div></div><div class="row"><div class="input-append bootstrap-timepicker"><input id="timepicker1" type="text" class="input-small"><span class="add-on">' +
'<i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-md-2"><p><small>Recurring:</small></p><select id="recurring" class="form-control input-sm">' +
'<option name="daily" value="daily">Daily</option><option name="weekly" value="weekly">Weekly</option><option name="month" value="month">Month</option></select></div>' +
'<div class="col-md-2"><p><small>Day of Week:</small></p><div class="row"><div class="col-md-6"><label class="checkbox-inline"><input id="mon" name="test" type="checkbox" value="1"> Mon</label>' +
'</div><div class="col-md-6"><label class="checkbox-inline"><input id="fri" name="test" type="checkbox" value="1"> Fri</label></div></div><div class="row"><div class="col-md-6">' +
'<label class="checkbox-inline"><input id="tue" name="test" type="checkbox" value="1"> Tue</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sat" name="test" type="checkbox" value="1"> Sat</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="wen" name="test" type="checkbox" value="1"> Wed</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sun" name="test" type="checkbox" value="1"> Sun</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="thu" name="test" type="checkbox" value="1"> Thu</label></div></div></div><div class="col-md-1"><p><small>Remove:</small></p>' +
'<button type="button" class="removeButton btn btn-default btn-sm"><span class="glyphicon glyphicon-minus-sign"></span></button></div></div>' )
$('.removeButton').click(function() {
$("#row1' + (counter) + '").remove();
});
counter++;
$("#row1").after(test);
});
});
You should use event delegation to add events to dynamically created elements. And use .closest() to get the first element that matches the selector. Try this:
$(document).on('click','.removeButton',function() {
$(this).closest("div.row").remove();
});
You need to move your remove button click handler outside of add button click handler.
DEMO
You can try it.
$(document).on('click', '.removeButton', function(){
$('#row1' + counter).remove();
});
1) You need to use event delegation here to bind click event to your button since it has been added dynamically to the DOM.
2) Use .closest() to remove the closest matching ancestor .row and remove redundant counter variable here:
3) You also need to move your click handler of remove button outside of the click handler of the add button.
Final code should look something like this:
$(document).ready(function () {
$(".addButton").click(function () {
var test = .....
$("#row1").after(test);
});
$('.removeButton').click(function () {
$(this).closest(".row").remove();
});
});
Updated Fiddle

how to group a dynamically generated radio buttons into a 'controlgroup' in jQuery Mobile

i have a problem in grouping a dynamically generated radio buttons into a jQuery Mobile control group, i generate the radio buttons and append them into a but they are dispalayed separetly although there warping contains a 'controlgroup' data-role, here's my HTML:
<div data-role="collapsible" data-inset="true">
<h1>AddVote</h1>
<div data-role="fieldcontain" >
<form id="voting" action="get">
<label for="name"> <strong>Question:</strong></label>
<input type="text" name="name" id="name" value="" /><br>
<label for="name"><div id="AddButton" data-role="button" data-inline="true">AddOptions</div></label>
<input type="text" name="option" id="option" value="" /><br>
<div id="RemoveButton" data-role="button" data-inline="true">RemoveOptions</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend> <strong>Choose an Option:</strong></legend><br><br>
<fieldset data-role="controlgroup">
<div id="after" data-role="controlgroup" >
///////////////////////Generated radio buttons goes here//////////////////////
</div>
</fieldset>
</fieldset>
</div>
</div>
<a href="#" data-role="button" data-inline="true" >Publish</a>
</form>
and here's the script code:
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<input />', {
'type': 'radio',
'name': 'option1',
'id': id,
'data-role': 'controlgroup',
'data-theme':'e',
'value': '1'
}));
$('#after').append('<label for="' + id + '">'
+ label + '</label><br />').trigger('create');
}
$( '#admin' ).live( 'pageinit',function(event){
$('#AddButton').click(function(){
var x = document.getElementById('option').value;
createRadioElement(this,$('#option').val(),true);
});
Perhaps I don't understand the question correctly but is it the <br /> between the radiobuttons that concerns you? If this is the case then just replace this:
$('#after').append('<label for="' + id + '">'
+ label + '</label><br />').trigger('create');
with this:
$('#after').append('<label for="' + id + '">'
+ label + '</label>').trigger('create');
Also I believe that your <form> and <div> tags are incorrectly nested.

Categories

Resources