Scrollbar freezing when there is lots of data in jQuery dialog - javascript

I have a jQuery Dialog box which is populated by an AJAX call to a controller action in ASP.net MVC. This AJAX call returns more than 13,000 rows of data which is bound to a table inside the dialog.
In IE11 the scrollbar becomes unresponsive for few seconds while I am trying to scroll through the result, and then responds and then again becomes unresponsive and so on. It's not really giving a good UI experience for the user. The scrollbar mostly remains freezed. I do not face the same issue in Chrome.
Below is the code I have written for the dialog.
$("#dialog").dialog({
title: "title",
width: 800,
height: 450,
modal: true,
open: function(event, ui) {
$(this).load(UrlHelper.Resolve("/ControllerName/ACtionMethodName"), function(data, status) {
$('#ajaxSpinner').hide();
if (status == 'success') {
$("#dialog").html(data);
} else {
alert('An error occurred while processing your request');
}
});
},
close: function(event, ui) {
$(this).dialog('close');
},
dialogClass: 'dialogPosition'
});
I wish I could have condensed the problem into a fiddle for your help, I have no idea how to reproduce it in a smaller scale. Hope I was able to explain the issue.

You are trying to load too much content in one time, try to paginate your datas.
You can even try this jquery infinite scroll plugin (jscroll) : https://jscroll.com/

Related

jQuery EasyUI put scrollbar in $.messager.show

I am using jQuery EasyUI in my web app. After some AJAX call, I will call $.messager.show method to display information if there is any error messages. The error messages sometimes is less and sometimes is in multiple lines. So when it comes to more than 3 lines, some of the message cannot be seen. I plan to put a scroll bar because I don't want to set it too big. Here is what I have and it is not working.
$.messager.show({ // show error message
title: 'Error',
msg: result.msg,
style:{
overflow:'scroll'
}
});
Please help if somebody has any way to do this or trick of doing this. Thank you.
You could try Dialog intead of Messager. I believe the following code produces the result you want:
var div = document.createElement('div');
div.innerHTML = result.msg;
$(div).dialog({
title: 'Error',
width: 300,
height: 'auto',
modal: true,
resizable: true
});

Sorting Before Event in jQuery jqGrid

I am working on jQuery's jqGrid and I am not using paging in my jqGrid. My code fetch more than 1000 rows data and all data shows in jqGrid without paging and use loadonce: true property. Now my requirement is that when user sort any column it takes 3-5 seconds to sorting data so i want to show at that time loading image. I wrote
beforeRequest: function () { jQuery(".imgLoading").show(0);},
gridComplete: function () {jQuery(".imgLoading").hide(0);}
these 2 events and it works fine when data comes with server and manipulating with server.
But I want to sorting on client side by using loadonce: true and want to show loading image also but I don't know on which event I will write down image show hide code.
Please tell me the name of BeforeSortEvent and AfterSortEvent of jqGrid.
I checked on this URL : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events but didn't find right event.
Please help me out.....
Try:
onSortCol: function(index, iCol, sortorder) {
jQuery(".imgLoading").show(0);
},
gridComplete: function() {
jQuery(".imgLoading").hide(0);
}
EDIT
Since you said the alert() fires off, I'm thinking your problem is in the way you are showing/hiding those .imgLoading elements.
Try:
onSortCol: function(index, iCol, sortorder) {
alert("I'm about to SHOW the loading message");
$(".imgLoading").show();
},
gridComplete: function() {
alert("I'm about to HIDE the loading message");
$(".imgLoading").hide();
}
Be sure those two alert()'s fire off, and if they do, then something is still off with those .imgLoading elements you are trying to show/hide.

Best method of using jquery load and re-loading a script at the same time

I have a table that uses jquery's .load function to reload all of the data in the table after something is moved.
The issue is that when the table loads, the external javascript files on the page aren't being used in the table any longer.
To resolve this issue myself, i've started using jquery's .getScript. This works (sometimes), but it's not working well. I think the script is taking a long time to load whereas the table instantly loads, resulting in the scripts messing up sometimes.
I've also tried using a function after the getScript which still seems to not work properly.
This is what i'm using currently
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
serial = $('#sortable').sortable('serialize');
$.ajax({
url: "./menu-controller.php",
type: "post",
data: serial,
success: function() {
$.getScript("./menu-admin.js");
$("#sortable").load("./menu-manager.php #menu-table");
},
error: function(){
alert("A problem occurred when moving this menu item. Please try again or contact support.");
}
});
},
handle:'.move-item',
connectWith:'#menu-table',
placeholder: "highlight",
containment: "parent",
revert: true,
tolerance: "pointer",
items: 'tbody > *'
});
});
Specifically, we're looking at the "success" of the update of .sortable. Is there any better solutions to this?
My ultimate goal would be to have the script fully loaded before the table starts to load. And again, i've already tried using a function of getScript, this didn't seem to work.
I appreciate any advice, tips, or solutions provided.
Try using get() only with a callback as such:
$.get('http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js', function(response){
// Start table
});

How to get AlloyUI modal body to render properly when initialized as visible: false?

I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?
After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});
I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.

jQuery UI Dialog To Load HTML Title

I'm using jQuery UI Dialog for pop-ups that read from external pages. How do I get it to load the title from the external HTML instead of having the change it in the code every time? Because I want different titles as well.
Any suggestions please?
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: true,
closeOnEscape: true,
width: '900',
height: '900',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
adjustJQueryDialogOverlay();
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
What you seem to have are two questions. First, the simple one. How do you change the title?
The jQuery Dialog title comes from the title parameter. In your code, you have:
title: 'Bonus Features'
But if you were to change your function signature to accept a title parameter, you could pass the title along to the function and not have to worry about changing your code all the time.
function openDialog(url, title) {
$("<div class='popupDialog'>Loading...</div>").dialog({
...
title: title,
...
);
}
Now for the complex one: How do you get the title from your target page. I'm not sure there's an easy way for you to pull this off short of requesting the page through AJAX and parsing the result as XML/Text. Here's a link to do that if you're really interested.
http://forum.jquery.com/topic/getting-title-tag-from-html-page-using-ajax
But I really don't want to encourage that. I mean, it seems a little overboard to ask the client script to do all that. And you're not guaranteed that it may work from browser to browser. Rather it would be much easier just to associate whatever you're using to launch your dialogs with the page titles by hard-coding the titles.
Put this in 'open' event:
$(this).parent().find('.ui-dialog-title').html('Printed Card Designer');

Categories

Resources