bootstrap bootbox show variable in message within form text field - javascript

I need to output a variable I have within a readonly formfield (text):
$(function() {
return $("#buy_order_btn").click((function(_this) {
return function() {
var price;
price = $("#order_bid_price").val();
return bootbox.dialog({
title: "Confirm Buy Order",
message: "Price: <input type=\"text\" readonly=\"readonly\" value=\"HERE COMES THE PRICE VALUE FROM ABOVE\">"
});
};
})(this));
});
How to do this?

$(function() {
return $("#buy_order_btn").click((function(_this) {
return function() {
var price;
price = $("#order_bid_price").val();
return bootbox.dialog({
title: "Confirm Buy Order",
message: "Price: <input type=\"text\" readonly=\"readonly\" value=\"" + price + "\">"
});
};
})(this));
});
I would consider using ' when I have html inside the string, just so it can be readable as a normal html text

Related

How should this result write in php?

When I execute a php file it give me this result:
[{"title":{"0":"Offer Number 1"},"link":{"0":"https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn"}}]
the offer title is .$offeritem->title. and the URL is .$offeritem->link.
I want to make a php file that show like this result of an offer and its url.
And then I want to call them (offer title + url) via javascript using this code:
openVerification: function() {
var e = this;
jQuery.getJSON("functions/offers.php", function(t) {
if (!t.error) {
var n = "";
$.each(t, function(e, t) {
n += '\n <li class="list-group-item"><a target="_blank" href="' + offerlink[0] + '">' + title[0] + "</a></li>\n
}), i.hideAll(), i.dialog({
message: '\n <ul class="list-group">\n ' + n + '\n </ul>\n ',
title: "offers",
closeButton: !1,
buttons: {
cancel: {
label: "Cancelar",
className: "btn-default",
callback: function() {
e.resetGenerator()
}
}
}
})
}
})
},
so in short I want to make the offers.php file.
Your JSON OP is not efficient
[
{
"title":{"0":"Offer Number 1"},
"link":{"0":"https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn"}
}
]
According to me it should be
[
{"title"::"Offer Number 1","link":"https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn"},
{"title"::"Offer Number 1","link":"https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn"}
]
I am writting PHP code for both JSON OP:-
For 1st One:-
$offer[0]['title'][0] = "Offer Number 1";
$offer[0]['link'][0] = "https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn";
$offer[1]['title'][0] = "Offer Number 2";
$offer[1]['link'][0] = "https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn";
echo json_encode($offer);
For 2nd One:-
$offer[0]['title'] = "Offer Number 1";
$offer[0]['link'] = "https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn";
$offer[1]['title'] = "Offer Number 2";
$offer[1]['link'] = "https:\/\/www.domain.com\/show.php?l=0&u=8793&id=6335&tracking_id=mnn";
echo json_encode($offer);
your offers.php code should be somthing like-
<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr); // {"a":1,"b":2,"c":3,"d":4,"e":5}
?>
Then your JavaScript (in this example I use jQuery):
$.getJSON('http://localhost/yourProject/offers.php', function(data) {
console.log(data);
});
This should be a start to get PHP arrays in to your JavaScript.and your access that with index of data.

Kendo mvc Grid ClientTemplate javascript function not working

