I'm new in Handsontable.
I want to call Handsontable's method such as getData or selectCell. I have already tried out what the documentation is saying but it doesn't work.
Below is my JavaScript (jQuery) code:
$(document).ready(function () {
var test;
$.ajax({
type: 'POST',
url: 'accounting/ajax/ajaxLoadForViewAccount.php',
datatype: 'script',
data: {
tbname:tbname
},
success: function (response) {
test = JSON.parse(response);
var data = new Array();
var headerName = new Array();
var i=0;
for(i=0;i<test.room_num.length;i++){
var obj = {room_num:test.room_num[i],rental_fee:test.rental_fee[i]};
data.push(obj);
headerName[i] = test.room_num[i];
}
var container = document.getElementById('example');
var hot;
hot = new Handsontable(container, {
data: data,
colWidths: [80, 80],
rowHeaders: headerName,
colHeaders: ['room_num','rental_fee']
});
},
error: function () {
alert('error');
}
});
$('#submit').click(function () {
$('#example').append("<p>Testtttttttttttttttttttttttttttttttttttttt</p>");
$('#example').handsontable('setDataAtCell',1,1,'10000');
alert('test');
});
});
According to my code, after I click the submit button the example div is appended with "Testtttttttttttttttttttt" that means $('example') selector should work fine. In addition the 'test' alert also appears. However the method setDataAtCell doesn't work.
Consider always using the hot instance variable to access the instance. In your case:
hot.setDataAtCell(1,1,'10000')
Related
I have two <p> fields where I need to assign text
Here is html code:
<p id="appId" style="visibility: hidden;"></p>
<p id="calculationId" style="visibility: hidden;"></p>
I make AJAX call like this
$('#openCalculationConsumables').click(function() {
addConsumables();
});
function addConsumables() {
var patientName = $('#patientsId').val();
var finding = $('#findingvalue').val();
var procedure = $('#procedurevalue').val();
var model = {
findingValue: finding,
procedureValue: procedure,
patientId:patientName
}
$.ajax({
url: '#Url.Action("AddIndividualCalculation", "Calculations")',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(model),
type: 'POST',
dataType: 'json',
processData: false,
success: function (data) {
$('#masters_data').load('#Url.Action("IndividualCalculationConsumables", "Calculations")', function() {
var list = data;
$('#calculationId').text(list[0].calcid);
$('#appId').text(list[0].appid);
});
}
});
}
And here is my back end code:
public JsonResult AddIndividualCalculation(string findingValue, string procedureValue,int patientId)
{
using (var ctx = new ApplicationDbContext())
{
Calculation calc = new Calculation
{
};
ctx.Calculations.Add(calc);
ctx.SaveChanges();
int calculationId = calc.Id;
Appointment app = new Appointment
{
Calculation_id = calculationId,
FindingContent = findingValue,
ProcedureContent = procedureValue,
Patient_id = patientId
};
ctx.Appointments.Add(app);
ctx.SaveChanges();
int appointmentId = app.Id;
var items = new
{
appid = appointmentId,
calcid = calculationId
};
return Json(items,JsonRequestBehavior.AllowGet);
}
}
I set breakpoint and see , that I have values in items. In console log I have this {appid: 1006, calcid: 1006}
But I cant assign it to <p> and have this error.
Cannot read property 'calcid' of undefined
Where is my problem?
Thank's for help.
$('#masters_data').load('#Url.Action("IndividualCalculationConsumables", "Calculations")', function() {
var list = data;
$('#calculationId').text(list[0].calcid);
$('#appId').text(list[0].appid);
});
list[0] is not defined as you are returning just an anonymous object not a list of objects
new {
appid = appointmentId,
calcid = calculationId
};
I'm using Zend Framework 2.
I would like to know how to get data defined in html in my javascript code.
html
<tr class="MyClass" data-MyData="<?php echo json_encode($array);?>">
javascript
$(document).on('click','.MyClass', function () {
var temp =document.getElementsByClassName("data-MyData");
$.ajax({
url: path_server + "pathDefinedInMyConfig",
type: 'post',
encode: true,
dataType: 'json',
data: {
'temp ': temp
},
success: function (data) {
//some code
},
error: function () {
alert("ERROR");
}
});
});
The problem is I don't have access to row in my Controller method. And i want to have access to My $array defined in html in my Controller.
Problem is that you are trying to find a class by the name data-MyData, but the object you "want" to look for is "MyClass"
Try something like var temp =document.getElementsByClassName("MyClass").attr("data-MyData");
Even better is that since you click on the object with MyClass you can use $(this).attr('data-MyData');
then result will look like: var temp = $(this).attr('data-MyData');
Simply replace temp var assignment line:
var temp =document.getElementsByClassName("data-MyData");
with this one:
var temp = this.getAttribute("data-MyData");
Since you use jQuery use the following:
$('.MyClass').data('MyData')
or
$('.MyClass').attr('data-MyData')
use like this-
$(document).on('click','.MyClass', function () {
var temp =$(this).attr('data-MyData');
$.ajax({
url: path_server + "pathDefinedInMyConfig",
type: 'post',
encode: true,
dataType: 'json',
data: {
'temp ': temp
},
success: function (data) {
//some code
},
error: function () {
alert("ERROR");
}
});});
You have a wrong selector. document.getElementsByClassNames() returns the collections so you have to loop through to get the target element:
var temp =document.getElementsByClassName('MyClass');
[].forEach.call(temp, function(el){
console.log(el.dataset['MyData']);
});
or as you are using jQuery then you can use .data():
var temp =$(this).data("MyData");
and with javascript:
var temp =this.dataset["MyData"];
// var temp =this.dataset.MyData; // <---this way too.
//path = the location of the external file
//scriptBlockId = the id of the external script block (<script id="add-form-tempate" type="text/html-template">)
//fillId = where you want to place the template when rendered
var App = Backbone.View.extend({
render: function (path, scriptBlockId, fillId) {
$.ajax({
async: false,
dataType: 'html',
method: 'GET',
url: path,
success: function (response) {
//Not sure why we have to do this first, before we can select the script block?
var section = $('#main').append(response);
var templateString = $(section).find('#' + scriptBlockId).html();
var compiledTemplate = _.template(templateString);
var temp = compiledTemplate();
$(fillId).html(temp);
}
});
}
});
var app = new App();
app.render(window.siteRoot + 'Scripts/_test1.tmpl.html', 'add-form-template', '#main');
This code works! Why we have to append first I do not know...
You may have had an issue w/ the aysnc $.ajax.
var App = Backbone.View.extend({
render: function(path, scriptBlockId, fillId) {
var self = this;
$.ajax({
async: false,
dataType: 'html',
method: 'GET',
url: path,
success: function(response) {
var templateString = $(response).find(scriptBlockId)[0].innerHTML,
compildeTemplate = _.template(templateString),
temp = compildeTemplate();
$(fillId).html(temp);
}
});
return this;
}
});
var app = new App();
app.render(window.siteRoot + 'Scripts/_test1.tmpl.html', 'add-form-tempate', '#main');
I also tried to do what I think you're trying to accomplish by searching your HTML result for an id and pulling the content out of that script block.
I have constructed an app with push state. Everything is working fine. However in some instances my jquery function are fireing multiple times. That is because when I call push state I bind the particular js file for each page I call. Which means that the same js functions are binded many times to the html while I surf in my page.
Tip: I am using documen.on in my jquery funciton because I need my function to get bound to the dynamical printed HTML through Ajax.
I tried to use off in the push state before printing with no success!
Here is my code:
var requests = [];
function replacePage(url) {
var loading = '<div class="push-load"></div>'
$('.content').fadeOut(200);
$('.container').append(loading);
$.each( requests, function( i, v ){
v.abort();
});
requests.push( $.ajax({
type: "GET",
url: url,
dataType: "html",
success: function(data){
var dom = $(data);
//var title = dom.filter('title').text();
var html = dom.find('.content').html();
//alert(html);
//alert("OK");
//$('title').text(title);
$('a').off();
$('.push-load').remove();
$('.content').html(html).fadeIn(200);
//console.log(data);
$('.page-loader').hide();
$('.load-a').fadeIn(300);
}
})
);
}
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
Thanks in advance!
simple bind new function with blank code
$( "#id" ).bind( "click", function() {
//blank
});
or
used
$('#id').unbind();
Try this,
var requests = [];
function replacePage(url) {
var obj = $(this);
obj.unbind("click", replacePage); //unbind to prevent ajax multiple request
var loading = '<div class="push-load"></div>';
$('.content').fadeOut(200);
$('.container').append(loading);
$.each(requests, function (i, v) {
v.abort();
});
requests.push(
$.ajax({
type: "GET",
url: url,
dataType: "html",
success: function (data) {
var dom = $(data);
//var title = dom.filter('title').text();
var html = dom.find('.content').html();
//alert(html);
//alert("OK");
//$('title').text(title);
obj.bind("click", replacePage); // binding after successfulurl ajax request
$('.push-load').remove();
$('.content').html(html).fadeIn(200);
//console.log(data);
$('.page-loader').hide();
$('.load-a').fadeIn(300);
}
}));
}
Hope this helps,Thank you
I've started to work with dojo in formulares. It works fine but I have a problem with Selectboxes.
The store of this selectbox is created within a function of the ready function. Afterwards I made an set('value', data); with data, which I get from an Ajax call to the server. The value from this selectbox doesn't change. If I tested the same code in the console it doesnt't work too.
I made another selectbox and the same function changes the value of the other selectbox.
Here the code creat code from the selectbox:
var shop_id = dijit.byId('shopSelect').get('value');
var person_count = document.getElementById("person_count").value;
var produkt_count = document.getElementById("person"+person_count+"_produkt_count").value;
xhr.get({
url: "./ajax_getAlterskategorie.php?shop_id="+shop_id,
handleAs: "json"
}).then(function(data){
var tmp = new Memory({ data: data.selectbox });
var os = new ObjectStore({ objectStore: tmp });
var s = new Select({
store: os,
name: "person"+person_count+"_alter",
style: {width: "200px"} ,
onChange: function ( alterskategorie)
{
if( dijit.byId('shopSelect'))
{
var shop_id = dijit.byId('shopSelect').get('value');
}
else
{
var shop_id = 0;
}
xhr.get({
url: "./ajax_getProdukt.php?alterskat="+alterskategorie+"&getpkat=1&shop_id="+shop_id,
handleAs: "json"
}).then(function(data){
var produkt_count = document.getElementById("person"+person_count+"_produkt_count").value;
var tmp = new Memory({ data: data });
var os = new ObjectStore({ objectStore: tmp });
for( var i = 1; i <= produkt_count; i++)
{
dijit.byId( 'person'+person_count+'_pkat'+i).setStore(os);
}
});
}
}, "person"+person_count+"_alter");
s.startup();
});
and this is the code for changing the value:
xhr.get({
url: "./ajax_getOrder.php?order_id="+document.getElementById("id").value,
handleAs: "json"
}).then(function(data){
for( i = 1; i <= data.person_count; i++)
{
dijit.byId('person'+i+'_alter').set('value', '"+data["person"][i]["alter"]+"');
}
});
dijit.byId('person'+i+'_alter').set('value', '"+data["person"][i]["alter"]+"');
Why use the '"+ and +"', and not just:
dijit.byId('person'+i+'_alter').set('value', data["person"][i]["alter"]);
Make sure that data (key) you're trying to set with data["person"][i]["alter"] is available in the select widget already.
Notice: watch out if you're using integers (like 1,2,3.. :) ) as keys for your select options, it was a bit buggy some time ago.