Develop Reference

Extjs 6 - grid search

I try to apply this example with another way. When I try it on console.log it seems run without error but when I do it on function(){}, it turns error all grid method is undefined such:
Uncaught TypeError: Cannot call method 'getView' of undefine.
The function:
onTextFieldChange = function () {
var grid = Ext.getCmp('grid'),
value = Ext.getCmp('gridfield'),
view = grid.getView(),
columns = grid.getColumns();
view.refresh();
grid.searchValue = value.getValue();
grid.matches = [];
grid.currentIndex = null;
if (grid.searchValue !== null) {
grid.store.each(function (record, index) {
var node = view.getNode(record),
count = 0;
if (node) {
Ext.Array.forEach(columns, function (column) {
var cell = Ext.fly(node).down(column.getCellInnerSelector(), true),
matches,
cellHTML,
seen;
if (cell) {
matches = cell.innerHTML.match(grid.tagsRe);
cellHTML = cell.innerHTML.replace(grid.tagsRe, grid.tagsProtect);
cellHTML = cellHTML.replace(grid.searchRegExp, function (m) {
++count;
if (!seen) {
grid.matches.push({
record: record,
column: column
});
seen = true;
}
return '<span class="' + grid.matchCls + '" style="font-weight: bold;background-color: yellow;">' + m + '</span>';
}, grid);
Ext.each(matches, function (match) {
cellHTML = cellHTML.replace(grid.tagsProtect, match);
});
// update cell html
cell.innerHTML = cellHTML;
}
});
}
});
}
};
The event:
xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
hideLabel: true,
width: 200,
change: onTextFieldChange()
Any suggestions?

I answer my own question if there is none, this is onTextFieldChange() method
onTextFieldChange = function () {
var me = Ext.getCmp('grid'),
count = 0;
me.view.refresh();
me.searchValue = getSearchValue();
me.indexes = [];
me.currentIndex = null;
if (me.searchValue !== null) {
me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));
me.store.each(function (record, idx) {
var td = Ext.fly(me.view.getNode(idx)).down('td'),
cell, matches, cellHTML;
while (td) {
cell = td.down('.x-grid-cell-inner');
matches = cell.dom.innerHTML.match(me.tagsRe);
cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);
// populate indexes array, set currentIndex, and replace wrap matched string in a span
cellHTML = cellHTML.replace(me.searchRegExp, function (m) {
count += 1;
if (Ext.Array.indexOf(me.indexes, idx) === -1) {
me.indexes.push(idx);
}
if (me.currentIndex === null) {
me.currentIndex = idx;
}
return '<span class="' + me.matchCls + '">' + m + '</span>';
});
// restore protected tags
Ext.each(matches, function (match) {
cellHTML = cellHTML.replace(me.tagsProtect, match);
});
// update cell html
cell.dom.innerHTML = cellHTML;
td = td.next();
if (me.currentIndex !== null) {
me.getSelectionModel().select(me.currentIndex);
}
}
}, me);
}
// no results found
if (me.currentIndex === null) {
me.getSelectionModel().deselectAll();
}
};

How to execute if conditional just once