I have a Kendo mvc Grid and using client template as a column and i wrote a javascript function in the template to return the script block but its seems not working and no javascript error. I also tried to write the script to the client template directly but its not working too.
//html in client template
.Columns(columns =>
{
columns.Template(e =>
{ }).ClientTemplate(
"<div class='table-responsive'>" +
"<table border='0' class='table' >" +
...................................
"</table>" +
"</div>"+
"#=AlignDiv(Id)#"
);
})
//javascript function to return a script block as a string
<script type="text/javascript">
function AlignDiv(Id) {
var result = "<script> $('.calDiv"+Id+"').map(function () {" +
"return $(this).Height();" +
"}).get()," +
"maxHeight = Math.max.apply(null, heights);" +
"$('.calDiv" + Id + "').height(maxHeight);" +
"alert('test')<\/script>";
return result;
}
Thanks a lot,
Dennis
In order to format Kendo Grid Column value with conditionally chosen action you can use one of the suitable examples below. For more information: How Do I Have Conditional Logic in a Column Client Template?
UI for Javascript:
{
field: "EmployeeName", type: "string", width: "55px", title: "Employee Name",
template: "#= GetEditTemplate(data) #"
}
UI for MVC:
...
columns.Bound(t => t.EmployeeName)
.Title("Status Name")
.Template(#<text></text>)
.ClientTemplate("#= GetEditTemplate(data)#").Width("55px");
...
Javascript Method:
<script>
//Change the color of the cell value according to the given condition
function GetEditTemplate(data) {
var html;
if (data.StatusID == 1) {
html = kendo.format(
//"<a class=\"k-button\" href='" + '#Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a> ",
"<span class='text-success'>" +
data.EmployeeName
+ "</span>"
);
}
else {
html = kendo.format(
//"<a class=\"k-button\" href='" + '#Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a> ",
"<span class='text-danger'>Cancel</span>"
);
}
return html;
}
</script>

How Can I Get The Value Of A Textfield From Database In Update Form

I'm using Yii framework Update form to get values from backend, I created a add/remove textfields feature in my form. I'm able to use the create form easily. But, I have a problem in update form.
Below is the code -
$(function () {
var json = {
"welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
"endList": ["Press come again", "Press 0"]
};
$.each(json.welcomeList, function (_, vv) {
$('<p><label for="p_scnts"><input type="text" class=cnt" size="20" name="p_scnt" value="' + vv + '"placeholder="Input Value" /></label> Remove</p>').appendTo('#p_scents');
});
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function () {
$('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i + '" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
In the above code, I want to replace the hardcoded value of var json with the value from the database to the textfield. How can I do this?
You can do it like this, for example
DefaultController
public function actionIndex() {
//Here you can get data from DB
//and fill $result array, but I fill it manuallly
$result = array(
'welcomeList' => array(
"Thanks for coming",
"Please select from the following list",
"dwadwadsds"
),
'endList' => array(
"Press come again",
"Press 0"
)
);
echo json_encode($result);
Yii::app()->end();
}
Finally json hardcore in JS you can replace by this
var json = [];
$.getJSON( "/default", function( data ) {
json = data;
});

Form in jQuery UI Dialog Cached.

I'm a C/C++ programmer and new to javascript. The following code is giving me grief and I don't really know what I'm doing wrong. I've searched and can't find where others have had the same problem.
I've taken my project and cut out my problem code to try and understand and fix it. The short version is when I click my "Enter data" image on an HTML page, it creates a dialog box with a form and table of inputs (with default data) and I enter/change some data. When I click the dialog box save button, it goes through JSON.stringify($('#form').jsonify()) to collect the form data and brings up an alert box showing the data that I entered. This part works fine.
If I click the "Enter data" image again, the dialog box comes up and I enter/change new data. When I click the dialog box save button, it brings up an alert box showing the previous data that I saved (in this case showed in the alert box).
No matter how many times I try it, it always returns the data form the very first entry and never any of the new(er) data.
What am I doing wrong?
Some references:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/test.js"></script>
<link href="~/Content/jquery/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
My HTML code
<div>
<img id="additem"
Title="Add Item"
onclick="addstuff(this)"
OnMouseOver="this.style.cursor='pointer';"
OnMouseOut="this.style.cursor='default';"
src="~/images/Sign_Add_Icon_32.png" />
</div>
My test.js file.
$.fn.jsonify = function (options) {
var settings = $.extend({
stringify: false
}, options);
var json = {};
$.each(this.serializeArray(), function () {
if (json[this.name]) {
if (!json[this.name].push)
json[this.name] = [json[this.name]];
json[this.name].push(this.value || '');
} else
json[this.name] = this.value || '';
});
if (settings.stringify)
return JSON.stringify(json);
else
return json;
}
function addstuff(obj) {
var strHtml = "";
var strHtml = "<div class=\"container\" id=\"addphonedlg\" title=\"Add Phone\" overflow:\"auto\">"
+ "<p>Please enter the following information.</p>"
+ "<form id=\"form\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 1" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data1" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 1 data" + "\" />" + "</td></tr>"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 2" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data2" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 2 data" + "\" />" + "</td></tr>"
+ "<tr><td align=\"right\"><label for=\"name\">" + "Data 3" + ":</label></td>"
+ "<td><input type=\"text\" name=\"" + "data3" + "\" style=\"border:0; color:#f6931f; font-weight:bold; align=right;\" VALUE=\"" + "Data 3 data" + "\" />" + "</td></tr>"
+ "</table></form>"
+ "</div>";
$(strHtml).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Save": function () {
alert("Add information " + JSON.stringify($('#form').jsonify()));
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
}
}).dialog('open');
}
This seems to be a known problem of forms in ui dialogs being cached. But you need to remove the form onClose of the dialog.
I added close event function to your code. You should be fine now.
$(strHtml).dialog({
autoOpen: false,
width: 400,
modal: true,
close: function( event, ui ) {
$('#form').remove(); // this where the problem is
},
buttons: {
Save: function () {
alert("Add information " + JSON.stringify($('#form1').jsonify()));
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function () {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Cancel')").focus();
}
}).dialog('open');
}

Login form jQuery plugin does not work as expected

I am writing a jQuery plugin for login form and I have an issue with the 'Submit' button. My 'Submit' button click function never gets executed.
Here is my jsfiddle code http://jsfiddle.net/c4jRx/1/
(function ($) {
$.fn.login = function (options) {
options = $.extend({}, $.fn.login.config, options);
return this.each(function () {
var markup = '<div>' +
'<form method="post" action="">' +
'<table><tr><td><label>User Login</label></td></tr>' +
'<tr><td><input type="text" id="user_id" placeholder="Apple ID" required></td></tr>' +
'<tr><td><input type="password" id="password" placeholder="Password" required></td></tr>' +
'<tr><td><input type="submit" id="authenticate" value="Login to your account"></td></tr>' +
'</table>' +
'</form>' +
'</div>';
return $(this).html(markup);
});
$('#authenticate').click(function() {
debugger;
var user = $('#user_id').val();
var password = $('#password').val();
console.log("User: " + user + "Password: " + password);
});
};
$.fn.login.config = {
// set values and custom functions
};
}(jQuery));
I have modify your fiddle and attaching it over here. The actual problem was you have written click event in login function and after adding html you have written return statement so click event was not getting registered. Here is the solution for that.
Put you click event in document.ready like this:
$(document).ready(function() {
$('#loginScreen').login();
$('#authenticate').click(function() {
var user = $('#user_id').val();
var password = $('#password').val();
console.log("User: " + user + "Password: " + password);
});
});
Here is your updated fiddle : http://jsfiddle.net/c4jRx/5/ Thanks

Categories