Is it possible when using jQuery Clone to increment the current GUID of an object?
At present, when the selecter is initialised all selects, including hidden ones, are assigned a GUID.
The cloning process simply duplicates the template div. The problem being that it also clones the GUID of the hidden select, which means any dynamically added selects are rendered unusable as more than one select share the same guid.
To implement all selects on a form I am using the code below:
$(document).ready(function () {
$("select").selecter();
});
The code to create a clone of a row, which includes a select is as follows:
$('.addButton').on('click', function () {
var $template = $('#Template'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.attr('title', 'DynamicRow')
.insertBefore($template);
$("#Form").validate();
$clone.find('[name="Type[]"]').rules("add", { required: true });
});
I have also included the HTML below to demonstrate what is being cloned:
<div class="fieldset">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
<div class="fieldset hide" id="Template">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
The Formstone Classic Selecter library can be found at:
https://github.com/FormstoneClassic/Selecter/blob/master/jquery.fs.selecter.js
The only workaround I could find, was to initialise each form select individually, therefore $("select").selecter(); could not be used as this initialises all selects, including hidden ones.
HTML
<div class="fieldset" id="Types">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
<div class="fieldset hide" id="Template">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
To initialise the first select I used $('#Types').find('[name="Type[]"]').selecter(); and to initialise the hidden clone select I used $clone.find('[name="Type[]"]').selecter();
I hope this proves useful to others.
Related
I have an angular application in that I have to show the dropdown list based on the picklist values.
.service.ts
public getLists() {
let baseUrl = `/endpoint`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(LookupData: LookupData) => {
if (LookupData) {
this.option1data = LookupData.option1Data;
this.option2data = LookupData.option2Data;
this.option3data = LookupData.option3Data;
this.option4data = LookupData.option4Data;
}
},
(err) => {
console.error(err);
}
);
}
.component.html
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Category</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</div>
</div>
</div>
<div class="row>
<div class="form-group">
<div class="col-sm-3>
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>
//In this dropdown I have to show the lists based on the selection of picklists
</option>
</select>
</div>
</div>
</div>
So In tha above code if I select option1 from the picklist I have to show the option1Data dropdownlist etc..
can anyone helpme on this
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option disabled selected="true">Select pick</option>
<option *ngFor="let items of LookupData" [ngValue]="items.name">
{{ items.name }}
</option>
</select>
</div>
</div>
</div>
please put the above code in the HTML file. Hope this code will helpful to you
I found a way how to pop up a new text box after click on "Others" from the dropdown. But the problem here is database capture "Other" instead of the new data that I key in. For example I key in "Policeman" but it captured "Other" in my database.
<head>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text"
name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
</head>
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">Website Subscribers</h3>
</div>
<select name="OCCUPATION" id="OCCUPATION"
onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Student">Student</option>
<option value="Educator">Educator</option>
<option value="Designer">Designer</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div class="box-footer">
<div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
<div class="clearfix"> </div>
</div>
</div>
</form>
What should I change ya?
I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.
I have a screenshot as shown below:
The screenshot above belongs to the following code:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<!-- Date START -->
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">
</div>
<!-- Date END -->
<!-- Yes/No Dropdown START -->
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>
<option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
<option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>
</select>
</div>
<!-- Yes/No Dropdown END -->
<!-- Add new row button START -->
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()"/>
</div>
<!-- Add new row button END -->
</div>
<!-- Javascript Code START -->
<script>
function rowAdd() {
}
</script>
<!-- Javascript Code END -->
On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:
$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];
if(file_exists('../feeds/ptp-ess_landing_house.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
Problem Statement:
I am wondering what JavaScript code I need to add so that it add another select of rows. When I say Select of Rows, I meant to say the following. I added an onclick event on input tag.
You'll need to change some minor things, but this is the general idea:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" />
</div>
<div id="rows">
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
return `
<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
`
}
</script>
I'm trying to pass a value which is selected by the dropdown on to a button (data-target) so i can show modals dynamically. I'm generating the modals with PHP so everything will be generated automatically.
So whenever a user selects a dropdown, value gets passed to the <button data-target"xx">.
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option value="1">Shop 1</option>
<option value="2>">Shop 2</option>
<option value="3">Shop 3</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
<button type="button" class="btn btn-info btn-sm" data-
toggle="modal" data-target="#myModal">+</button>
</div>
</div>
</div>
I know how to pass a value from dropdowns to input fields, but passing a value from the dropdown to a button data-target is bit tricky. What's the best way to achieve this?
Below given code is the code i used to pass the dropdown data-price value to a input field.
Passing a value from a dropdown to a input field
<script>
$(document).ready(function() {
$('.select2').select2();
});
$(document).ready(function() {
$('select.material-price').change(function() {
var materialValue =
$(this).select2().find(":selected").data("price");
$(this).closest('.row').find('.material-
total').val(materialValue);
});
});
</script>
Since you're using jQuery you've just to attach on change event to the dropdown the change the value of the button like :
$('.shop-name').on('change', function() {
$(this).closest('.row').find('.btn-info').attr('data-target', '#myModal'+$(this).val());
//Just for test purpose
console.log($(this).closest('.row').find('.btn-info').attr('data-target'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option value="1">Shop 1</option>
<option value="2">Shop 2</option>
<option value="3">Shop 3</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
<button type="button" id='target-btn' class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">+</button>
</div>
</div>
</div>
This is a different approach but this will work i tested it out. :)
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option data-link="#100000" value="#10">Material A</option>
<option data-link="#400000" value="20>">Material B</option>
<option data-link="#500000" value="30">Material C</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
Hello
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select.shop-name').change(function() {
var shopValue =
$(this).select2().find(":selected").data("link");
$(this).closest('.row').find('.shop-value').attr('href'
,shopValue);
});
});
</script>