I have a strange problem using ASP.NET MVC Core with DevExtreme components:
Here I have a simple DevExtreme dxTextBox. When the user types an input in the textbox and hits the enter key, the javascript method "showPopup" will be called with the parameter 'Kunde'.
<div class="dx-field">
<div class="dx-field-label">Kunde</div>
<div class="dx-field-value">
#(Html.DevExtreme().TextBox()
.ID("textBoxKunde")
.OnEnterKey("function(e) { showPopup('Kunde') }")
.Placeholder("Name und/oder Vorname des Kunden eingeben...")
)
</div>
</div>
Now here is the JavaScript-Code:
<script>
function showPopup(e) {
switch(e) {
case 'Kunde':
var input = $("#textBoxKunde").dxTextBox("option", "value");
alert(input);
As in the devExtreme API documentation described, the code $("#textBoxKunde").dxTextBox("option", "value"); should get the input-value of the textbox.
Now the strange thing:
This works all fine in Google Chrome and Mozilla Firefox but in Internet Explorer 9, I cant read out the input value, instead I get null value.
Much more strange is, I cant read out the value with IE 10 but when I turn on the developer tools in IE10 (same in IE-Edge), then I can suddenly read out the value.
I have already posted this problem on the DevExtreme Support Ticket, but I couldn't get a clue.
Does anyone have an idea of this strange behavior?
I have got an answer from the devextreme support team and this issue is solved now.
The solution was to add the ValueChangeEvent with the "keydown" Keyword, to get this work in IE9+
<div class="dx-field">
<div class="dx-field-label">Kunde</div>
<div class="dx-field-value">
#(Html.DevExtreme().TextBox()
.ID("textBoxKunde")
.OnEnterKey("function(e) { showPopup('Kunde') }")
.Placeholder("Name und/oder Vorname des Kunden eingeben...")
.ValueChangeEvent("keydown")
)
</div>
</div>
I have a question regarding KnockoutJs html5 validation.
If i wanted to include my error message on the page when it was loaded, like say i am doing a frontend module for my webshop and my error messages comes from tags.
In knockoutJS 2.2.1 i would be able to do this like so:
<span data-bind="validationMessage: firstName, text: 'Your error.'"></span>
<input data-bind='value: firstName, valueUpdate: "input"' required pattern="^[A-Za-z]{1,255}$" />
this would work fine and i could paste my errortag into the html page from the html file.
As seen in this fiddle.
http://jsfiddle.net/elbecita/gt228dgm/4/
However the problem is now that running the same code under knockoutjs 3.0 f.ex. the error message would be "This field is required."
So now i cant overwrite the custom message anymore without doing .extend(), is this intended and am i using this entirely wrong?
A gif to illustrate the issue: http://puu.sh/kHJH3/92a2708c93.gif
I found a similar problem on stackoverflow some of the solutions just seemed overkill but maybe there was a reason?
Setting error message in html with knockout validation this didnt have any accepted answers,so my question is really how do i paste my error message in the html?
Any input is much appreciated, thank you.
*(if i missed any information please let me know, first post long time lurker)
Validations can have multiple independent messages, so it makes some sense that the contents of the message are taken out of your hands. You choose where they display, but don't have to worry about what they say. I can see that you might want to intercept the standard message and turn it into a custom message. You can do that, but it's not built into validation (as far as I know).
viewModel.errors = ko.validation.group(viewModel);
var messageSubstitutes = {
'Invalid.': 'All letters',
'This field is required.': 'Try some letters'
};
viewModel.errMsg = ko.computed(function () {
var errs = viewModel.errors();
if (errs.length === 0) return null
var errMsg = errs[0](),
result = messageSubstitutes[errMsg];
return result;
});
and the HTML is just:
<legend data-bind="if:errMsg">Error: <span data-bind="text:errMsg"></span>
</legend>
<label>First name:
<input data-bind='value: firstName, valueUpdate: "input"' required pattern="^[A-Za-z]{1,255}$" />
</label>
Updated Fiddle
I was wondering how to get through the testing tool of Google when it comes to rich snippets or micro data and using json data.
The thing is that I don't have the option to use PHP and only javascript. So when I want to grab review data from let's say Trusted Shops for a shop I never get passed the testing tool because the data is always empty when Google crawls the page.
So what I mean is this:
There's a direct link to the json file with the review data
http://api.trustedshops.com/rest/public/v2/shops/X17BD396442BCEE0808C79156D0E95F97/quality/reviews.json
What I tried is this
<script type="text/javascript">
window.onload = function(){
var url = 'http://api.trustedshops.com/rest/public/v2/shops/X17BD396442BCEE0808C79156D0E95F97/quality/reviews.json';
$.getJSON(url, function(data){
var stuff = data.response.data;
var review = stuff.shop.qualityIndicators
$('#value').html(review.reviewIndicator.overallMark);
$('#votes').html(review.reviewIndicator.activeReviewCount);
});
}
</script>
HTML output
<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
<span rel="v:rating">
<span property="v:value" id="value">4.83</span> /
<span property="v:best" id="best">5.00</span>
</span> of
<span property="v:votes" id="votes">58</span> reviews.
</span>
Now with the Testing tool from Google I always get 3 errors saying "can't leave blank...".
Is such thing even possible??
So I have no clue how to use this tool, but none of their examples have javascript in them. I don't think this tool will execute any javascript in the left hand box before it tries to validate the data. There are examples with <script type="application/ld+json"> tags, but they are just JSON data, and not executable code (note the type).
To verify this I simply entered this snippet:
<script type="text/javascript">
console.log('it this on?');
</script>
When I click validate, nothing shows up in my browser console.
Whatever you are trying to make this tool do, I think is outside the scope of how it's intended to be used. It appears that this tools can validate the result of your code, but it cannot also run your code.
I've created a webpage where I want users to be able to search for a word/term stored in a CSV file, and if that term is found the full line for that line entry will be returned and displayed to the user (ideally in table format, otherwise a textarea will do).
But I need to do this using AJAX, and I also cant use PHP (unfortunately, otherwise I wouldn't be asking this question).
So far I have a table for the form/input/button, and I've also got the code to read the file, but I'm a bit stuck with bringing both together. I know this should be an easy thing to do, but I've spend a lot of time going through tutorials and online questions but havent been able to find anything similar.
If anyone knows of any tutorials that covers this, or can help out with the code below it would be appreciated.
<table>
<tr><td>Enter Search Term:
<input type="text" name="searchword" />
<input type="button" name="searchbutton" value="Search" onclick="contentDisp();">
</td></tr>
<tr><td><textarea id="contentArea" rows="40" cols="60"></textarea></td></tr>
</table> //currently using text area but ideally this would be displayed in a table
<script type="text/javascript">
function contentDisp()
{
$.ajax({
url : "file.csv",
success : function (data) {
$("#contentArea").html(data); // I THINK SOMETHING NEEDS TO GO IN HERE, WHICH WILL GRAB THE SEARCH TERM ABOVE AND THEN ONLY DISPLAY FILE CONTENTS USING THAT TERM, POSSIBLY 'CONTAIN' */
}
});
}
</script>
It is possible to do this strictly via JavaScript by using some strpos and indexOf functions (indexOf is the starting point, while the other will look for the string delimiter(s) ).
it is also possible to do the task with php if you feel comfortable with it, if you're restricted by domain-origin restriction, take a look at JSONP, which stands for JSON with Padding - which basically means that you'll need to wrap the result in a JavaScript function.
good luck.
User Regular Expressions to find your string and to parse the found line in the CSV data.
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
HTML
<input type="text" id="text" />
<input type="submit" id="btnsubmit" />
Script
$(function(){
$('#btnsubmit').on('click', function(){
var csv = $.ajax('text.csv');
csv.done(function(data){
var str = data.split(',');
var value = $('#text').val();
$.each(str, function(index, item){
if(item.match(value)){
console.log(item) //Output
};
})
})
})
});
CSV
Presidency ,President ,Wikipedia Entry,Took office ,Left office ,Party ,Portrait,Thumbnail,Home State
Why would you use strpos and indexOf when javascript already has built-in functions for matching strings?
http://jsfiddle.net/AWZg8/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm currently looking for a js library that can encode text in qr codes. The only one I've been able to find so far seems broken, although other people claim to be using it. The sample page doesn't work. By playing a bit with it I managed to generate codes but they don't get decoded by the phone software.
Is there another library is js for this? Has anyone managed to get it to work?
I'm not interested in a solution that pulls the code from an online service (kaywa, google etc.).
Update:
Well, you guys are right, that library does work. My problem was that I tried including it in a HTML5 Boilerplate page, and document.write doesn't seem to work in that. I modified the sample code anyway to make the browser draw in a canvas not a table and I got the order of the fillRect function backwards. Below is the corrected function call.
context.fillRect(c * UNIT_SIZE, r * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
// it's column-row, not row-column; don't ask why :)
Since I don't get my image transposed anymore :), now the qr decodes fine. Thanks for the support.
I wrote a simple GPLv3 qr encoder in javascript that is local, uses HTML5 and is really fast as it is a port of an embedded C version I wrote for Atmel AVR processors.
http://code.google.com/p/jsqrencode/downloads/list
There is a live version (which is saveable as a webapp on iOS devices) at
http://zdez.org/qrenc3.html (save to home, opens in safari so you can copy the image or use airprint)
Here is the link to the downloadable source code.
Script you posted is WORKING, sample.html is not parsed as HTML.
jquery-qrcode jQuery plugin also generates QR code using HTML5 canvas element or HTML table, if canvas is not supported.
https://github.com/jeromeetienne/jquery-qrcode
$('#test').qrcode({
width: 120,
height: 120,
text: "https://github.com/jeromeetienne/jquery-qrcode"});
Working jsFiddle demo:
http://jsfiddle.net/maxim75/YwN8p/4/
There is a simple JavaScript library which I found sometime back called QRCode.js.
QRCode.js is a cross-browser JavaScript library which allows you to generate QRCodes on the fly, on the client-side. It makes use of HTMl5 Canvas and Tables to display the QRCode. The library itself has no dependencies whatsoever.
To generate a QRCode, you just need to include the JavaScript library and then pass as parameters to the QRCode function, the text you want to encode as the QRCode, the width & height of the QRCode you want to display, as well as your specified foreground color and background color.
I've found a working javascript-jquery based qrcode generator that you might be interested. Its opensource and it's really working. Here is the link: https://github.com/jeromeetienne/jquery-qrcode
The good thing about this one is that its light weight and it does not call any remote service or website.
Google has a QR code generator as part of their Chart Tools that you can use here.
http://code.google.com/apis/chart/infographics/docs/qr_codes.html
The QR code in the initial post only supports up to 271 bytes (version 10, Size = 57x57, EC level L).
To make it support the full specs of QR code (version 40, 177x177, 2953 bytes), you have to add more values into its RS_BLOCK_TABLE.
See the remaining matrices (version 11-40) here:
http://two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html
Maksym's solution is better than Google's library because it runs at local does not need to call Google API. also if you don't use jQuery, you can use this one at https://github.com/amanuel/JS-HTML5-QRCode-Generator
I am using the ShieldUI Lite QR Code, which can be found here:
https://github.com/shieldui/shieldui-lite
Contains all versions of the QR Code, all Error levels.
Another HTML5 solution is http://davidshimjs.github.io/qrcodejs/ with IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile browser compatibility
As Canvas/PNG
There is also the new kjua from the same author as the "old" jQuery.qrcode.
As Canvas/PNG/SVG
And QR-Code-generator by #nayuki also has the ability to create QR codes as SVGs.
You can use Telerik Kendo-UI to generate qrcode and barcode. It is easy to use.
Try using this example code:
QR Code: https://demos.telerik.com/kendo-ui/qrcode/index
Barcode: https://demos.telerik.com/kendo-ui/barcode/index
npm has a few. I have no idea which ones are good.
$ npm search qrcode
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1379059929305
npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1379059929305
NAME DESCRIPTION A
jsqrcode a node port of Lazar Laszlo's `jsqrcode` qr code decoder =
jsqrcode-lite Simplified version of Lazar Laszlo's `jsqrcode` for node. =
node-zxing ZXing Wrapper =
qr A small library to generate QR codes with libqrencode. =
qr-element qrcode dom element =
qr.js qrcode encoding in javascript =
qrcode QRCode / 2d Barcode api with both server side and client side s
qrcode-emitter Emits QR codes found in an image stream. =
qrcode-npm QRCode Generator for JavaScript =
qrcode-terminal QRCodes, in the terminal =
qrcode.js QR Code Detection / Decoding / Generation =
qread QRcode detector & decoder =
qruri NodeJS port of Kang Seonghoon's qr.js =
rescode Generate Codes (EAN13, QRCODE ..) =
zbar node-zbar is a NodeJS binding to the ZBar QR Code library.
I couldn't find a javascript qr code generator.
But you could Consider using Google's API:
http://code.google.com/apis/chart/docs/gallery/qr_codes.html
http://togosoft.com/web/qrcode/qrcode.js
Update:
I just tried http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js and seems fine to me. The only thing I did was increase the size and made it close the TDs properly, since self closing is not correct html. http://k3rmit.org/nopaste/759
I tested 3 different strings and used a App called QRReader on my iPhone to decode.
Update 2:
With var qr = new QRCode(10, QRErrorCorrectLevel.L); I was able to fit 271 chars in the QRCode however might not be the most reliable setting.
If you can't find a native JavaScript implementation, you can always AJAX the image yourself from your server.
http://www.swetake.com/qr/qr_cgi_e.html
https://drive.google.com/open?id=0B3TWIbBcUUTwcE1vV24wQnRxNGs
above is the link of js file include it in your project and write the below code in ctp file in cake php or any where you want to use. i tested it in cake php...
<-- including the file....
<?php echo $this->Html->script('jquery.qrcode.min.js')?>
<div style='padding:100px''><img id="demo" style='width: 100px,height: 100px'></div>
<script type="text/javascript">jQuery("#demo").qrcode({text: "HEllo World!"});</script>
I know this is an old question, but I think it is not necessary a library to generate a QR Code from a text. You just need to use the QR code API.
The implementation is very simple, we have a form with a text field that captures the content data. Whenever we press the generate button we generate a new request URL to the API this URL has two main components data and size. The former requires the text content encoded and the latter will define the size of the image. Here is the code:
const baseURL = 'https://api.qrserver.com/v1/create-qr-code/?data='
const config = '&size=120x120'
const btnElement = document.getElementById('generate')
const dataElement = document.getElementById('data')
const qrCode = document.querySelector('.qr-code')
function htmlDecode(text) {
var div = document.createElement('div')
div.innerHTML = text
return ('textContent' in div) ? div.textContent : div.innerText
}
function htmlEncode(str) {
var div = document.createElement('div')
div[('textContent' in div) ? 'textContent' : 'innerText'] = str
return div.innerHTML
}
window.onload = () => {
btnElement.onclick = () => {
qrCode.src = baseURL + encodeURIComponent(htmlEncode(dataElement.value)) + config
}
}
.qr-code {
max-width: 160px;
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="text-center">
<img src="https://api.qrserver.com/v1/create-qr-code/?data=http%3A%2F%2Fwww.google.com&size=120x120" class="qr-code img-thumbnail img-responsive">
</div>
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" for="data">Enter content:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="data" placeholder="i.e. www.google.com">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="generate">Generate</button>
</div>
</div>
</div>
</div>