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.
Related
I have three check boxes with two is auto selected and I am displaying the text field with a label which check box is selected.
But after clicking on preview from I am getting input field twice. I mean I am getting four text field instated of two.
There is some issue with my ready script.Would you help me out in this?
<!--If any check box clicked then active this script-->
$(function() {
$(".add_student_input").change(function() {
if (this.checked) {
$(".students_items").append('<div class="form-group row ' + this.id + '"><label class="col-sm-4 col-form-label">' + $(this).next('label').text() + '</label><div class="col-sm-8"><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div></div>');
} else {
$('.students_items').find('.' + this.id).remove();
}
});
});
<!--end script -->
$(document).ready( function(){
$checkbox=$(".add_student_input");
$checkbox.each(function(){
var isChecked = $(this).is(":checked");
if(isChecked) {
$(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>');
} else {
//check false
$('.students_items').find('.' + this.id).remove();
}
});
});
/*form preview*/
function PrintPreview() {
var toPrint = document.getElementById('open_in_preview');
var popupWin = window.open('', '_blank');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</body></html>');
popupWin.document.close();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body id="open_in_preview">
<input type="checkbox" name="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label>
<input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label>
<input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label>
Preview form
<span class="students_items"></span>
</body>
I am getting output like this.
as comment, why the script putting at the below of your page will cause multiple input, as when onload, it will run document ready and append again based on the checkbox, so to solve the issue, put empty() onto it will "reset" the input before append with a new 1
$(document).ready( function(){
$checkbox=$(".add_student_input");
$(".students_items").empty(); //add this to clear it
$checkbox.each(function(){
var isChecked = $(this).is(":checked");
if(isChecked) {
$(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>');
} else {
//check false
$('.students_items').find('.' + this.id).remove();
}
});
});
update with another question by OP
please look at the plnkr
https://plnkr.co/edit/wnGWwcgAySrjfNQwqX3J?p=preview
the issue here is not related to empty(), it is how it behave on DOM ready(but i remove it as your question is different now), I had enhance your script so that it take only the needed tag, and also combine the script to make it clearer, please have a look, so in order to really read the checked behavior in the html, we need to add
this.setAttribute("checked", "checked");
this will force the checked is being render in the html, and also
$(function(){}) is the same as $(document).ready(function(){})
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>
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');
});
}
I have table with dynamic rows like
<table>
for(int i=0;i<=Modal.Count;i++)
{
<tr class="trList">
<td class="tdEmpid><input type="button" value="Insert row" class="btnInsert"/></td>
<td><input type="text" id="Sun_Hrs' + i + '" value="' + data.GetTimeSheetDetails[i].SUN_HRS + '" style = "width:50px;border: 0px;background-color: white;text-align: left;" readonly="true"/></td>
<td><input type="text" id="Mon_Hrs' + i + '" value="' + data.GetTimeSheetDetails[i].MON_HRS + '" style = "width:50px;border: 0px;background-color: white;text-align: left;" readonly="true"/></td>
<td><input type="text" id="Tue_Hrs' + i + '" value="' + data.GetTimeSheetDetails[i].TUE_HRS + '" style = "width:50px;border: 0px;background-color: white;text-align: left;" readonly="true"/></td>;
..........
..........
</tr>
}
Now, I want to add row where the button dynamically exactly to next row where button is clicked , for that i have written jquery code
$(document).ready(function(){
$('.btnInsert').live('click',function(){
var html = '<tr class="trNeedTimesheet"><td></td><td></td></td><td><p style="background-color:white;">-- Need To Enter TImesheetHours</b> -------</p></td></tr>';
$("" + html + "").insertAfter($(this).parent('td.tdEmpId').parent('tr.trList'));
});
});
It is not only adding , but it should insert and work same like slidetoggle functionality.
How can I do that?
parent() don't accept argument but parents() do.
Change this line
$("" + html + "").insertAfter($(this).parent('td.tdEmpId').parent('tr.trList'));
to
$("" + html + "").insertAfter($(this).parents('tr.trList'));
Demo
Edit : updated toggle functionality.
jQuery :
$(document).on('click','.btnInsert', function(){
var $nextTr = $(this).parents('tr.trList').next();
var newTrExist =$nextTr.hasClass('newTr');
if(newTrExist)
{
$nextTr.toggle();
}
else
{
var html = '<tr class="newTr trNeedTimesheet"><td></td><td></td></td><td><p style="background-color:white;">-- Need To Enter TImesheetHours</b> -------</p></td></tr>';
$(html).insertAfter($(this).parents('tr.trList'));
}
});
Updated Demo :
Check this Working Fiddle
For insert .parents(),
$(html).insertAfter($(this).parents('tr.trList'));
For slideToggle(),
$(document).on('click','.trNeedTimesheet',function(){
$('p',this).slideToggle()
});
Dynamically added checkbox inside jQuerymobile list view is not rendering properly.
Find below the unorder list. I have added a sample listitem in the HTML itself.
<ul data-role="listview" id="ul_address_list" >
<li data-icon="false"><a href="#" class="add-container">
<label class="add-container" data-corners="false">
<input type="checkbox" value="true" />
<label class="lbl_add-container">
<h3>Header</h3>
<p>Content</p>
</label>
</label>
</li>
</ul>
Below is the output for the above code. Which is rendering correct.
Now I am trying to add the list item dynamically using append function using jQuery.
$.each(obj_address_list, function (ctr, obj) {
$('#ul_address_list').append('<li data-icon="false">' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input type="checkbox" value="true" />' +
'<label class="lbl_add-container">' +
'<h3>Header</h3>' +
'<p>content</p></div>' +
'</label>' +
'</label>' +
'</a>' +
'</li>');
});
$('#ul_address_list').listview('refresh');
below is the output for the above code. Not displayed correctly.
Why the listitem added dynamically is not rendering properly?
Just add
$("[type=checkbox]").checkboxradio();
before
$('#ul_address_list').listview('refresh');
Or, call .trigger("create");
$('#ul_address_list').listview('refresh').trigger("create");
Demo
You need to call the listview refresh inside your append function and add .trigger("create");.
$('#ul_address_list').append('<li data-icon="false">' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input type="checkbox" value="true" />' +
'<label class="lbl_add-container">' +
'<h3>Header</h3>' +
'<p>content</p></div>' +
'</label>' +
'</label>' +
'</a>' +
'</li>').listview("refresh");
Check this fiddle: http://jsfiddle.net/eRsMV/5
you have extra
});
just use
$('#ul_address_list').append('<li data-icon="false">' +
'<a href="#" class="add-container">' +
'<label class="add-container" data-corners="false">' +
'<input type="checkbox" value="true" />' +
'<label class="lbl_add-container">' +
'<h3>Header</h3>' +
'<p>content</p></div>' +
'</label>' +
'</label>' +
'</a>' +
'</li>');
$('#ul_address_list').listview('refresh');
my advice is to use some editor like dreamweaver just to save your time.
http://jsfiddle.net/prollygeek/xqwqM/1/