i don't know what happen. i just load my data with json and applying paging with dataView. the data is displayed well but i can't scrolling to the bottom. so when i click "25" to show 25 rows, the table only display 24 rows. same if i click "50", "100" or all rows.
i check with firebug, the JSON response is complete.
i tried to inspect element in the browser, compare mine with file "examples/example-optimizing-dataview.html". and i got this:
.slick-viewport has height: 452px;
and on the example file
.slick-viewport has height: 473px;
and if i change the height in firefox with inspect element feature. i can see the bottom of data.
how do i solve this?
here is my code http://pastebin.com/vqYEW1Zg
First of all you don't need to loop through your data with a dataView object, by just binding the getJSON result data with dataView.setItems(data) is all you need. The loop is required only when not using a dataview. So remove that loop inside your getJSON and have this code at the end of your getJSON function:
$.getJSON(ajaxFileURL,ajaxUpdateURL,function(data){
// all your previous code...
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
}); // end of getJSON
As for the rest, you should also look at your previous question, I also replied you and modified the code sample there...
Related
I've a grid using cell-edit mode. The problem is: after the last cell is modified, the focus is still in that cell.
Then, no ENTER/ESC is pressed, directly click the next page to do input for next page. After some days, they find the last cell of each page is NOT saved as expected.
How to deal with this?
I've tried to modify jqgrid.src.js to bind('blur') on the cell-edit element to call the saveCell like this
....
$("input, select, textarea", cc).bind("keydown" .
....
//my code start here
.bind("blur", function (e) {
$($t).jqGrid("saveCell", iRow, iCol);
)
//my code end here
This will save the modification as expected. BUT, the NEXT-PAGE/PRE-PAGE of the grid does not work anymore until a reload.
I think this is a common problem for jqgrid users.
Does anyone can help me?
I'd recommend you to use onPaging callback as the place for saving the editing cell by saveCell. See the answer.
If I try to getData() immediately after I setData(), the contents have not yet been filtered. How can I get the post-filtered contents programmatically?
See this JSFiddle for a very simple repro. By clicking the 'source' after the 'test' button, you can see that the filter is eventually run.
https://jsfiddle.net/L8kb4nes/7/ (ignore string concat used to get around jsfiddle limitations)
editor.setData('<p>Hi There!</p><script></script>');
$('#output').text(editor.getData());
//Outputs '<p>Hi There!</p><script></script>'
//Source button shows '<p>Hi There!</p>'
While the documentation doesn't describe this, setData() is actually asynchronous.
ckeditor has several events that you can listen to, 'dataReady' is explicitly in response to the setData() method (it does not fire after user input), while 'change' is fired after setData AND user input.
Sample code to get the modified data after set:
editor.setData('<p>Hi There!</p><script></script>');
editor.once('dataReady', function(){
$('#output').text(editor.getData());
});
So I have an asynchronous call to a controller in c# to obtain say 100 objects.
After this is done I load it into my html page and through a parameter in the link I intend to scroll to it.
So for instance: localhost/page.aspx?scrollToId=85
I do this as follows:
var selectedItem = $("tr[data-scrollToId='" + selectedItemId() + "']");
$('body').scrollTo(selectedItem );
selectedItem.fadeOut().fadeIn();
This works when I have static elements but because of the asynchronous call the dom is loaded way later and it doesnt scroll to it. (It does fade out and in again).
I have been looking at the afterRender method of knockout itself but this too didn't give any change.
Is there a way to wait for the actual dom to render all elements and only after this is done, scroll to it?
Many thanks in advance.
The issue was actually that afterRender only works on templates. I moved my view to a template then afterRender works.
in my CGridView I have this simple function:
'afterAjaxUpdate' =>
'function(id, data) {
var checks2 = $("#checks").val().split(",").sort();
$("#rule-competitors-grid input:checkbox").each(function() {
console.log($.inArray($(this).attr("name").substr(11,$(this).attr("name").length - 12), checks2));
if ($.inArray($(this).attr("name").substr(11,$(this).attr("name").length - 12), checks2) !== -1)
$(this).attr("checked", "checked");
});
}',
On a list that shows 2 items at a time (for debugging).
See the console.log()s over there? They happen 13 times each call.
How can I fix this?
Problem:
Your CSS selector is valid for 13 checkboxes which you then iterate in your "each" statement. You'll need a new approach if you are looking to update one specific row at a time.
Yii's documentation (http://www.yiiframework.com/doc/api/1.1/CGridView#afterAjaxUpdate-detail) says it all:
A javascript function that will be invoked after a successful AJAX response is received. The function signature is function(id, data) where 'id' refers to the ID of the grid view, 'data' the received ajax response data.
Suggestion:
Change your selector to find the exact checkbox you need to update based on a classname and ID value. Work from the grid's 'id' variable down to the specific row you want to make changes to.
The solution was dumb and unrelated, but I'm sure someone in this world might encounter the same.
My problem was that the JavaScript was loaded through AJAX in the loaded page in a dialog/tab and not in the main page. What happens is that the "click" trigger was re-assigned, and added to the elements every time I reloaded the tab/dialog. After reloading it 13 times to check on small changes (since it's an AJAX dialog I was able to avoid having to update the whole page), it was loaded inside.
To avoid this, either unbind the events as soon as the dialog/tab is reloaded, or use .on() to lively load it on the main page and not the tab/dialog so the code isn't re-added to the event every time you load it.
I have some php scripts which esentially take a long time to retrieve data. As a result this impacts highcharts loading times as the current code I have only writes the chart once all the data is retrieved as the highcharts code is only echoed once all processing is complete.
This causes the page to basically show nothing until the data is retrieved. The goal is to have the highcharts load immedietly and then write to the series with the data returned by the php scripts.
So, what I'm looking to to is have all the graphs load immedietly and display 'loading' with no data and then use setData to pass in the data to the graph series once the php scripts have completed.
I'm just wondering if anyone had any examples of this being done? Another problem I'm having is only being able to set the data within the $(document).ready(function() function. e.g.
works:
http://preview.tinyurl.com/b724bxo
breaks:
http://preview.tinyurl.com/a7mqqkc
Many thanks and any help would be greatly appriciated.
Don't know if you're still looking for this, but to display a "loading" message, you can use the "setLoading()" method on the chart.
pipeline_by_sales_stage_highchart.setLoading("Loading...")
Check this fiddle: http://jsfiddle.net/QSfEJ/
You can't access variable out of scope, move that into that scope, or make variable global.
http://jsfiddle.net/M2jv7/33/ -inside scope
http://jsfiddle.net/M2jv7/34/ -global variable
var pipeline_by_sales_stage_highchart;
$(document).ready(function () {
pipeline_by_sales_stage_highchart = new Highcharts.Chart({
});
...
// somewhere:
pipeline_by_sales_stage_highchart.series[0].setData(data);
See my answer here: Highchart series update in javascript
Summary :
Initialise chart with empty series, then use addSeries in a loop to update chart, like this:
this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
this.chart.addSeries(serie, false); // false is to prevent redrawing
}.bind(this));
this.chart.redraw(); // manually redraw
this.chart.hideLoading(); // stop loading if showLoading() was call before
jsFiddle here: https://jsfiddle.net/qyh81spb/