How can I rewrite option of select2 - jquery-select2

This is my js code:
function getCompany(){
var url = _reqCtx + "/extReport/getCompany.action";
function callback(response){
$("#searchForm").find("#companyId").select2({
data : response
});
};
$.post(url,{},callback);
}
I want the "& nbsp;" in p1 can be parsed space like p2 use select2. The
data was given by the others,so I can't change it . So , how can I
rewrite the option of select2 .Any tips will be helpful . Thx very
much !

Update:
You should move the &nbsp options as "children", see jsfiddle
function getCompany(){
var url = _reqCtx + "/extReport/getCompany.action";
function callback(response){
nested_data = [];
// PSEUDO CODE
for (line in data){
if line has &nbsp then
Replace &nbsp and move them into children property
}
// END OF PSEUDO CODE
$("#searchForm").find("#companyId").select2({
data : nested_data
});
};
$.post(url,{},callback);
}

Related

using katex, '&' alignment symbol displays as 'amp;'

I am using katex to render math.
https://github.com/Khan/KaTeX
Generally, to get this to work I link to the files katex.min.js and katex.min.css from a cdn, which is one of the ways the directions suggest.
I wrap what needs to be rendered in tags and give all the same class. For example:
<span class='math'>\begin{bmatrix}a & b \\c & d\end{bmatrix}</span>
And inside a script tag I apply the following:
var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
katex.render(math[i].innerHTML, math[i]);
}
So, my implementation works but there is a problem in what katex returns. The output of the above gives me:
This exact same question is asked here:
https://github.com/j13z/reveal.js-math-katex-plugin/issues/2
But I can't understand any of it.
The solution is to use element.textContent, not element.innerHTML.
If I use a form like what follows, the matrix will be rendered properly.
var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
katex.render(math[i].textContent, math[i]); // <--element.textContent
}
A solution that works for me is the following (it is more of a hack rather than a fix):
<script type="text/javascript">
//first we define a function
function replaceAmp(str,replaceWhat,replaceTo){
replaceWhat = replaceWhat.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var re = new RegExp(replaceWhat, 'g');
return str.replace(re,replaceTo);
}
//next we use this function to replace all occurences of 'amp;' with ""
var katexText = $(this).html();
var html = katex.renderToString(String.raw``+katexText+``, {
throwOnError: false
});
//hack to fix amp; error
var amp = '<span class="mord mathdefault">a</span><span class="mord mathdefault">m</span><span class="mord mathdefault">p</span><span class="mpunct">;</span>';
var html = replaceAmp(html, amp, "");
</script>
function convert(input) {
var input = input.replace(/amp;/g, '&'); //Find all 'amp;' and replace with '&'
input=input.replace(/&&/g, '&'); //Find all '&&' and replace with '&'. For leveling 10&x+ &3&y+&125&z = 34232
var html = katex.renderToString(input, {
throwOnError: false});
return html
}
Which version are you using?
Edit the src/utils.js and comment line number 51 to 55 after updated run in terminal npm run build command.

use span as column client template in kendo MVC grid

I use Kendo grid MVC and In The First Column I Use This Code:
columns.Template(s => s.IsActive).Title("").ClientTemplate(
" <input type='checkbox' \\#= IsActive ? checked='checked' : '' \\# /input>"
).Width(50);
and it works correctly, but when i wanted to use this code in span it's not working i wanted to show text insted of boolean my wrong code is :
columns.Template(s => s.IsActive).Title(T("My Title").ToString()).ClientTemplate(
" <span> \\#= IsActive?" + T("Required") + " : " + T("Optional") + " \\#</span>"
).Width(150);
so what's wrong with second one?
From looking at it the code is not being picked up because it it a mix of html and javascript. In the client templating then this should would in Kendo:
#if(data.IsActive === true){#<span>Required</span>#}else{#<span>Optional</span>#}#
I find this messy so I personally like to pull this out of the template and use a function as it means I can edit it easier and don't get frustrated. so something like this:
.ClientTemplate("#=TextFormatter(data.IsActive)#")
Then in the javascript would be
function TextFormatter(value)
{
var returnString = '';
if(value === true)
{
returnString = '<span>Required</span>';
}
else
{
returnString = '<span>Optional</span>';
}
return returnString;
}
For further reading check this link out: How do I have conditional logic in a column client template

How do I get the ASP.Net MVC Password HTML Helper to show characters as I type?

