When I type in my textarea once has dected more than 4 characters it enables the preview tab.
If I click on my editor buttons example the button-bold it shows text like **strong text** but even though there is more than 4 characters preview tab does not enabled.
Currently It only enabled when keyup
Question: How can I make sure if I click on a editor button it will
dected how many characters and if greater than 4 will enable tab.
CodePen Example Demo
$('#tab-preview').hide();
$("#textarea_message").on('keyup', function(e){
if ($(this).val().length >= "4") {
$('#tab-preview').show();
}
if ($(this).val().length < "4") {
$('#tab-preview').hide();
}
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<form id="form-ask">
<div class="form-group">
<button type="button" id="button-bold" class="btn btn-default" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button type="button" id="button-italic" class="btn btn-default" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button type="button" id="button-quote" class="btn btn-default" title="Quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-code" class="btn btn-default" title="Code"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-insert-image" data-toggle="modal" data-target="#insert-image" class="btn btn-default" title="Insert Image URL"><i class="fa fa-code" aria-hidden="true"></i>
</button>
<button type="button" id="button-upload" class="btn btn-default" title="Add Attachment: This can be image or file "><i class="fa fa-file" aria-hidden="true"></i>
Attach File</button>
</div>
<div class="panel ask panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#ask" id="tab-ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li>
<li><a data-target="#preview" id="tab-preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="ask">
<div class="form-group">
<textarea id="textarea_message" class="form-control"></textarea>
</div>
</div>
<div class="tab-pane fade" id="preview">
<div class="preview-message"></div>
</div>
</div>
</div>
</div>
<p class="text-muted">Preview Button will be enabled once your question has reached
4 character or more.</p>
</form>
</div>
</div>
</div>
One solution would be to add a 'trigger' for the keyup event on your buttons
$('#button-bold').on('click', function(e) {
markdown_syntax(this.id, "**", "**", 'strong text');
$("#textarea_message").trigger('keyup');
});
Related
I have multiple dropdown buttons with the same class as they were dynamically added to the page. I want to toggle the dropdown on the clicked button and not all.
I am using closest() and find() to do that, but this works only alternatively and not for every button.
For example if I click button 1 it works and not for button 2 and it again works for button 3 and not button 4 and it goes on with dynamic buttons.
$('.btn').click(function() {
$(this).closest('div').find('.dropdown-content').toggleClass('show');
});
.dropdown-content { display: none; }
.dropdown-content.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
I have a view and there is a button in this page. When I click that button I can get a parameter (#say_note.ID). But I want to get this parameter in javascript without click button.
My View :
#foreach (Note say_note in Model)
{
<div class="col-lg-12" data-note-id="#say_note.ID">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">
<a href="/Home/ByNote/#say_note.ID">
#say_note.Tittle
</a>
</h4>
<h6 class="text-right">
<h7>#say_note.Owner.Username</h7><i class="fas fa-user"></i><br />
<h7> #say_note.ModifiedOn.ToString("dd.MM.yyyy")</h7><i class="far fa-clock"></i>
</h6>
<p class="card-text">
#say_note.Text
</p>
</div>
<div class="card-footer">
<p>
<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
<button class="btn btn-sm btn-outline-secondary float-sm-left" type="button" data-liked-button="false" data-note-id="#say_note.ID">
<span class="far fa-star like-star"></span> <span class="like-count"> #say_note.LikeCount</span>
</button>
<div class="text-right dateAndName float-sm-rigth">
<a class="bottomNav" onclick="history.go(-1); return false;" href="#"> Geri </a><br />
</div>
</p>
</div>
</div>
</div>
}
</div>
My Javascript:
$("#collapse_CommentPopup").collapse("toggle")
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + #say_note.ID);
});
collapse_CommentPopup my collapse modal and I fill data this collapse with javascript
I solved my own question , maybe someone can use it other time
MyButton :
<button data-toggle="collapse" id="CommentButton" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
My Javascript:
$(function () {
$("#collapse_CommentPopup").collapse("toggle") //ModelCommentPopup isimli nesne show olduğunda (popup event'i yakaladık)
var NoteId = $("#CommentButton").data("note-id");
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + NoteId); //ShowNoteComments metodunu çalıştır ve dönen partialı popup'ın bodysine yükle
});
I have tries to position the items like:
so the markup after my change is here
<div class="container">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll col-4">
<button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#/">Home</a>
<a class="navbar-brand" href="#/report">Report</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="searchBox col-4" [collapse]="isCollapsed">
<form class="navbar-form search">
<div class="form-group">
<!--</typeahead>-->
<input [(ngModel)]="country"
[typeahead]="countries"
autocomplete="off"
(typeaheadOnSelect)="countrySelected($event)"
class="form-control searchInput" [ngModelOptions]="{standalone: true}"/>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
{{selectedSearchType.name}} <span class="caret"></span>
</button>
<ul dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let type of searchType; let i = index;" role="menuitem">
<a (click)="onTypeChange(type)" class="dropdown-item cursor-pointer">{{type.name}}</a>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary" (click)="loadFromSheet()">
<span class="glyphicon glyphicon-paste"></span>
Load from sheet
</button>
</div>
</div>
</div>
But it seems like this:
How can I fix this so the "load" button is to the right most?
You can try changing the col-md-4 to col-md-3 or less and manipulate the spacing between the buttons with margin-left property on the Load button. You are probably pushing the button to the next row, so check the paddings and margins on the CSS properties surrounding the other elements if not finding success.
Hope this helps.
i've got a question.
Is there any way to collapse and switch back bootstrap panel programmatically.
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i>
</button>
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
I need to collapse it or expand with some handler.
Try this:
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i> Click me
</button>
DEMO
I am using bootstrap validation within bootstrap tabs and I have it working for the most part.
However, I am using this piece of code to take you to the closest error it finds.
$("#application").validate({
ignore: "",
rules: {
resumeField: {
required: true,
require_from_group: [1,".required-group"]
},
resumePaste: {
required: function()
{
CKEDITOR.instances['resumePaste'].updateElement();
},
require_from_group: [1,".required-group"],
}
},
messages: {
resumeField: "Please select your Resume",
resumePaste: "Please enter the contents of your resume"
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
$(element).closest('.form-group').addClass('has-error');
var tab = $(element).closest('.tab-pane').attr('id');
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
CKEDITOR.instances['resumePaste'].updateElement();
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function() {
return false;
}
});
Here is the HTML markup for the tabs:
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Step 1 - Résumé</li>
<li>Step 2 - Questions</li>
<li>Step 3 - Proficiencies</li>
<li>Step 4 - Submit</li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="resumeTab">
<div class="page-header">
<h4><small>Select Résumé</small></h4>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
<i class="fa fa-file-text"></i> Browse <input type="file" name="resumeFile" id="resumeFile">
</span>
</span>
<input type="text" class="form-control required" name="resumeField" class="required_group" id="resumeField">
</div>
</div>
<!-- /input-group -->
<br />
<center>
<span class="text-primary">
<h3>- OR -</h3>
</span>
</center>
<div class="page-header">
<h4><small>Paste Résumé Contents</small></h4>
</div>
<div class="form-group">
<textarea class="col-xs-12 required_group" rows="10" name="resumePaste" id="resumePaste"></textarea>
<script>
CKEDITOR.replace( 'resumePaste' );
</script>
</div>
<br />
<button type="button" name="progressButton" tabID="questionsTab" class="btn btn-primary pull-right">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="tab-pane fade" id="questionsTab">
<?php $counter = 1; foreach($getApplication->internships->questions as $data){ ?>
<div class="panel panel-primary">
<div class="panel-heading">Question #<?php echo $counter; ?></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-5">
<h4 class="text-primary"><span name="question"><?php echo $data->question; ?></span></h4>
</div>
<div class="col-xs-7">
<textarea class="col-xs-12 question" rows="6" name="question[<?php echo $data->questionID; ?>]['answer']"></textarea>
<input type="hidden" name="question[<?php echo $data->questionID; ?>]['question']" value="<?php echo $data->question; ?>">
</div>
</div>
</div>
</div>
<?php $counter++; } ?>
<button type="button" name="progressButton" tabID="resumeTab" class="btn btn-primary pull-left"><i class="fa fa-arrow-left"></i> Previous</button>
<button type="button" name="progressButton" tabID="proficienciesTab" class="btn btn-primary pull-right">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="tab-pane fade" id="proficienciesTab">
<button type="button" name="progressButton" tabID="questionsTab" class="btn btn-primary pull-left"><i class="fa fa-arrow-left"></i> Previous</button>
<button type="button" name="progressButton" tabID="submitTab" class="btn btn-primary pull-right">Next <i class="fa fa-arrow-right"></i></button>
</div>
<div class="tab-pane fade" id="submitTab">
<button type="button" name="progressButton" tabID="proficienciesTab" class="btn btn-primary pull-left"><i class="fa fa-arrow-left"></i> Previous</button>
<button type="submit" value="submit" name="doSubmit" class="btn btn-primary pull-right">Submit Application <i class="fa fa-cloud"></i></button>
</div>
</div>
</div>
</div>
The issue is, i have 4 tabs and every one it finds an error on it marks it as active which messes it up.
Is there a way to limit the closest() to just 1 instance and not all?
If im on tab 4 and there are errors on 1 and 2, my goal is to just take them to the first error which would be tab 1.
Any ideas?