I have a kendo ui template that is loaded in my program, but I need one of the elements to be hidden, so I can use a button to toggle them hidden or shown at any time. I want to use a basic jQuery toggle command, but the issue is getting the elements to be in the correct state initially. Can anyone help me initialize ResultsObjectPartial and ResultsObject has hidden and shown?
Here is my template:
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<textarea id="ResultsObjectPartial">
#
var partialResults;
Calculation to return a partial result
#
#= partialResults #
</textarea>
<textarea id="ResultsObject">
#: ResultObject #
</textarea>
<button type="button" id="toggleResults">Full/Partial</button>
</div>
Here is my jQuery:
$(document).on("click", "#toggleResults", function (e) {
$("#ResultsObjectPartial").toggle();
$("#ResultsObject").toggle();
});
I believe it should be as simple as:
<textarea id="ResultsObjectPartial" style="display: none">
What toggle() does is change the CSS display property, in the simplest case setting it to 'none' if it isn't set to that, or removing 'none' if it is. So setting it as 'none' in your html should give you the initial state you are after.
Related
I'd like to show/hide a <div> when a <mat-checkbox> is checked/unchecked.
My checkbox is the following code:
<mat-checkbox formControlName="rushDelivery">
Rush Delivery
</mat-checkbox>
And the <div> I want to show/hide will be below the checkbox, further down on the page.
I have used [(ngModel)] and *ngIf in the past, however from my understanding, the latest version of Angular does not support [(ngModel)] and *ngIf if formControlName is also used in the same element.
I cannot remove the formControlName since I use it to get the value of the checkbox upon the submission of the form. I also don't want to touch that portion of the code in case I break the form.
What would be the easiest alternative solution to show/hide the <div> when the checkbox is checked/unchecked?
Thanks.
In your HTML-
<mat-checkbox (click)='toggle()'>
Rush Delivery
</mat-checkbox>
<div [hidden]='isHidden'>
<p>This is a paragraph</p>
</div>
In your TS, initially define isHidden variable to false-
isHidden=false;
In your function-
toggle(){
this.isHidden=!this.isHidden;
}
you can access the value of a FormControl using get, so, if your formGroup is called, e.g. form, you only need
<div *ngIf="form.get('rushDelivery').value">
..If you can see this is because...
..the checkbox is checked..
</div>
Although [(ngModel)] won't work with formControlName, you can still show/hide the div in serval ways.
option 1: add *ngIf="form.rushDelivery" onto the div that you want to show/hide
option 2: add (change)="checked = change.checked" callback to mat-checkbox and add *ngIf="checked" onto the div
there are multiple ways for achieving the solution, to show/hide the div!
.html
<mat-checkbox formControlName="rushDelivery" (click)='showOrHide()'>
Rush Delivery
</mat-checkbox>
<div [class.hide]='isVisible'>
Some info ...
</div>
.ts
isVisible = true;
showOrHide(){
this.isVisible = !this.isVisible;
}
.css
.hide{
display: none;
}
I've a form with three fields, which are rendered via the jinja2 template & the fields are part of a Django ModelForm. The fields are: CharField, FileField, and Textarea.
And, I've also a textarea like <div> element which exactly works like Stackoverflow's editor, omitting some options like <code>, <image> ...
But, it's totally JavaScript based. Which when rendered on the page disabling that existing TextArea that was rendered from the ModelForm. As, I defined on the page...
<script>
$(document).ready(function () {
$('#txtArea').TxtEdtr();
});
</script>
I've mentioned both the element's IDs same, to always render the second textarea by overriding the first one. And, by hiding that element by - display: none.
And to pass the context of the 2nd created textarea to that modelform textarea, I've used:
$('.myeditor').keyup(function () {
$('#txtArea').innerHTML = $('.myeditor').html();
});
By looking at the browser console I can see that keyup is working but, the context or the 1st element isn't affected. And, as it's a required element I can't submit the form also.
For example, I want to pass that html context as a string to that ModelForm's textarea element before the form is submitted:
$('#txtEditor').innerHTML = $('.editor').html();
result to pass: "<span style=\"font-style: italic;\">hi there ...<br></span>"
which is shown to the console while I ran that code, but not able to pass.
The DOM structure:
<div class="form-group">
<!-- model form element -->
<label for="txtEditor">Body of article</label>
<textarea name="details" cols="40" rows="10"
id="txtEditor" class="form-control" required="" style="display: none;">
</textarea>
<!-- after rendering -->
<div class="row-fluid main ted">
<div id="menubar_txtEditor" class="row-fluid menu-bar">
<!-- menubuttons are displayed here -->
...
...
</div>
<div class="editor" name="details" style="overflow: auto;" contenteditable="true">
<!-- portions here dynamically added if textarea has
any content inside -->
<span style="font-style: italic;">hi there ...<br></span>
</div>
</div>
You can do something like this:
// add data to the editor
$('.editor').prepend($('#txtEditor').val());
// initialize TxtEdtr
window.quill = new Quill('.editor', {
theme: 'snow'
});
// Update the model textarea value after submit
$('form').on('submit', function() {
$('#txtEditor').val(quill.root.innerHTML);
});
Vist jsfiddle, for more.
check network on jsfiddle, it's submitting the desired data.
Firstly a bit of background: I'm modifying Drupal's backend (Node creation form) to dynamically add an html to a dynamically created element.
So, this is not a strictly Drupal question, as I believe what I want to know is within the realm of jQuery rather than Drupal.
In my form, I have a repeater (initially I have 1 textarea element, when I click on 'Add more' I'll have 2 textarea elements, and so on).
What I'd like to achieve is, trigger an event (hide elements, add others) when the 'Add more' button is clicked.
So I wrote this:
(function($) {
'use strict';
$(document).ready(function() {
var $container = $('#edit-field-updates tbody .draggable td div.form-item');
$container.find('textarea').hide();
var select = '<select><option value="template_1">Template One</option><option value="template_2">Template Two</option><option value="custom">Custom</option></select>';
$container.append(select);
$('html').click(function (event) {
$container.find('textarea').hide();
$container.append(select);
});
});
})(jQuery);
Note that the I achieve what I want on page load, which is to modify the element. The problem appears when the user click on 'Add more' to add more items.
PS: Ideally I'd like to post the original code that generates the repeater however I still haven't found it yet. This admin theme is based on the Rubik theme, but its a child theme developed internally by someone who's left so can't figure it out where it is.
I've also tried:
...
$('html').on('click', 'input', function (event) {
alert('OI');
$container.find('textarea').hide();
$container.append(select);
});
...
Which does trigger the alert when I click on the page for the second time (I click on 'Add more', then click again anywhere on the page. I guess because I used 'html' rather than a element), however when I used a specific element rather than 'html' it didn't work.
Any ideas?
EDIT:
I've also tried:
$('#edit-field-updates-und-add-more').click(function() {
$container.find('textarea').hide();
$container.append(select);
});
Which didn't work. Here's the html:
<div class="field-type-text-long field-name-field-updates field-widget-text-textarea form-wrapper" id="edit-field-updates"><div id="field-updates-add-more-wrapper"><div class="form-item"><table id="field-updates-values" class="field-multiple-table sticky-enabled">
<thead><tr><th colspan="2" class="field-label"><label>Updates </label></th><th>Order</th> </tr></thead>
<tbody>
<tr class="draggable odd"><td class="field-multiple-drag"></td><td><div class="form-item form-type-textarea form-item-field-updates-und-0-value">
<div class="form-textarea-wrapper resizable"><textarea class="text-full form-textarea" name="field_updates[und][0][value]" id="edit-field-updates-und-0-value" cols="60" rows="5"></textarea></div>
</div>
</td><td class="delta-order"><div class="form-item form-type-select form-item-field-updates-und-0--weight">
<label class="element-invisible" for="edit-field-updates-und-0-weight">Weight for row 1 </label>
<select class="field_updates-delta-order form-select" id="edit-field-updates-und-0-weight" name="field_updates[und][0][_weight]"><option value="0" selected="selected">0</option></select>
</div>
</td> </tr>
</tbody>
</table>
<div class="clearfix"><input class="field-add-more-submit button-add form-submit" type="submit" id="edit-field-updates-und-add-more" name="field_updates_add_more" value="Add another item"></div></div></div></div>
Use...
$("#AddMoreButton").click(function() {
Your Code Here
});
To add the click event only onto the button rather then the whole page. You can wrap that button .click() function with a document.ready() function so that the click event is set on the button when the page loads.
$(document).ready(function() {
$("#AddMoreButton").click(function() {
Your Code Here
});
});
When you set...
$('html').on('click', 'input', function (event) {...
It causes the entire HTML doc to have the click event set on it.
Things to note: #AddMoreButton corresponds to the ID set on the button so it would look like this.
<button id="AddMoreButton">Add More</button>
I have generated button using ng-repeat directive in angular js. Now I want to generate a textfield inside a div tag on click of that button.
Example buttons -
Example textfields added on click of it -
I am doing this using innerHTML attribute of div tag, like below -
var txt = document.getElementById("paidby").innerHTML;
document.getElementById("paidby").innerHTML=txt+ "<div class='row' style='padding:2px'><div class='col-sm-4'><input type='number' placeholder="+str+"></div></div>";
But I want to know if there is any other better way using angularJS or javascript to do the same so that if I need to remove one or all of the textfields later on, it can be done easily. By removing means deleting and NOT hiding.
(becuase if I want to remove for example textfield 'two' now, I have no idea how I remove it)
You don't want to manipulate the DOM within your controller. Often times, there are better ways to do this within the framework that Angular provides.
You can do this by having another ng-repeat which loops over an array you declare within your controller. For example:
In your view:
<section id="paidby" ng-repeat="textfield in textfields">
<div class='row' style='padding:2px'>
<div class='col-sm-4'>
<input type='number' placeholder="{{textField.str}}" ng-model="textField.value">
</div>
</div>
</section>
In your controller, within your button ng-click logic:
// To add:
$scope.textFields.push({ str: someVariable, value: someValue });
// To remove:
var index = $scope.textFields.map(function(t) { return t.value; }).indexOf(someValue);
if (index !== -1) {
$scope.textFields.splice(index, 1);
}
Try hiding the inputs to start with, then show them if the appropriate button is clicked:
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="" ng-init="array=['one','two','three','four','five']; show=[false,false,false,false,false]">
<button ng-repeat="item in array" ng-click="show[$index] = !show[$index]">{{item}}</button>
<br>
<input type="text" ng-repeat="item in array" placeholder="{{item}}" ng-if="show[$index]" />
</div>
I'm trying to do a fairly straightforward select on blur for a particular field box. I'm not certain why (for my example) I can't simply get the box to change background color on a blur action.
Here is my code:
in the haml html
:javascript
$("person_email").blur(function(){
$("person_email").css("background-color","#D6D6FF");
});
<input id="person_email" name="person[email]" size="30" type="text" class="MB_focusable">
in the html
<script>
//<![CDATA[
$("person_email").blur(function(){
$("person_email").css("background-color","#D6D6FF");
});
//]]>
</script>
jQuery selector is not correct.
If selector is an id of the element, put # before its name and if it is a class, put . before its name in the jquery: $('#person_name').(property)
You Should add # to selector $("person_email") => $("#person_email")