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
});
Related
I've been trying to get sortable to work with a bootstrap grid of buttons. It's a responsive design, with multiple rows containing 3 buttons each. I can turn on sortable on the overall container, which lets me drag and drop the buttons, but it does it for the whole row. I want to be able to select individual buttons and drag and drop them to other rows. I would think
$("buffer0,#buffer1,#buffer2").sortable({
connectWith: "#buffer0,#buffer1,#buffer2"
})
would work, but that doesn't allow for any dragging and dropping. I've created a fiddle that shows how this works. (resize the output screen so you can see the rows)
Really appreciate any insight, been staring at this for hours and don't know where do go.
https://jsfiddle.net/7yhkp9eo/2/
You can use:
items: specifies which items inside the element should be sortable.
and
tolerance: specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values.
$("#list_content").sortable({
tolerance: "pointer",
items: ".col-sm-4"
});
$("#list_content").disableSelection();
#import url('//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="list_content">
<div id="buffer0" class="row top-buffer">
<div id="row0" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,1" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T11</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,2" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T12</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,3" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T13</a>
</div>
</div>
</div>
<div id="buffer1" class="row top-buffer">
<div id="row1" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,4" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T21</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,5" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T22</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,6" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T23</a>
</div>
</div>
</div>
<div id="buffer2" class="row top-buffer">
<div id="row2" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,7" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T31</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,8" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T32</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,9" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T33</a>
</div>
</div>
</div>
</div>
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');
});
Can anyone explain why the snippet of code below does not actually cause the "#wrapper" to shift? It's driving me insane...Nothing happens when I click on the info icon.
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
<i class="fa fa-info-circle fa-2x info myButton"></i>
<img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
<script>
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#wrapper').toggle(effect, options, duration);
});
</script>
You forgot to add a class in button
<button class="myButton">
$(".myButton").click(function() {
console.log("123")
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = {
direction: "right"
};
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#wrapper').toggle(effect, options, duration);
$('#wrapper').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
hide
<i class="fa fa-info-circle fa-2x info myButton"></i>
<img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button class="myButton" type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
test<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
You can see the front end of knowledge:https://github.com/AutumnsWind
Have a look at the snippet below.
I included jQuery and jQueryUI, resized the i-tag and included the text "Image", so you can click on it. Seems to be working!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
<i class="fa fa-info-circle fa-2x info myButton" style="width:20px; height:20px">Image</i>
<img class="img-responsive myButton" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
<script>
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.center').toggle(effect, options, duration);
});
</script>
The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:
You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/
Okay i have the following list:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;">Kursus
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i> Ret kursus
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This produces a list that looks something like this:
Now this works fine when there are few items however when the list is big enough and there scroll the drag and drop messes up. when i pick up an item on the middle of the page it always scrolls to the bottom and it is hard to get it to the top again!
Has anyone tried this before or know a way to fix it?