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
});
Related
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/
Hey guys I have the following code:
function run(){
var url = '/pcg/popups/grabnotes.php';
var tag = $("#dialog-container");
var promise1 = showUrlInDialog(url);
var promise2 = sendUserfNotes();
$.when(promise1, promise2).done(function(data1, data2) {
tag.html(data1).dialog({
width: '100%',
modal: true
}).dialog('open');
$('#notes_msg').text(data2[0].the_notes)
});
}
This right here works great...it will wait for the two functions to run after that than it will open up a window in JQuery UI - dialog the tag.html.... Than it will display the notes that are returned in the text-area field in that file. This works great accept I keep getting success to display on the top left corner of my screen and I can't figure out how to get rid of it. If you could give me a hand I would appreciate it.
David
UPDATE:
I figured out what is causing it:
tag.html(data1).dialog({
width: '100%',
modal: true
}).dialog('open');
I don't know why though?
When this opens the dialog window up, success the word is on the left hand side of screen.
Hey guys I figured it out:
tag.html(data1[0]).dialog({
width: '100%',
modal: true
}).dialog('open');
I just had to add the [0] to data1
I am new in extjs and I am trying to create a customized alert using Extjs4 but I haven't been successful doing so, the main idea is basically to add the company logo on the left side of the window, and the icon of the type of message and the message text aligned to the right side of the window. I tried different approaches but is not working, I tried to create a new window and adding panels, I tried to customize a regular Ext.Msg.show adding items to its properties but they are never displayed, can anybody give me an idea how to get this done or what approach is the best? I've been 2 days trying but I can't make it work and I am running out of ideas. I am attaching the code I did now, many thanks!!:
Ext.Msg.show({
title:title,
msg: msg,
height: 200,
width: 300,
layout: 'fit',
items: {
xtype: 'panel',
html: '<img src="http://localhost:8080/anylogo/companylogo.gif" />'
},
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING
});
It's a matter of style. You can assign a CSS class to the message box via cls config:
Ext.Msg.show({
cls: 'alignright-with-logo'
});
We have a image that calls a script function that should show a jquery modal dialog popup. The dialog loads once with the data and then when we close it and try to click on the img again it does not load the data, sometimes the dialog will appear but be blank. If we take the link from the img tag and put it in a new browser it pulls the data fine so the link should be ok.
Below is the script in the head section of the page:
function ShowReportDialog(reporturl){
jQuery("#reportdialog").dialog({
title: 'Hello World',
modal: true,
width: 915,
height: 670}).show();
jQuery("#reportdialog").load(reporturl);
}
Image Tag that calls the script:
<img style="border:0;" onclick="ShowReportDialog('Service/REPORT?ARCHIVE=102127');" src="/Images/rerun.png"
Anyone see anything I missed or a better way?
Thanks
jQuery is probably caching your AJAX request. Check out this other thread for ways to prevent this from happening.
Edit: I'm by no means a jQuery expert, but I believe you should only show your dialog after the AJAX request has been responded. So I'm guessing something like this:
function ShowReportDialog(reporturl){
jQuery("#reportdialog").load(reporturl, function(){
jQuery("#reportdialog").dialog({
title: 'Hello World',
modal: true,
width: 915,
height: 670
}).show();
});
}
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');