Here is the dialog html:
<div id="login-prompt">
Please #Html.ActionLink("Log on", "LogOn", "Account", new { returnUrl = Request.RawUrl }, null)
or #Html.ActionLink("Register", "Register", "Account", new { returnUrl = Request.RawUrl }, null)
</div>
Here is the dialog initialization javascript:
$("#login-prompt").dialog({ autoOpen: false, width: 300, height: 100, modal: false });
And the function that opens the dialog:
function ShowLoginPrompt(context, leftOffset, topOffset) {
var position = context.position();
var loginPrompt = $("#login-prompt");
loginPrompt.dialog("option", "position", [position.left + leftOffset, position.top + topOffset]);
loginPrompt.dialog("open");
}
Regardless of the height I set during initialization, it is always auto in the resulting html.
I didn't track down the exact problem causing this but was able to correct it by stripping all custom styles and just using the default jquery dialog css file.
Related
I have custom control inside TabPanel: {items: Panel: {items: customcontrol}}.
Inside control, i create dynamically in onRender handler image control with picture. Picture can be different sizes. How me refresh current container, that it took the right size? It happen automatically, then i switch to another tab and back. doLayout() not working, function updateLayout() violates the layout of the other tabs.
creating image:
onRender: function () {
var me = this;
me.callParent(arguments);
this.el.update(this.imageFieldTpl.apply(this));
var imageWrap = Ext.query('.image-ct', this.el.dom)[0];
this['image'] = Ext.create(Ext.Img, {
name: 'image',
height: "100%",
width: "100%",
renderTo: imageWrap
});
if (this.value != null) {
this.fireEvent('imageChange', this.value);
}
}
I have a javascript function, which is opening a jquery dialog:
function new_popup() {
var editor = "victorio"; //want to give
var sex = "male"; //want to give
$("#new-dialog-form").dialog({
autoOpen: false,
height: 700,
width: 800,
modal: true,
title: "New Dialog",
buttons: { //.....buttons whatever.....
},
close: function() {
}
});
$("#new-dialog-form").load('<%=newPopupUrl%>').dialog('open');
}
I want to give the editor and the sex values for the new dialog, which opens the "new_frame.jsp", which has two labels with the IDs:
<label class="form_label" id="editor"/>
<label class="form_label" id="sex"/>
So when we open the new dialog, these 2 labels will be auto completed with the given values.
How can I give the values for the dialog, and how and where can I get and set the given values in the new jsp? Thank you for your helping!
I am trying to create a small window with a text area inside every time the click of a button happens. However when I click the button more than once, a new window is created but only the first window contains the text area. Can anyone help?
var noteNumber = 0;
$("#createNoteButton").click(function () {
var noteWindowDivId = "noteWindow" + noteNumber;
$("<div id=noteWindowDivId />").appendTo(document.body).kendoWindow ({
draggable: true, resizable: true, width: "480px",
height: "100px", title: "Note",
scrollable: false,
modal: false, actions: ["Close"]
});
$("#noteWindowDivId").data("kendoWindow").content("<textarea id=noteNumber style='width: 100%; height: 100%'> </textarea>");
noteNumber++;
}
);
Below is my code. When it opens the modal, it IS resizeable even though it's set to false. This is not expected. All other parameters work as expected (height, width, position, draggable, modal).
//MODAL IFRAME POPUP FOR EDITS/adds
$("#modalDiv").dialog({
modal: true,
autoOpen: false,
height: '400',
width: '400',
position: ['150','200'],
draggable: true,
resizeable: false,
title: ''
});
//catch a click on an item with the class "add" open modal div.
$('.add').live('click', function () {
var thing = $(this).attr('add')
url = 'add/' + thing + '.aspx?appid=' + $('.lblAppID').html();
$('#modalIFrame').attr('src', url);
$('#modalDiv').dialog('open');
return false;
});
However, if I call the following code from within the modal iframe, it makes it unresizeable (as expected).
window.parent.$("#modalDiv").dialog("option", "resizable", false);
This works, but preferably I'd like to know what I'm missing... I'm sure it's something stupid. Help?
It's resizable, not resizeable.
You're spelling the word two different ways :-)
dial and place are the two divisions which exist in the html code that calls the function.
I am able to open up both of them but not able to embed the graph using plot in the 'place' division after it is opening up via the 'Draw' button.
It works fine only when I open both the boxes initially.
function abcd (dial,place,xrange){
var dial = conv(dial)
var xr = document.getElementById("xrange");
var yr = document.getElementById("yrange");
var gtype = document.getElementById("pattern");
xr.value = ""; yr.value = ""; gtype.value = "Line" ;
var place = conv(place);
$(dial).dialog("close");
$(dial).dialog("open");
$(place).dialog({
autoOpen: false,
show: 'Explode',
height: 500,
width: 450,
modal: true})
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$((place)).dialog("open");
$(function () {
//manipulate input values to plot data
$.plot(document.getElementById(plac2), [ {data:d1roe,label:"abc"},
{data:d1roa, label:"xyz"} ], {
series: {stack: 0},
xaxis: {ticks: ticks},
ticks: ticks
});
});
//function open(xyz) {$(xyz).dialog("open");}
function conv (myid) {
return ( '#' + myid );
}
I figured out a quick fix for it.
The problem was that the dialog will open but will not be manipulated by flot because it was unable to extract the width and height of the dialog box. So before opening the dialog we can fix the height and width.
Specifying height in the style sheet of html did not work in my case.
$(dial).dialog({
autoOpen: false,
show: 'Explode',
height: 300,
width: 350,
modal: false,
buttons :
{ "Draw" : function() {
$(place).width(500); // can take this as an input as well
$(place).height(500);
$(place).dialog("open");
//ploting code
}})}
The key thing you need for flot to work is for your plac2 div to have a width and height, and be visible (i.e. drawn to the screen). So before you plot, try alerting whether your div has width and height:
var placeholder = document.getElementById(plac2);
alert($(placeholder).width()+','+$(placeholder).height());
//plotting code here
Let us know what happens.