I'm using the Password HTML Helper in MVC5 to hide the social security number as it is entered.
#Html.Password("s", null, new { #maxlength = 9, autocomplete = "off" })
The problem I see with it is you just see dots as you type. Is there any way the helper behavior can be modified to show the characters you are typing in for a second or two then have them transformed to dots? That behavior would let the user confirm they are typing in the correct character. If the helper behavior cannot be modified is there another way to accomplish this?
I found this fiddle maybe you can use this as an option
http://jsfiddle.net/Ngtp7/
$(function(){
$(".showpassword").each(function(index,input) {
var $input = $(input);
$('<label class="showpasswordlabel"/>').append(
$("<input type='checkbox' class='showpasswordcheckbox' />").click(function() {
var change = $(this).is(":checked") ? "text" : "password";
var rep = $("<input type='" + change + "' />")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr('class', $input.attr('class'))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($("<span/>").text("Show password")).insertAfter($input);
});
});

How do I use ViewBag string in partial view javascript

I am returning this from a partial view:
<script>
document.getElementById("login").style.visibility = "hidden";
document.getElementById("displayname").innerHTML = #ViewBag.DisplayName
</script>
The second script line, however, does not work.
How to write this correctly?
Greg
#Html.Raw("document.getElementById(\"displayname\").innerHTML = " + #ViewBag.DisplayName)

Possible to iterate through markers after applying a query in a FusionTablesLayer?

I currently have a filter working on a fusion table rendered as a Map Layer, and I want to zoom to best fit all of the data whenever the filter is changed.
I figure I need to wait until the query is applied and then iterate through the markers to find the min/max x & y locations and pan to that rectangle, but I don't see a way in the Maps api to access the markers of a layer.
Anyone have an idea how to do this?
The short answer is no. To me this is one of the shortcomings of dealing with Fusion Tables via the Maps API. E.g. wanting to display a count of the results of my most recent query. But there is a work-around through the "undocumented" JSONP API to Fusion Tables. I've had great success using it but I must credit Robin Kraft with informing me about this API.
http://www.reddmetrics.com/2011/08/10/fusion-tables-javascript-query-maps.html.
Here's some code which allows you to re-execute your most recent query via an AJAX JSONP request and do what you want with the results, such as calculating the bounding-box. Note: this example uses Jquery for the AJAX JSONP calls. This example creates a <table> display but can be modified as needed.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Example call
getFTData(tableid, 'latitude,longitude', example_dataHandler);
<script>
// Globals same for all requests
var queryUrlHead = 'https://fusiontables.googleusercontent.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
// getFTData()
// table_id - Fusion Table id MUST have public permissions
// col_list - comma separated list of FT column names
// successFunction - function to parse the CSV results (see exampleParser below)
//////////////////////////////
function getFTData(table_id, col_list, successFunction) {
var query = "SELECT " + col_list + " FROM " + table_id;
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
$.ajax({
type: "GET",
url: queryurl,
dataType: "jsonp", // return CSV FustionTable response as JSON
success: successFunction,
error: function () {alert("AJAX ERROR for " + queryurl ); }
});
}
function example_dataHandler(d) {
// get the actual data out of the JSON object
var cols = d.table.cols;
var rows = d.table.rows;
var row_count = 0;
var results = '<table border="1" cellpadding="4">';
results += '<tr>';
for (var i = 0; i < cols.length; i++) {
results += '<th>' + cols[i] + '</th>';
}
results += '</tr>';
// loop through all rows to add them to the map
for (var i = 0; i < rows.length; i++) {
// Per the expected columns
results += '<tr>';
for(j=0; j < rows[i].length; j++)
{
results += '<td>' + rows[i][j] + '</td>';
}
results += '</tr>';
row_count++;
}
results += '</table>';
results += '<br />';
results += 'Row Count: ' + row_count + '<br />';;
document.getElementById("program_select").innerHTML = results;
}
</script>
Since retrieving the count of recent Fusion Table rows returned is common, I'm adding a snippet of how to do that.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var tableid = 3167783
var where = "WHERE type = 9";
getFTCount(current_table_id, where, displayCount);
// Globals same for all request
var queryUrlHead = 'https://fusiontables.googleusercontent.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
///////////////////////////////
// Get Counts from Fusion Tables.
// table_id required
// where optional "WHERE column == 'value' " where clause for count()
// successFunction callback required
///////////////////////////////
function getFTCount(table_id, where, successFunction) {
if(!table_id){
alert("table_id required.");
return;
}
if(!successFunction){
alert("successFunction callback required.");
return;
}
var query = "SELECT count() FROM " + table_id;
if(where){
query += ' ' + where;
}
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
$.ajax({
type: "GET",
url: queryurl,
dataType: "jsonp", // return CSV FustionTable response as JSON
success: successFunction,
error: function () {alert("AJAX ERROR for " + queryurl ); }
});
}
function displayCount(d) {
var count = d.table.rows[0];
alert(count);
}
</script>
If your data is in a fusion table, then use the fusion table's sql api to find the Max/Min val for Lat and Lng respectively:
https://www.googleapis.com/fusiontables/v1/query?sql=SELECT
MINIMUM(Lat) AS MinLat, MAXIMUM(Lat) AS MaxLat,
MINIMUM(Long) AS MinLong, MAXIMUM(Long) AS MaxLong
FROM <table_id>
See here for full details on api: https://developers.google.com/fusiontables/docs/v1/sql-reference. (One thing to remember is to ecodeURI this sql statement)
This returns those for value to json array. And as I'm sure your aware, use these values to set your map's 'center' and 'zoom' parameters.

Resources