I have a bootbox.dialog with a textarea. I want to save the value of the textarea with rowbrakes in the same place as it was written to the database. So I need to create a string with /n or <br>.
Right now is my value undefined.
Here is my code:
$('#btnComment').click(function () {
var comment = $("#lblComment1").html();
popup.dialog({
title: translator.get('EditComment'),
message: "<textarea cols='60' rows='6' name='editComment'>" + comment + "</textarea>",
buttons: {
confirm: {
label: translator.get('EditComment'),
className: "btn-success",
callback: function (result) {
if (result === null) {
} else {
$("#editComment").val(result);
$("#lblComment1").html(result);
var ajaxData = {
Type: "Comment",
OrderId: $("#lblOrder").html(),
newValue: $("#editComment").val(),
MiddocID: $("#hidMiddocID").val()
}
$.ajax({
type: 'post',
url: configuration.baseUrl + '/api/OrdersPostback', //
dataType: "json",
data: JSON.stringify(ajaxData),
contentType: "application/json; charset=utf-8"
}).then(function (bResult) {
if (bResult) {
$("#editComment").val(result);
$("#lblComment1").html(result);
}
});
//$("#hidBtnComment").click();
}
}
},
cancel: {
label: translator.get('Cancel'),
className: "btn-default"
}
},
})
});
Any suggestions of what I can do?
Change your <textarea> into this:
message: "<textarea id='editComment' cols='60' rows='6' name='editComment'>" + comment + "</textarea>",
Note that I've added the id="editComment" which you didn't do in the first place. Now that element will be fetchable by $('#editComment') and you can use .val() and other jQuery methods/plugins.
var dialog = bootbox.prompt({
title: "This is a prompt with a textarea!",
inputType: 'textarea',
callback: function (result) {
if (result ) {
console.log (dialog.find('textarea.bootbox-input-textarea').val());
}
}
});
you can get the value by textarea class "bootbox-input-textarea"
http://bootboxjs.com/documentation.html#prompt-option-input-type
Related
I have kendo dropdownlist and button submit. I want if the user not select anything in dropdown(position), there will be validation that inform the user must select one position at least at dropdown. Then, if the user has click the position, so the user can submit the data. I have used some method like "required" but not working.
HTML
<input id="dropdown" style="width:200px;" />
JavaScript for kendoDropDownList (position)
$("#dropdown").kendoDropDownList({
optionLabel: "- Select Position -",
dataTextField: "functionName",
dataValueField: "hrsPositionID",
dataSource: {
transport:{
read: {
url: "./testjson.php",
type: "POST",
data: function() {
return {
method: "getDropdown",
}
}
},
},
},
change: function(e){
console.log(this.value());
// $('#AccountingTree').data('kendoTreeView').homogeneous.read();
homogeneous1.read();
homogeneous2.read();
homogeneous3.read();
homogeneous4.read();
homogeneous5.read();
homogeneous6.read();
homogeneous7.read();
homogeneous8.read();
homogeneous9.read();
homogeneous10.read();
homogeneous11.read();
homogeneous12.read();
homogeneous13.read();
homogeneous14.read();
}
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");
For dropdownlist above, i"m using homogeneous data (treeview).
Anyone have any idea or reference on this question?
JavaScript AJAX call for submit button
//AJAX call for button
$("#primaryTextButton").click(function(){
if($("#dropdown").data("kendoDropDownList").value() == ""){
kendo.alert("Please select position.");
}
});
$("#primaryTextButton").kendoButton();
var button = $("#primaryTextButton").data("kendoButton");
button.bind("click", function(e) {
var test = $("#dropdown").val()
$.ajax({
url: "../DesignationProgramTemplate/testjson.php",
type: "POST",
data: {
method: "addTemplate" ,
id: test,
progid: array
},
success: function (response) {
if(response === "SUCCESS")
{
kendo.alert("Data saved");
}else
{
kendo.confirm("Update the data?")
.done(function(){
$.ajax({
type: "POST",
url: "../DesignationProgramTemplate/testjson.php",
data: {
method: "deleteTemplate" ,
id: test,
progid: array
},
success: function(){
kendo.alert("Data updated");
}
});
});
}
},
});
});
When you click the button, just get the value of the kendoDropDownList and do a
conditional statement. Hope this helps. Happy Coding ;D
//AJAX call for button
$("#primaryTextButton").kendoButton();
var button = $("#primaryTextButton").data("kendoButton");
button.bind("click", function(e) {
var test = $("#dropdown").data("kendoDropDownList").value();
if(test == ""){
kendo.alert("Please select position.");
}
else{
$.ajax({
url: "../DesignationProgramTemplate/testjson.php",
type: "POST",
data: {
method: "addTemplate" ,
id: test,
progid: array
},
success: function (response) {
if(response === "SUCCESS"){
kendo.alert("Data saved");
}
else{
kendo.confirm("Update the data?")
.done(function(){
$.ajax({
type: "POST",
url: "../DesignationProgramTemplate/testjson.php",
data: {
method: "deleteTemplate" ,
id: test,
progid: array
},
success: function(){
kendo.alert("Data updated");
}
});
});
}
},
});
}
});
Okay so I want to get the jQuery variable value in my alert box. I tried something but this is not giving me the result as expected.
$(document).ready(function() {
$("#submit").click(function() {
var dataString = {
amount: $("#amount").val()
};
var getamt = dataString.amount;
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to transfer $"'.getamt.'" to wallet?', // not getting the result
buttons: {
confirm: function () {
$.ajax({
type: "POST",
dataType : "json",
url: "add-funds-process.php",
data: dataString,
cache: true,
beforeSend: function(){
$("#submit").hide();
$("#loading-rent").show();
$(".message").hide();
},
success: function(json){
setTimeout(function(){
$(".message").html(json.status).fadeIn();
$('#wallet').html('$' + json.wallet);
$('#balance').html('$' + json.balance);
$("#submit").show();
$("#loading-rent").hide();
},1000);
}
});
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
});
Can any of you expert guys help me with this? I will be thankful.
You are using php operater.with javascript. in javascript + is use for concating the variable with string.
Run this example it may help you....
$("#submit").click(function() {
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to transfer "' + $("#amount").val() + '" to wallet?', // not getting the result
buttons: {
confirm: function () {
$.alert('confirm');
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js"></script>
<button id="submit">Hello</button>
<input type="text" id="amount" placeholder="Enter the amount">
I have two different jquery plugins loaded, one is UI related which allows me to display message popups and the other is the ajax fileDownload plugin. They both work fine. However, when I seem to run one function, it then starts conflicting with the other function.
I have a function called Export which initiates the fileDownload ajax request when a button is clicked. But then after the fileDownload is over, if I click on the button that launches the ExitAlert function, I end up getting the fileDownload re-initialising with the exit message. Below are the two functions.
Any idea what is going wrong?
Thanks
function Export() {
$("#Form").submit(function (e) {
e.preventDefault();
$.fileDownload('export.php?'+ Math.random(), {
httpMethod: 'POST',
dataType: 'text',
contentType: 'application/x-www-form-urlencoded',
data: $('#Form').serialize(),
successCallback: function (url) {
$("#ExportButton").prop("disabled", true);
$(pleaseWait).remove();
},
failCallback: function (responseHtml, url) {
$(pleaseWait).remove();
}
});
});
}
function ExitAlert() {
$("#Form").submit(function (e) {
e.preventDefault();
$.msgBox({
title: "Are You Sure?",
content: "<font size=2><b>Exit without saving? </b><br><br>All changes will be lost!</font>",
opacity:0.8,
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }],
success: function (result) {
if (result == "Yes") {
document.Form.submit();
}
}
});
});
}
I seemed to have got it to work by changing the e.preventDefault and the functions now look like this (seems to work now):
function Export() {
$("form").submit(function (e) {
e.preventDefault();
});
$.fileDownload('export.php?'+ Math.random(), {
httpMethod: 'POST',
dataType: 'text',
contentType: 'application/x-www-form-urlencoded',
data: $('#Form').serialize(),
successCallback: function (url) {
$("#ExportButton").prop("disabled", true);
$(pleaseWait).remove();
},
failCallback: function (responseHtml, url) {
$(pleaseWait).remove();
}
});
}
function ExitAlert() {
$("form").submit(function (e) {
e.preventDefault();
});
$.msgBox({
title: "Are You Sure?",
content: "<font size=2><b>Exit without saving? </b><br><br>All changes will be lost!</font>",
opacity:0.8,
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }],
success: function (result) {
if (result == "Yes") {
document.Form.submit();
}
}
});
}
I am developing textbox with autocomplete using jQuery UI Autocomplete.
After that, I can create textbox with autocomplete, but one issuce has occured now.
In my textbox, I want to prevent selecting specific item from autocomplete list.
If I select specific item, Autocomplete list display again or not to close.
$(function (prefixText) {
$("textBox").autocomplete({
autoFocus: false,
minLength: 0,
delay: 50,
source: function (request, response) {
var data = "{ 'prefixText': '" + prefixText
+ "','count': '" + 30
+ "','pixWidth': '" + 100 + "' }";
$.ajax({
type: "POST",
url: "Example.asmx/" + method,
cache: false,
data: data,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.name,
id: item.id,
name: item.name
}
}))
}
});
},
select: function (event, ui) {
var id = ui.item.id
//not match guid type
if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
if ($("text_id") !== null) {
$("text_id").val(-1);
}
return false
}
else {
if ($("text_id") !== null) {
$("text_id").val(ui.item.id);
}
$("textBox").val(ui.item.name);
}
}
});
});
});
If someone know answer, please teach me.
Based on the example from here: How to disable element in jQuery autocomplete list
I think this code will work for you:
$(function (prefixText) {
$("textBox").autocomplete({
autoFocus: false,
minLength: 0,
delay: 50,
source: function (request, response) {
var data = "{ 'prefixText': '" + prefixText
+ "','count': '" + 30
+ "','pixWidth': '" + 100 + "' }";
$.ajax({
type: "POST",
url: "Example.asmx/" + method,
cache: false,
data: data,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.name,
id: item.id,
name: item.name
}
}))
}
});
},
select: function (event, ui) {
var id = ui.item.id
//not match guid type
if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
if ($("text_id") !== null) {
$("text_id").val(-1);
}
return false
}
else {
if ($("text_id") !== null) {
$("text_id").val(ui.item.id);
}
$("textBox").val(ui.item.name);
}
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
//Add the .ui-state-disabled class and don't wrap in <a> if value is empty
var id = item.id
if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
} else{
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
};
});
If you can provide a working version of your code (the items can also be from a predefined list, not based on ajax call) it will be much easier to help.
Here is my add driver button
$( "#addDriver" ).button().click(function( event ) {
event.preventDefault();
var dn = $("input[name=driver_name]").val();
var ds = $("input[name=driver_status]").val();
var dataString = 'driver_name='+ dn + '&driver_status='+ ds;
//Here is where im trying to load it but it's not working
$('#driversTable').jtable('load');
if(dn == '' || ds == '' )
{
alert("Fill up all Fields with \'*\'");
}
else
{
$.ajax({
type: "POST",
url: "processDriver.php",
data: dataString,
dataType: "json",
success: function(data){
if(!data.error && data.success) {
alert(data.successMsg);
$("input[name=driver_name]").val('');
$("input[name=driver_status]").val('');
} else {
alert(data.errorMsg);
}
}
});
}
});
And here is my jTable init
$("#driversTable").jtable({
title: 'Drivers',
actions: {
listAction: "getAllDrivers.php",
},
fields: {
did: {
key: true,
list: false
},
dID: {
title: 'Driver ID',
width: '7%'
},
dName: {
title: 'Name',
width: '7%'
},
dStatus: {
title: 'Status',
width: '12%'
}
}
});
$('#driversTable').jtable('load');
I want it to be right after adding a new record i want the table to refresh without refreshing the page. I tried the load and reload functions of jtable is not working or am i just putting them on the wrong place of my code?
Insert Data First Then Reload.
$.ajax({
type: "POST",
url: "processDriver.php",
data: dataString,
dataType: "json",
success: function(data){
if(!data.error && data.success) {
alert(data.successMsg);
$('#driversTable').jtable('reload');//<== Reload after Success
$("input[name=driver_name]").val('');
$("input[name=driver_status]").val('');
} else {
alert(data.errorMsg);
}
}
});