I am wondering me how I do that, because all the time the variable returns to your default value. It's an Ibeacon application, I don't know if I need to show more details about my app. I just want to call the function something once, can anyone help me?
function uint8ArrToHexStringNoSpace(arr) {
return Array.prototype.map.call(arr, function(n) {
var s = n.toString(16);
if(s.length == 1) {
s = '0'+s;
}
return s;
}).join('');
}
var quit;
function something() {
if(quit) {
window.open("info.html");
}
quit = true;
}
function appendTd(root, value, id) {
var text = document.createTextNode(value);
var td = document.createElement("p");
if(id) {
td.id = id;
}
td.appendChild(text);
root.appendChild(td);
}
function hex16(i) {
var s = i.toString(16);
while(s.length < 4) {
s = '0'+s;
}
return s;
}
var beacons = {};
var app = {
initialize: function() {
// Important to stop scanning when page reloads/closes!
window.addEventListener('beforeunload', function(e)
{
iBeacon.stopScan();
});
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
//app.receivedEvent('deviceready');
app.startScan();
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
},
startScan: function() {
iBeacon.startScan({}, function(beacon) {
//console.log("beacon found: "+beacon.address+" "+beacon.name+" "+beacon.rssi+"/"+beacon.txPower);
var r = beacon.region;
//console.log("M"+r.major.toString(16)+" m"+r.minor.toString(16)+" uuid "+uint8ArrToHexStringNoSpace(r.uuid));
var key = 'tx'+beacon.address.replace(/:/g,'_');
//console.log('key: '+key);
if(beacons[key] == null) {
beacons[key] = beacon;
var root = document.getElementById("beaconListRoot");
var tr = document.createElement("tr");
var br = document.createElement("br");
// <tr><td>Address</td><td>Name</td><td>RSSI</td><td>ID</td><td>UUID</td></tr>
var adress = ' Adress: ';
var name = ' Name: ';
var distance = ' distance: ';
var major = ' Major: ';
var minor = 'Minor: ';
var UUID = ' UUID: ';
appendTd(tr, adress + beacon.address + name + beacon.name);
appendTd(tr, distance + beacon.rssi+" /"+beacon.txPower+"\u00A0"+beacon.estimatedDistance.toFixed(2)+'m', key);
appendTd(tr, major + hex16(r.major)+"\u00A0"+ minor +hex16(r.minor));
appendTd(tr, UUID + uint8ArrToHexStringNoSpace(r.uuid));
root.appendChild(tr);
} else {
var td = document.getElementById(key);
td.firstChild.nodeValue = 'Power: ' + beacon.rssi+"/"+beacon.txPower+ ' Distance: ' + "\u00A0"+beacon.estimatedDistance.toFixed(2)+'m';
}
if(beacon.address == '78:A5:04:13:3B:17' && beacon.estimatedDistance.toFixed(2) <= 10 ){
something();
}
}, function(error) {
console.log("startScan error: " + error);
});
},
};

use localStorage: https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
localStorage (and sessionStorage) let you keep persistent values
function something() {
localStorage.setItem("somethingCalled", "yes");
if(quit) {
window.open("info.html");
}
quit = true;
}
then where you call something():
if (localStorage.getItem("somethingCalled")!="yes") {
something()
}
you may whant to use sessionStorage instead of localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)

javascript: How to build a function that refers to the variables in my Quiz app?

