So, I want to show some PvP/PK content based on server. I do not need help with the script - I have it. What I need help with is how to properly show the fields. If Custom is selected, it automatically shows the Custom - PvP field content, but you have the option to select the PK field content. When No Custom is selected, it automatically shows No Custom - PvP field content, but you have the option ot select the PK field content. I have a simple show/hide fields content that I found (on here, I think, when I was searching), but I don't know how to add parent/sub (what I need).
Example of what I want:
Current script: https://jsfiddle.net/Aiphira/f9q0qjdr/
$(document).ready(function() {
$.viewMap = {
'view1' : $('#view1'),
'view2' : $('#view2')
};
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
// show current
$.viewMap[$(this).val()].show();
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="viewSelector">
<option value="view1">No Custom</option>
<option value="view2">Custom</option>
</select>
<div id="view1">
asd
</div>
<div id="view2">
qwe
</div>
Related
First of all, I am really sorry that I could not give specific title about the issue. I have a .net 4.6.1 view page.
I want to create this feature.
Depending on the DepositType, the DefaultDeposit should display either a £ sign or %.
One of the logic, I already tried was to create another property called DefaultDepositPercent. Create a Input Box which is hidden underneath and use Jquery to display or hide this Input Box. Then in my service layer, pass the value inputted in the DefaultDepositPercent to DefaultDeposit.
However, there was an inconvenience that the mvc form also passes the DefaultDeposit value as 0. And there is also an issue of someone fiddling with the Javascript.
I have googled but could not find any answers. It is likely because I could describe the issue in few words.
Any direction would be helpful. Thanks
In bootstrap we just have to place the span tag above or below the input element to get the Prefix or Postfix effect. More Details Here
So the idea is first not to have this post / prefix span tag initially but add it either on DOM ready event or when the drop down selection changes using Jquery insertBefore and insertAfter. Here is a working sample. Hope this is helpful.
$(function() {
SetUpDepositTextBox(); // set up the input box once when DOM is ready
$('.DepositType').on('change', function() {
SetUpDepositTextBox(); // set up the text box when ever the dropdown changes
});
});
function SetUpDepositTextBox() {
$('#depositDefaultWrapper span').remove();
var $this = $('.DepositType');
if ($this.val() == "Amount") {
$('<span class="input-group-addon">£</span>').insertBefore('#depositDefaultWrapper input');
} else {
$('<span class="input-group-addon">%</span>').insertAfter('#depositDefaultWrapper input');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Deposit Type
<select class="DepositType form-control">
<option value="Amount">Amount</option>
<option value="Percentage">Percentage</option>
</select>
Default Deposit
<div id="depositDefaultWrapper" class="input-group">
<input type="text" class="form-control" value="10">
</div>
Brief:
I'm working on a printing directive for angularJs.
Some libraries (handsontable, custom-scoller, etc..) made me to create my own logic instead of using the default printing of the browser.
I find out that the best option is to get the outerHtml of the page and then parse it with jQuery and convert some grids into tables and scrollers into expandable divs. However, everything works perfectly except selects element.
For inputs for example it is very simple, You just ask jQuery to give you the value, but for selects you can't ask for the selected option and get its innerText.
The Question:
How can I fetch from select element that created by ng-options and get the selected option innerText by outerHtml?
For inputs, it's pretty easy just ask for $(input).val()
But for select you can't ask
for $(select :selected)
because it'll gives you wrong selected option and that's because how angularJs works with selects and objects.
Extra Information:
If you'll look on the generated html code by angularJs ng-options it'll look like that:
<select ng-model="type" ng-options="item.value as item.text for item in list" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="number:1" label="Prices" selected="selected">Prices</option>
<option value="number:2" label="Gifts">Gifts</option>
<option value="number:3" label="Total">Total</option>
</select>
As you can see, on the Screen the selected option is Gifts, but on the html code actually the Prices is the one that selected.
So that's why I can't use jquery to get the selected option innerText.
AngularJs doesn't update the html dom of the selected element and causing it to be impossible to get its values with the html source only.
I created a demonstration of the situation on jsFiddle.
Just play with the selectBox, click on getOuterHtml button and see that nothing got change.
Any suggestions?
You can use the value to select the option, then get its html: http://jsfiddle.net/bb23u1vy/1/
var val = clone.find('select').val();
$scope.html = clone.find('select option[value="' + val + '"]').html();
You don't need to assign 1st element of the list to $scope.type. And you can directly fetch selected element from $scope.type.
I have created JSFiddle to demonstrate the same.
<div ng-controller="MyCtrl">
<select ng-model="type" ng-options="item.value as item.text for item in list"></select>
<button ng-click=getHtml()>
Get OuterHtml()
</button>
<code>
{{html}}
</code>
</div>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
AND
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.list = [
{value: 'Prices', text: 'Prices'},
{value: 'Gifts', text: 'Gifts'},
{value: 'Total', text: 'Total'}
];
$scope.getHtml = function(){
$scope.html = $scope.type;
};
}]);
Hope this helps you.
I found what caused the situation. It was the clone.
Just had to get all the data before I clonning and it works.
Hi i have got a dropdownlist and a text box , what i want is to add the product written in the textbox to the dropdownlist dynamically, it should also not duplicate the values.
I have created a table[products] with columns id and product , so the product added to the dropdownlist should be added to that table.
Any ideas on how to get that working , any help and suggestions will be appreciated
<div id="dropdown-container">
<asp:TextBox ID="txtProduct" runat="server"></asp:TextBox><a id="add"
href="javascript:void(0)">Add</a>
<select id="product">
<option>please select</option>
</select>
</div>
Some code that might get you started. Hard to help you without seing the actual source.
In the textbox keyup event:
$(function(){
$('#add').click(function(){
var $productTextbox = $('#txtProduct');
$.get('producthandler.ashx',
{ productName: $productTextbox.val()
/* try to make use of
an ID instead of name here */
})
.done(function(response){
var $option =
$('<option>' + $productTextbox.val() + '</option>');
if(response.productDoesNotExist)
$('#product').append($option);
}
});
});
});
If you provide me with how the actual datasource looks I can give you a more detailed example.
Hi I'm trying to get the values of a checkbox and assign the values checked to all checkboxed with the same id on the page. However my attempt is not working, here is what I'm doing
$('.add_button').click(function() { //they click a div named added
selected=$('#ssrBox').val(); //I get the id of the checkbox and the values however I only get one value.
id=$(this).attr('id'); //I find the id of the div which is ssrBox
$('#ssrBox').change(function() { // I find the rest of the checkboxes with the same id and hopefully make them select the same value
$('#ssrBox').add(selected); //have the value being checked for all
});
<div class="grs-multi-select-area" style="height:120px;width:150px;">
<div class="grs-multi-select-box ">
<input id="ssrBox" class="ssremployeeid" type="checkbox" name="ssremployeeid[]"
value="1312">
Amanda Becker
</div>
<div class="grs-multi-select-box "> // same as above I just collapsed it for viewing purposes
<div class="grs-multi-select-box ">
<div class="grs-multi-select-box ">
</div> //closes main div
I'm not getting the value for the checkbox and nothing is being checked. What I'm I doing wrong?
I am quite confused with what you are trying to execute.
You click a Div or a Checkbox?
The following might help -
Give a class to all the checkboxes.
Something like
$('#yourCheckboxID').click(function(){
var checkboxValue = $(this).val();
$('.yourCheckboxClass').attr('value',checkboxValue);
});
I can help more if you could create a small demo on jsfiddle.
I've a html template that modifies the look and feel of a html select box.
<select id='floorinput' class='select multiple-as-single easy-multiple-selection check-list allow-empty' multiple style="width:100px"></select>
The template uses classes to beautify the select box.
The options of select box are being populated by the result of an ajax call, and is working correctly.
The select box finally renders on browser like this:
<span class="select multiple-as-single easy-multiple-selection check-list allow-empty replacement" style="width: 97px; " tabindex="0">
<span class="select-value alt">All</span>
<span class="select-arrow"></span>
<span class="drop-down custom-scroll" style="">
<span class="selected"><span class="check"></span>Floor-1</span>
<span class="selected"><span class="check"></span>Floor-2</span>
.....
<div class="custom-vscrollbar" style="display: none; ">
<div></div>
</div></span>
<select id="floorinput" class="" multiple="" style="width: 100px; display: none; " tabindex="-1">
<option value="Floor-1" selected="selected">Floor-1</option>
<option value="Floor-2" selected="selected">Floor-2</option>
</select>
</span>
The template works by hiding the actual select box and rendering a fancy selectbox instead.
I want to simulate mouse clicks on this select box. The purpose is to deselect the options that are already selected.
The template code cannot handle the programmatic clicks on options of #floorInput (the actual html input).
So I decided to click the spans like:
var j = 0;
//DEselect selected floors programtically
$("#floorinput option").each(function () {
if ($(this).attr("selected") == "selected") {
console.log('should deselect this:' + $(this).text());
$('.select-value.alt').click();//simulate click to open dropdown
$('.drop-down.custom-scroll span.check')[j].click();//perform click. ERROR here
}
else {
console.log('already selected :' + $(this).text());
}
j++;
});
I am using chrome Version 22.0.1229.94 m on Windows 7.
The code throws an error like :
Uncaught TypeError: Cannot call method 'click' of undefined
But it works as expected when I call the same methods through Chrome's console:
$('.select-value.alt').click();
$('.drop-down.custom-scroll span.check')[0].click();//select or deselect first option
Possible cause of the problem may be the markup of select box is not available immediately after the call of $('.select-value.alt').click();
But I've tried delaying the second method call by several methods and it doesnt work.
Any scenario where jquery methods are working through console but not during actual execution?
Please help.
PS:The spam prevention is not letting me upload the screenshot :(.