I am trying to display some info in a Tooltip and all I am getting is the Title like this
and here is my html where I call it
<button class="btn btn-primary"
type="button"
ng-click="moreInfoSlip(slip)"
data-trigger="click"
data-type="success"
data-title="{{tooltip.title}}"
bs-tooltip>
Click me
</button>
and here the JS
$scope.moreInfoSlip = function(slip) {
console.log(slip);
$scope.tooltip = {
title: '<strong>PICK INFO</strong>',
content: '<div class="selection-info"><p><strong>Game</strong> ' + slip.gameLineObj.name + '</p>' +
'<p><strong>League</strong> ' + slip.leagueObj.name + '</p>' +
'<p><strong>Date</strong> ' + moment(slip.gameLineObj.date).format('MMMM Do YYYY, h:mm:ss a') + '</p>' +
'<p><strong>Line</strong> ' + _.result(_.find(slip.lines, {isSelected: '1'}), 'pick') + '</p></div>'
};
}
what am I doing wrong ?
You need to set the data-html="true" attribute of tooltip. Like this
<button class="btn btn-primary"
type="button"
ng-click="moreInfoSlip(slip)"
data-trigger="click"
data-type="success"
data-html="true"
data-title="{{tooltip.title}}"
bs-tooltip>
Click me
</button>
Related
I am making a ticket booking system. I want a user can only select 3/4 ticket maximum. I have group of button which are append by a javascript in columns for seat selection. Now I want to limit the selection of button selection from that group by user. that should be in javascript.
I just started Practicing.
I am using laravel framework.
<script>
var pages = 40;
var page1Buttons = $('#col1Buttons');
var page2Buttons = $('#col2Buttons');
var page3Buttons = $('#col3Buttons');
var page4Buttons = $('#col4Buttons');
for (var j=65; j<=75; j++){
page1Buttons.append('<input class="btn btn-primary single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 1 + '"/>');
page2Buttons.append('<input class="btn btn-primary single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 2 + '"/>');
page3Buttons.append('<input class="btn btn-primary single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 3 + '"/>');
page4Buttons.append('<input class="btn btn-primary single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 4 + '"/>');
}
I have this fiddle
http://jsfiddle.net/nesreen/m5TMF/763/
$("#AddansId").click(function(){
//get the parent of the div with id(Collapse+x)
// to abend the data content of the textarea beside the word
//Account Registeration at PrepBootstrap
});
I can create a dynamic accordion with button
inside each accordion I need to make another textarea and button to add another texts in the same collapse
but I face the problem of how can I get the parent of the button in each time even if the parent id is dynamic also
Let's see. A few steps to take here:
First you need to bind the click a bit differently(event
delegation) in this case because you want to click on dinamically
added elements
Second, we get the parent id using closest() method and attr('id')
For getting the textarea value you can use
$(this).parent().prev().find('textarea').val()
and then use append() method to append the text next to the word you want and finally use $(this).closest('.container').append(answer); to add the textbefore the word(this was a bit unclear so I added it before Account Registeration at PrepBootstrap. I hope that is what you meant)
var x = 1;
$(document).on('click', "#AddansId", function() {
var idOfParent = $(this).closest('.panel-collapse').attr('id');
//console.log(idOfParent);
var answer = $(this).parent().prev().find('textarea').val();
$(this).closest('.container').append(answer);
});
$(document).on('click', '#AddQuestId', function() {
x = x + 1;
$("#accordion").append('<div class="panel panel-default">' +
'<div class="panel-heading">' +
'<h4 class="panel-title"> ' +
'<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse' + x + '">' + $("#comment").val() + '</a> </h4>' +
'</div>' +
'<div id="collapse' + x + '" class="panel-collapse collapse in">' +
'<div class="panel-body">' +
'<div class="container"> ' +
' <form>' +
'<div class="form-group" >' +
'<label for="comment">answer:</label>' +
'<textarea class="form-control" rows="5" id="answer' + x + '"></textarea> ' +
' </div>' +
' <div style="float: right;"> <input type="button" class="btn btn-info" value="answer" id="AddansId"></div>' +
'</form>' +
'</div>' +
'Account registration at <strong>PrepBootstrap</strong>' +
'</div>' +
'</div>' +
'</div>' +
'</h4>' +
'</div>');
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<form>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<div style="float: right;"> <input type="button" class="btn btn-info" value="Add Question" id="AddQuestId"></div>
</form>
</div>
<div class="panel-group" id="accordion">
</div>
I have an issue.I am adding multiple textbox using + button and deleting using - button. Here i am unable to keep each textbox's id serially. I am explaining my code below.
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);">
</div>
<script>
var a = 0;
function addMore(i) {
a = a + 1;
i = a;
$("#plus").remove();
$('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' +
'<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
'<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>');
}
function removeThis(j) {
$("#introlabelname" + j).remove();
$("#minus" + j).remove();
}
</script>
Here my problem is the id is increasing like introlabelname0,introlabelname1,introlabelname2.. this but while suppose deleting introlabelname1 textbox and adding again its coming introlabelname0,introlabelname2,introlabelname3 like this. Here i need suppose introlabelname1 deleting from introlabelname0,introlabelname1,introlabelname2.. it should introlabelname0,introlabelname1 and if adding again it should introlabelname0,introlabelname1,introlabelname2. Always all textbox id will remain serially from 0,1,2... and so on. Here is my full code. Please help me.
You can also do like this.
1.I added var i = $(".inputBox").length + 1; this line in addMore function it calculate the current input box count and add serialize number to new input box.
2.Also I include serialize() function it makes serialize your input box and button ids.
function addMore(i) {
var i = $(".inputBox").length + 1;
$("#plus").remove();
$('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control inputBox" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' +
'<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
'<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>');
}
function removeThis(j) {
$("#introlabelname" + j).remove();
$("#minus" + j).remove();
serialize();
}
function serialize(){
var i=1;
$(".inputBox").each(function(){
$(this).attr("id", "introlabelname"+i);
$(this).next().attr("id", "minus"+i);
i++;
});
}
I think you just need to decrement the a variable when you remove a row:
function removeThis(j) {
$("#introlabelname" + j).remove();
$("#minus" + j).remove();
a = a - 1;
}
The easy way is to loop over all the input box, and create the new ID(s) with index value. First of all give the text box class name :
class="form-control inputBox"
Then add this function :
function repopulate() {
$( '.inputBox' ).each( function ( i, e) {
$( this ).attr( 'id','introlabelname' + i );
$( this ).next().attr( 'onClick', function (old,n) {
return 'removeThis(' + i + ')';
});
$( this ).next().attr( 'id', function (old,n) {
return 'minus' + i;
});
})
}
Last, for each function calling, call this function :
repopulate();
Here is updated DEMO
p/s : you should edit the HTML,it not properly structured
When i use the kendo editor in a modal the insert hyperlink/image popups are read only.
How can i fix that?
Kendo UI v2015.3.930
Html for this example:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModal-label">Modal title</h4>
</div>
<div class="modal-body">
<textarea id="editor" name="Message" style="width:100%"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Test
Javascript
<script>
$(document).ready(function () {
//create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
});
$("#test").on("click", function (e) {
$("#myModal").modal('show');
});
</script>
I got response from the Telerik Team
The Kendo UI Editor uses a popup for the "Insert hyperlink" tool. The popup is rendered as a child of the body, i.e. it is outside the Bootstrap modal dialog. As a result, the Bootstrap modal dialog does not allow anything in the popup to be focused.
Please disable the Bootstrap dialog's modality, or use a modal Kendo
UI Window instead.
http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#known-limitations
Insert this line in the script:
$(document).off('focusin.modal');
A simple solution is to create custom tool for inserting link. Firs hide the bootstrap modal then show insert link window.
$scope.editorOptions = {
tools: [
"fontName",
"bold",
"italic",
"underline",
"fontSize",
"indent",
{
name: "custom",
tooltip: "Insert Link",
template: "<button class='k-button' ng-click='createLink()'>Add Link</button>"
}
]
};
$scope.createLink = function () {
var popupHtml =
'<div class="k-editor-dialog k-popup-edit-form k-edit-form-
container" style="width:auto;">' +
'<div style="padding: 0 1em;">' +
'<div class="k-edit-label">' +
'<label for="k-editor-link-url">Web address</label>' +
'</div>' +
'<div class="k-edit-field">' +
'<input type="text" class="k-textbox" id="k-editor-link-url">' +
'</div>' +
'<div class="k-edit-label k-editor-link-text-row">' +
'<label for="k-editor-link-text">Text</label>' +
'</div>' +
'<div class="k-edit-field k-editor-link-text-row">' +
'<input type="text" class="k-textbox" id="k-editor-link-text">' +
'</div>' +
'<div class="k-edit-label">' +
'<label for="k-editor-link-title">ToolTip</label>' +
'</div>' +
'<div class="k-edit-field">' +
'<input type="text" class="k-textbox" id="k-editor-link-title">' +
'</div>' +
'<div class="k-edit-label"></div>' +
'<div class="k-edit-field">' +
'<input type="checkbox" class="k-checkbox" id="k-editor-link-target">' +
'<label for="k-editor-link-target" class="k-checkbox-label">Open link in new window</label>' +
'</div>' +
'</div>' +
'<div class="k-edit-buttons k-state-default">' +
'<button class="k-dialog-insert k-button k-primary">Insert</button>' +
'<button class="k-dialog-close k-button">Cancel</button>' +
'</div>' +
'</div>';
$('#hideyourmodal').modal('hide');
var editor = $("#notificationText").data("kendoEditor");
var selection = editor.getSelection();
// Store the Editor range object.
// Needed for IE.
var storedRange = editor.getRange();
// Create a modal Window from a new DOM element.
var popupWindow = $(popupHtml)
.appendTo(document.body)
.kendoWindow({
// Modality is recommended in this scenario.
modal: true,
width: 600,
resizable: false,
title: "Create Link",
// Ensure the opening animation.
visible: false,
// Remove the Window from the DOM after closing animation is finished.
deactivate: function (e) { e.sender.destroy(); }
}).data("kendoWindow")
.center().open();
// Insert the new content in the Editor when the Insert button is clicked.
popupWindow.element.find(".k-dialog-insert").click(function () {
var linkToAdd = '';
var urlPart = popupWindow.element.find("#k-editor-link-url").val();
var textPart = popupWindow.element.find("#k-editor-link-text").val();
var tooltipPart = popupWindow.element.find("#k-editor-link-title").val();
if (popupWindow.element.find("#k-editor-link-target").prop("checked") == true) {
linkToAdd = '<a href=' + urlPart + ' target="_blank" title=' + tooltipPart + '>' + textPart + '</a>';
}
else {
linkToAdd = '<a href=' + urlPart+' title=' + tooltipPart + '>' + textPart + '</a>';
}
editor.selectRange(storedRange);
editor.exec("inserthtml", { value: linkToAdd });
$('#hideyourmodal').modal('show');
});
// Close the Window when any button is clicked.
popupWindow.element.find(".k-edit-buttons button").click(function () {
// Detach custom event handlers to prevent memory leaks.
popupWindow.element.find(".k-edit-buttons button").off();
popupWindow.close();
$('#hideyourmodal').modal('show');
});
}
So I'm new to Jquery and Jquery UI. I have my dialog box working but one thing I am looking for is how to change one of the buttons in the dialog into a checkbox.
My scenario:
A user will be posting information, like news and such. But I want to give them the ability to not publish it to the public yet. A draft, if you will. So the checkbox would be right beside the "ok" and "cancel" button.
I've tried creating an array before the dialog function and placing it there but I can't seem to find a way to declare a button as a checkbox.
Thank you in advance for all your help,
Edit: Here is some code I have tried. My problem is now that i try to style the button pane, it disappears.
var dialog = $('<div title="Create News Post">' +
'<form method="POST" action="index.php?controller=posts&action=add">' +
'<div id="tabs" class="form">' +
'<ul>' +
'<li>English</li>' +
'<li>French</li>' +
'</ul>' +
'<div id="tabs-1">' +
'<label class="first">' +
'<span>English Title:</span>' +
'<input type="text" name="en_title" />' +
'</label>' +
'<label>' +
'<span>English Text:</span>' +
'<textarea name="en_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'<div id="tabs-2">' +
'<label class="first">' +
'<span>French Title:</span>' +
'<input type="text" name="fr_title" />' +
'</label>' +
'<label>' +
'<span>French Text:</span>' +
'<textarea name="fr_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'</div>' +
'<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' +
'<div class="ui-dialog-buttonset">' +
'<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' +
'<button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
'<span class="ui-button-text">Save</span>' +
'</button>' +
'<button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' +
'<span class="ui-button-text">Cancel</span>' +
'</button>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
)
.dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600});
1) You can add the buttons and checkbox into the HTML that creates the dialog and not the use dialog's property that generates buttons for you. Once you create the dialog you can set the handlers
using the dialog object in the selector:
dialog = $('<div>' +
'...' +
'<input type="submit" id="btnCancel" value="Ok" />' +
'<button id="btnCancel">Cancel</button>' +
'<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' +
'</div>')
.dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false});
$('#btnCancel', dialog).click(function(){
//...
});
dialog.dialog('open');
EDIT: Without reading jQuery UI code it seems that a div with a class attribute like 'ui-dialog-buttonpane' will be removed from the dialog html. So if you choose this approach
you must avoid reusing the jQuery UI dialog classes.
2) Other approach could be add a third button using the dialog's property and substitute the third button html for your checkbox:
//Again use the dialog object as the scope for the selector.
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
EDIT: The object returned by dialog correctly refers to the DOM element using in the creation of the dialog instead of all the machinery to make the dialog work. That is way you
will need to use dialog.parent() as the scope of the above selector.
3) A third option: Use a regular button that provides the same check/uncheck semantic that a checkbox (I mean visually, craft some CSS), when this button is clicked just make sure some hidden field in the dialog markup (Im thinking in a form you will post after the OK is pressed) gets updated to reflect the check state.
$("<div>...</div>").dialog({
modal: true /..
},
buttons: {
//...
'IsDraft': function() {
$(this).toggleClass('checked')
$("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked'));
}
}
});
EXAMPLE (BASED IN YOUR CODE):
var dialog = $('<div title="Create News Post">' +
'<form method="POST" action="index.php?controller=posts&action=add">' +
'<div id="tabs" class="form">' +
'<ul>' +
'<li>English</li>' +
'<li>French</li>' +
'</ul>' +
'<div id="tabs-1">' +
'<label class="first">' +
'<span>English Title:</span>' +
'<input type="text" name="en_title" />' +
'</label>' +
'<label>' +
'<span>English Text:</span>' +
'<textarea name="en_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'<div id="tabs-2">' +
'<label class="first">' +
'<span>French Title:</span>' +
'<input type="text" name="fr_title" />' +
'</label>' +
'<label>' +
'<span>French Text:</span>' +
'<textarea name="fr_text">' +
'</textarea>' +
'</label>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
)
.dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400,
buttons: {
IsDraft: function(){alert('draft');},
Save: function(){alert('saving');},
Cancel: function(){alert('cancel');}
}
});
//lets do a replacement to get a checkbox in the button pane.
$('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>');
dialog.dialog('open');
Maybe it'll help: look at the JQuery UI button. It can work as a checkbox. You can create separate button in the dialog for your purposes.