I recently built a small quiz application, it currently only has two questions. After all the questions are finished I would like for the app to present a page that says "You made it here" (eventually I'll add more). However for some reason the final-function feedback of this code is not working. Where am I going wrong?
$(document).ready(function () {
var questions = [
{question: "Who is Zack Morris?",
choices: ['images/ACslater.jpg','images/CarltonBanks.jpeg','images/ZachMorris.jpg'],
quesNum: 1,
correctAns: 2},
{question: "Who is Corey Matthews?",
choices: ['images/CoryMatthews.jpeg','images/EdAlonzo.jpg','images/Shawnhunter.jpg'],
quesNum: 2,
correctAns: 1},
];
var userAnswer //THis needs to be looked into
var counter = 0;
var score = 0;
var html_string = '';
var string4end = ''
//function to loop choices in HTML, updates counter, checks answer
var update_html = function(currentQuestion) {
// put current question into a variable for convenience.
// put the question string between paragraph tags
html_string = '<p>' + currentQuestion.question + '</p>';
// create an unordered list for the choices
html_string += '<ul>';
// loop through the choices array
for (var j = 0; j < currentQuestion.choices.length; j++) {
// put the image as a list item
html_string += '<li><img src="' + currentQuestion.choices[j] + '"></li>';
}
html_string += '</ul>';
$('.setImg').html(html_string);
}
update_html(questions[0]);
$('.setImg li').on('click', function (e) {
userAnswer = $(this).index();
checkAnswer();
counter++;
update_html(questions[counter]);
$('#score').html(score);
showFinalFeedback();
});
//function to identify right question
function checkAnswer ()
{
if (userAnswer === questions[counter].correctAns)
{
score=+100;
}
}
function showFinalFeedback ()
{
if (counter === (questions.length+1))
{
string4end = '<p>' + 'You made it here!!!!' + '</p>';
$('.setImg').html(string4end);
}
}
});

I agree with Vector that you either should start with 1 as Counter initialization or, to check
if (counter < questions.length) {
return;
}
alert('You \'ve made it till here');
I also rewrote it in a form of a jquery plugin, maybe a handy comparison to your way of working?
jsfiddle: http://jsfiddle.net/DEb7J/
;(function($) {
function Question(options) {
if (typeof options === 'undefined') {
return;
}
this.chosen = -1;
this.question = options.question;
this.options = options.options;
this.correct = options.correct;
this.toString = function() {
var msg = '<h3><i>' + this.question + '</i></h3>';
for (var i = 0; i < this.options.length; i++) {
msg += '<a id="opt' + i + '" class="answer toggleOff" onclick="$(this.parentNode).data(\'quizMaster\').toggle(' + i + ')">' + this.options[i] + '</a>';
}
return msg;
};
this.toggle = function(i) {
var el = $('#opt' + i);
if ($(el).hasClass('toggleOff')) {
$(el).removeClass('toggleOff');
$(el).addClass('toggleOn');
} else {
$(el).removeClass('toggleOn');
$(el).addClass('toggleOff');
}
};
}
function Quiz(elem, options) {
this.element = $(elem);
this.lastQuestion = -1;
this.questions = [];
this.correct = 0;
if (typeof options !== 'undefined' && typeof options.questions !== undefined) {
for (var i = 0; i < options.questions.length; i++) {
this.questions.push(new Question(options.questions[i]));
}
}
this.start = function() {
this.lastQuestion = -1;
this.element.html('');
for (var i = 0; i < this.questions.length; i++) {
this.questions[i].chosen = -1;
}
this.correct = 0;
this.next();
};
this.next = function() {
if (this.lastQuestion >= 0) {
var p = this.questions[this.lastQuestion];
if (p.chosen === -1) {
alert('Answer the question first!');
return false;
}
if (p.chosen === p.correct) {
this.correct++;
}
$(this.element).html('');
}
this.lastQuestion++;
if (this.lastQuestion < this.questions.length) {
var q = this.questions[this.lastQuestion];
$(this.element).html(q.toString());
console.log(q.toString());
} else {
alert('you replied correct on ' + this.correct + ' out of ' + this.questions.length + ' questions');
this.start();
}
};
this.toggle = function(i) {
if (this.lastQuestion < this.questions.length) {
var q = this.questions[this.lastQuestion];
q.toggle(q.chosen);
q.toggle(i);
q.chosen = i;
}
};
}
$.fn.quizMaster = function(options) {
if (!this.length || typeof this.selector === 'undefined') {
return;
}
var quiz = new Quiz($(this), options);
quiz.start();
$(this).data('quizMaster', quiz);
$('#btnConfirmAnswer').on('click', function(e) {
e.preventDefault();
quiz.next();
});
};
}(jQuery));
$(function() {
$('#millionaire').quizMaster({
questions: [
{
question: 'Where are the everglades?',
options: ['Brazil','France','USA','South Africa'],
correct: 2
},
{
question: 'Witch sport uses the term "Homerun"?',
options: ['Basketball','Baseball','Hockey','American Football'],
correct: 1
}
]
});
});

Hey guys thanks for your help. I was able to use the following work around to ensure everything worked:
$('.setImg').on('click', 'li', function () {
userAnswer = $(this).index();
checkAnswer();
counter++;
$('#score').html(score);
if (counter < questions.length)
{
update_html(questions[counter]);
}
else{
showFinalFeedback();
}
});

BackboneJS View render issue

I have a details view from where I load a modal popup as below;
var modal = new MyModalView({
model: person
});
My modal view looks as below;
define([
'base/BaseModalView'
], function(BaseModalView) {
var MyModal = BaseModalView.extend({
el: "#myModalContainer",
initialize: function() {
this._initAndRenderModal(myModalTemplate, {
model: this.model.toJSON()
});
},
render: function() {
var self = this;
self.personModel = new Person({
"personId": $('#personName option:selected').data('personid'),
"personName": $('#personName').val()
});
self.populatePersons();
},
populatePersons: function() {
var self = this,
$personName = $('#personName', this.el);
$personName.attr('disabled', 'disabled').html('<option value="">Loading Persons...</option>');
self.personCollection.fetch({
success: function() {
var personList = self.personCollection.toJSON(),
aOptions = '<option value="">- Select -</option>',
l = personList.length;
if (l)
{
for (var i = 0; i < l; ++i)
{
var val = _.escape(personList[i].personName);
aOptions += '<option value="' + _.escape(personList[i].personName) + '" data-personid="' + _.escape(personList[i].personId) + '" title="' + val + '">' + val + '</option>';
}
$personName.removeAttr('disabled').html(aOptions);
}
else
{
$personName.html('<option>No Person available</option>');
}
if (self.model.get("personId") != null) {
$personName.val(self.model.attributes.person.attributes.personName);
$personName.attr("disabled", "disabled");
}
}
});
},
saveAction: function(event) {
var self = this;
var checkPerson = self.personModel.validateAll();
var invalid = !checkPerson.isValid;
if (invalid) {
if (!checkPerson.isValid) {
self.showValidationErrors(checkPerson.messages);
}
return true;
}
return false;
}
});
return MyModal;
});
My question is in the Edit mode,
self.personModel is having null values
when I save the form, since the below code is called after the values are set;
self.personModel = new Person({
"personId": $('#personName option:selected').data('personid'),
"personName": $('#personName').val()
});
How do I fix this?

Autocomplete with javascript, not passing the variables

I'm using this autocomplete code to be able to pull stock information:
var YAHOO = {};
YAHOO.util = {};
YAHOO.util.ScriptNodeDataSource = {};
var stockSymbol;
var compName;
YUI({
filter: "raw"
}).use("datasource", "autocomplete", "highlight", function (Y) {
var oDS, acNode = Y.one("#ac-input");
oDS = new Y.DataSource.Get({
source: "http://d.yimg.com/aq/autoc?query=",
generateRequestCallback: function (id) {
YAHOO.util.ScriptNodeDataSource.callbacks =
YUI.Env.DataSource.callbacks[id];
return "&callback=YAHOO.util.ScriptNodeDataSource.callbacks";
}
});
oDS.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: "ResultSet.Result",
resultFields: ["symbol", "name", "exch", "type", "exchDisp"]
}
});
acNode.plug(Y.Plugin.AutoComplete, {
maxResults: 10,
resultTextLocator: "symbol",
resultFormatter: function (query, results) {
return Y.Array.map(results, function (result) {
var asset = result.raw,
text = asset.symbol +
" " + asset.name +
" (" + asset.type +
" - " + asset.exchDisp + ")";
return Y.Highlight.all(text, query);
});
},
requestTemplate: "{query}&region=US&lang=en-US",
source: oDS
});
acNode.ac.on("select", function (e) {
alert(e.result.raw.name);
stockSymbol = e.result.raw.symbol;
compName = e.result.raw.name;
alert("stockSymbol is "+stockSymbol);
alert("compName is "+compName);
});
});
I have a text field where the text is being entered, then I need to display a few pieces of information based on what was entered:
$(document).ready(function(e) {
//$(".selector").button({icons: {primary: "ui-icon-search"}});
//$(".home").button({icons: {primary: "ui-icon-home"}});
var q = window.location.href.split("?ac-input=");
alert("q is "+q)
if (q && q[1])
$("input").val(q[1]);
alert("what is this?" +q[1]);
runForm();
});
..........
function runForm(){
$("#stock_news").html("");
//var stockSymbol = e.result.raw.symbol;
alert('stockSymbol in runForm is ' +stockSymbol);
alert('compname is runForm is '+compName);
var newsStocks = "http://query.yahooapis.com/v1/public/yql?.......";
$.getJSON(newsStocks, function(data) {
var headlines = data.query.results.a;
newStr = "<h3>Current Headlines</h3>";
newStr += "<ol>";
for(var i=0; i<headlines.length; ++i){
var news = headlines[i];
newStr += "<li><a href='"+news.href+"'>"+news.content+"</a></li>";
}
newStr += "</ol>";
$("#stock_news").html(newStr);
});
htmlStr = '<img src="http://chart.finance.yahoo.com/z?s='+stockSymbol+'&t=5d&q=l&l=off&z=s&region=US&lang=en-EN"/>';
$("#stock_graph").html(htmlStr);
}
What is happening is, the stockSymbol and compName are correctly set from entering, but for some reason nothing renders on the page, as q is undefined....Any ideas on where I am messing up here?
Figured it out. I needed to call runForm inside the acNode.ac.on("select", function (e)