Say that I have this:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</form>
</div>
and say that some part of my code I run this:
$('#textarea1').text(someverylongstring)
The issue with this is that my textarea will stay "small" until I click on it and arrow down to discover the text that I added to it. When the bottom is found the textarea automagically expands to a larger textarea to accommodate the content. My question is, after adding the text to the textarea is there a way to force toggle the resizing aspect of the element?
Have you tried the advanced note from their docs?
When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.
So after adding your very long text, you would call this:
$('#textarea1').trigger('autoresize');
I use this in VueJS
M.textareaAutoResize($('#textarea1'));
If it does not work, try to set timeout before initiating the autoResize.
Related
I am designing a footnote at the bottom of an article to annotate following up status;
<article class="col-md-12">
</article>
<div class="col-md-12 footnote">
add a footnote
</div>
When the "add a footnote" link is hidden after being clicked and prompt the "footnote form" which I set autofocus which textarea. The "autofucus" works properly.
$('.footnote-link a').on('click', function (e) {
e.preventDefault();
...
var $footnoteForm = $(`
<form class="article-footnote-form footnote-form" style="margin-top:10px" >
<div class="form-group row">
<div class="col-md-9">
<textarea class="form-control" name="footnote" rows="3" autofocus></textarea>
</div>
<div class="col-md-3">
<button class="btn btn-primary" type="submit" id="articleFootnoteBtn">Add Annotation</button>
</div>
</div>
</form>`);
$articleFootnoteLink.parent().hide();
$articleFootnoteLink.parent().after($footnoteForm);
The form is submitted to server using Ajax then I cleared the forms by
$footnotesTop.find(".footnote-form").html(""). Now the page displays the article and the newly added footnote.
However, if I click the "add footnote" again, it unable to get focus automatically as it does at first time until I refresh the page to click.
How could I get the form focus during the second click event.
You need to use a delegated eventHandler. The js code $('.footnote-link a').on('click', function (e) { is only applied to the elements jQuery finds using that selector when the page is loaded.
Try $( document ).on('click', '.footnote-link a', function (e) {. You can use a tighter selector rather than document - it seems like .footnote would work based on what I see.
jQuery delegated events tutorial
I have a reCaptcha inside Vue component as a part of my register form:
<div class="form-group">
<vue-recaptcha sitekey="KEY"></vue-recaptcha>
<div class="invalid-feedback" v-if="errors.register.recaptcha" v-for="value in errors.register.recaptcha">
<strong>{{value}}</strong>
</div>
</div>
The problem is when I get message in errors.register.recaptcha - it doesn't appear in div I specified for show recaptcha error. I see that div in DOM console tab, I see error's text inside <strong></strong>, but I don't actually see it on the page. What's wrong? reCaptcha neighbourhood might prevent showing other elements?
I have some other groups which contains input + div where error might appeared and there are no problems to show an error.
Update: I noticed that only this one div with class="invalid-feedback" is display: none. All other div with the same class has display: block.
Solved by adding hidden input
<input class="form-control"
:class="{' is-invalid': errors.register.recaptcha}"
hidden>
The whole element might be
<div class="form-group">
<input class="form-control"
:class="{' is-invalid': errors.register.recaptcha}"
hidden>
<vue-recaptcha sitekey="KEY"></vue-recaptcha>
<div class="invalid-feedback" v-if="errors.register.recaptcha" v-for="value in errors.register.recaptcha">
<strong>{{value}}</strong>
</div>
</div>
I have a paper-card containing user data that when I click the "edit" button, I want the data displayed to change into text boxes so that I can edit the data and save when clicking "save".
I have seen something similar in JQuery, however I am wanting to avoid using this.
Any thoughts?
<paper-card>
<div class="card-content">
<div class="bodyHeaderText">Personal</div>
<div class="bodyNormalText">Name: Robert Jones{{user.FUllName}}</div>
<div class="bodyNormalText">DOB: 21/06/1987{{user.dateofbirth}}</div>
<div class="bodyNormalText">Age: 30{{user.age}}</div>
<div class="bodyNormalText">Gender: Male{{user.gender}}</div>
</div>
<div class="card-actions"
<paper-icon-button icon="create">edit mode</paper-icon-button>
</div>
</paper-card>
Create two paper-card elements. One with text and one with input boxes. Use iron-pages to switch between them by clicking on the edit/save button and changing a variable (_view in the example below).
<iron-pages attr-for-selected="data-view" selected="{{_view}}">
<paper-card data-view="default">
<!-- TEXT -->
</paper-card>
<paper-card data-view="edit">
<!-- INPUTS -->
</paper-card>
</iron-pages>
Instead of writing your own component, you can use paper-datatable. It works in the same way as you want. demo-link
Hope this helps :)
I'm currently adding a bunch of checkboxes dynamically during the "pageinit" event, which I am able to both add and check successfully. The checkboxes are added by appending instances of the following stub to a "ul"-component:
<li>
<div class = "new-student">
<img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
<!-- Block A -->
<div id="grid" class="ui-grid-a ui-mini">
<div class="ui-block-a ui-mini">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="name-student">Name</h2>
<p class="attendingtime-student">00:00</p>
</div>
</div>
<!-- Block B -->
<div class="ui-block-b">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="pickuptype-student">null</h2>
<p class="pickuptime-student">00:00</p>
</div>
</div>
</div>
<form>
<!-- Attending -->
<fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
<input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">1</label>
<input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
<label for="checkbox-h-2b">2</label>
<input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
<label for="checkbox-h-2c">3</label>
</fieldset>
</form>
</div>
However; I am unable to update the visual styling of the checkboxes, which result in all checked boxes looking like this:
I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).
Please help!
Regarding this:
I've tried calling ".checkboxradio.('refresh')" but it only results in
an error (saying I can't call that method on a component that has yet
to be initialized).
Usually when this kind of error occurs you need to do this:
$('#someId').checkboxradio.().checkboxradio.('refresh');
First call will initialize checkboxradio widget and second one will enhance its markup.
But this is not case with checkbox widget, to enhance dynamically added checkbox you need to do this:
$('[type="checkbox"]').checkboxradio();
Without refresh parameter.
And here's a working example: http://jsfiddle.net/Gajotres/VAG6F/77/
There are of course other solutions, read this article if you are using older versions of jQuery Mobile up to 1.4 (mentioned functions are currently deprecated).
If you are using jQuery Mobile 1.4 and you are planing in using future versions then use this method:
$('.ui-content').enhanceWithin();
Read more about it here.
There's a third option, instead of pageinit use pagecreate event. Like pageinit it will trigger only once but unlike pageinit it triggers before jQuery Mobile enhances active page. So everything appended at this point will automatically become enhanced.
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)