I have created an iframe within Ext pop up window.
var htmlContent = '<iframe src="' + currentURL + '" width="100%" height="100%" frameborder="0"></iframe>',
win = new Ext.Window({
title: 'Information',
height:600,
width: 700,
html: htmlContent,
closable: true,
closeAction: 'hide',
style: 'windowstyle1',
cls: 'windowstyle1',
});
win.show();
The current URL is a asp.net aspx page.
Inside asp.net page I have asp:DropDown list.
<asp:DropDownList ID="ddl_ChkType" runat="server" CssClass="select" >
<asp:ListItem Text="drop1" Value="P"></asp:ListItem>
<asp:ListItem Text="drop2" Value="C"></asp:ListItem>
</asp:DropDownList>
I have to change the look and feel of the asp:dropdown list similar to Ext Js Combo box.
So in the aspx page I have added below code to tranform the dropdown to ext combo box but it's not working.
Ext.onReady(function(){
alert("hi");
var transformed = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
typeAhead: true,
transform: 'stateSelect',//don't know wht to specify here.
width: 135,
forceSelection: true
});
});
Only alert hi is working, nothing else. Could anyone help me with this?
I have also tried to modify the same using css for select class but it's not working.
You are creating the instance, and it sits somewhere in the object tree. But you want it to be rendered into the DOM tree. So you have to provide to your component a render target, e.g.
renderTo:Ext.getBody()
or, if you have a <div id="test"></div> you want it inside,
renderTo:Ext.get("test")
Example usage:
var transformed = Ext.create('Ext.form.field.ComboBox', {
renderTo:Ext.getBody()
Related
I did some searching and found a few people with the same issue but no actual answer.
I have a aspx page that is using SimpleModal. Inside this SimpleModal window, I have a TextBox control in textarea mode. I am using TinyMCE to transform that control into a RichTextBox.
When opening the modal for the first time, TinyMCE renders correct, however, if I close the SimpleModal window and then reopen it, its back to the basic TextArea control.
Here is my HTML for the control
<div id="bio-modal" style="display:none;">
<h3>Member Bio</h3>
<p>Introduce yourself to other members by writing a small member bio. When other members search for your, this bio will be shown.</p>
<p>
<asp:TextBox ID="txtBioContent" runat="server" TextMode="MultiLine" Width="395px" Height="300px" />
<br />
<asp:Button ID="btnSaveProfile" runat="server" Text="Save Profile" OnClick="btnSaveProfile_Click" />
</p>
</div>
There is my code used to open SimpleModal and initiate TinyMCE.
function showModal(which)
{
switch (which) {
case "bio":
$('#bio-modal').modal({
appendTo: 'form',
minWidth: 420,
minHeight: 460,
onShow: function () {
tinymce.init({ selector: '#<% = txtBioContent.ClientID %>' });
}
});
break;
case "pw":
$('#password-modal').modal({
appendTo: 'form',
minWidth: 200,
minHeight: 200
});
break;
case "email":
$('#email-modal').modal({
appendTo: 'form',
minWidth: 200,
minHeight: 200
});
break;
}
}
Any help in this area would be greatly appreciated!
Phillip
okay... so it seems you have to remove the TinyMCE control once the SimpleModal window is closed.
tinymce.remove();
This is fine if you have a button / link inside the popup to close the modal, but if you use the top right (canned) X button, it will not work. You will need to modify the SimpleModal source.
Thanks
OK, beating my head here. There seems to be lots of discussion about this, but I think I need it broken down in more detail. I would like to create a modal dialog with a tree view that allows some user interaction (check boxes), and then sets a field on the main page when the user clicks OK on the dialog. Not totally sure how to do this.
I can open the dialog with a button click no problem.
Markup:
<input id="buttonBuildSelect" runat="server" value="Build Select" type="submit" onserverclick="buttonBuildSelect_ServerClick" />
<div id="dialog" title="Expression Builder">
<p>
<asp:CheckBox ID="checkBoxOverwrite" runat="server" Text="Overwrite Existing Statement" /></p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Style="border: 1px solid black; overflow: auto;
height: 200px;">
<asp:Label ID="labelExpressionType" runat="server" Text=""></asp:Label>
<asp:TreeView ID="popupTreeView" runat="server" CssClass="treeview" ShowLines="true"
NodeStyle-CssClass="nodeStyle">
</asp:TreeView>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
Script:
$(document).ready(function () {
$(function () {
$("input:submit").button();
$("input:submit").click(function () {
$("#dialog").dialog("open");
return false;
});
});
$(function () {
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
width: 400,
height: 355,
resizable: false,
open: function () {
$(this).load("ExpressionBuilder.ascx");
},
options: { resizable: false },
buttons: { "OK": function () {
return false
},
Cancel: function () {
$(this).dialog("close")
}
}
}
)
});
});
But I cannot figure out how to 1) Click Button 2) Load Tree View From Database 3) Open Dialog
I have been working on two methods, but can't get either to work.
Method 1: Use ajax. But, what format do I return data in to bind to tree view and how to bind tree view from script.
Method 2: Put contents of dialog in separate user control, and then set the dialog to load the user control
Which method to pursue, and then need some assistance in getting that method working...
Thanks
Edit
I am building a query builder. The user chooses the entity from a drop down of available entities. The user clicks on a 'Build Select Statement' button. A Dialog appears with a tree view of the selected entity as parent node and child nodes of all fields in the entity. The user checks each field they want included in the select statement and clicks OK. The dialog closes and the 'Select Statement' text box is filled with the checked fields formatted as an Entity Data Source ESQL statement (it.[field1], it.[field2],etc...)
The code posted above opens the dialog, but there us no content (because I have not bound any data. I could hard code the data, but I want the user to be able to select which entity to use, so that means the data source of the tree view must be dynamic. Right now, I have not been able to get either method to work. No errors, but no dialog either (Button click does nothing).
The solution:
Build the dialog in code behind instead of in script. Then register script. So, I created a method:
''' <summary>
''' Open the jquery dialog
''' </summary>
''' <remarks></remarks>
Protected Sub OpenDialog()
Dim sb As New StringBuilder()
sb.Append("$(function() { ")
sb.Append(" $('#dialog').dialog({")
sb.Append(" modal: true,")
sb.Append(" width: 400,")
sb.Append(" height: 355,")
sb.Append(" show: 'blind',")
sb.Append(" hide: 'blind',")
sb.Append(" resizable: false,")
sb.Append(" buttons: { 'OK': function () {")
sb.Append(" return false;")
sb.Append(" },")
sb.Append(" cancel: function () {")
sb.Append(" $(this).dialog('close');")
sb.Append(" },")
sb.Append(" },")
sb.Append(" });")
sb.Append("});")
Page.ClientScript.RegisterStartupScript(GetType(Page), "myscript", sb.ToString(), True)
End Sub
I have a radio button inside a repeater as follow.
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<asp:RadioButton ID="rbtnCityName" runat="server" Text='<%# Bind("CityName") %>'
GroupName="Cities" />
</ItemTemplate>
</asp:Repeater>
Now problem is that how I can select a single radio button across multiples.
Even though I have given a groupname for radio button, I am not able to select any of them.
<script type="text/javascript" language="javascript">
function fnCheckUnCheck(objId)
{
var grd = document.getElementById("<%= rpt.ClientID %>");
var rdoArray = grd.getElementsByTagName("input");
for(i=0;i<=rdoArray.length-1;i++)
{
if(rdoArray[i].type == 'radio')
{
if(rdoArray[i].id != objId)
{
rdoArray[i].checked = false;
}
}
}
}
</script>
call this function on click of radiobutton
onclick="fnCheckUnCheck(this.id);"
the best solution for me was to simlpy create an html input control inside the repeater:
<input type="radio" name="yourGroup" value='<%# Eval("Value") %>'/>
got the solution from Radio button repeater problem solved
Just adding another solution in case someone else is still running into this in 2020...
It does use JavaScript.
If you inspect the radio button in the browser's dev tools you'll see that the RadioButton control is rendered as a span with an input inside it, just like other input controls such as CheckBox.
So this:
<asp:RadioButton runat="server" class="my-class" name="myGroup" value="myGroupOption1" />
Ends up as something like this:
<span name="myGroup" class="my-class">
<input id="(long generated id)" type="radio" name="(generated name)" value="myRadioButton">
</span>
Notice I didn't use ASP.NET's GroupName attribute. If you use that it will end up as a name attribute on the input, replaced with the generated value that is causing problems here. Just use the regular name attribute and it gets moved to the span.
Now, to fix the names in the browser you can do something like this. I used JQuery, but you could accomplish the same with pure JavaScript.
$(document).ready(function () {
$('.my-class').each(function () { // find all the spans
if ($(this).attr('name')) {
var groupName = $(this).attr('name'); // save the group name
$(this).children('input').each(function () { // find the input
$(this).attr('name', groupName); // fix the name attribute
});
}
});
});
Now the radio buttons are grouped properly.
So add a unique CSS class to your radio buttons and run that function on page load.
$('#SubmitAnswers').click(function () {
var names = [];
$('input[type="radio"]').each(function () {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
// alert('none checked in ' + name);
$('#Group'+ name).css("visibility", "visible");
}
else {
// If you need to use the result you can do so without
// another (costly) jQuery selector call:
var val = radio_buttons.val();
$('#Group' + name).css("visibility", "hidden");
}
}
});
I am trying to use confirmation dialog from jQuery UI.
I ran into this problem: how to trigger correctly the dialog and at the same time prevent trigger OnClick event specified at button until user click on Yes or No buttons at dialog?
In the example below are two ways how to popup confirmation. Lower one
works well. It's a classic JavaScript confirm dialog. When I try to use the jQuery UI dialog, it displays a dialog but allows it to run the event assigned at OnClick (here by using Command, but I suppose there is no difference. Hope I am not wrong.). The piece is taken from the ASP.NET Repeater control btw.
<li>
<asp:LinkButton ID="lbtnRenew" runat="server" Text="Renew" CssClass="ContextMenuItem"
CommandName="Renew" CommandArgument="<%# Container.ItemIndex %>"
OnClientClick="javascript: openModalDiv('dialogRenew');" /></li>
<li>
<asp:LinkButton ID="lbtnRemove" runat="server" Text="Remove" CssClass="ContextMenuItem"
CommandName="Remove" CommandArgument="<%# Container.ItemIndex %>"
OnClientClick="return confirm('Are you sure that you want to delete package?');" /></li>
This is the JavaScript I used so far:
function openModalDiv(divname) {
$('#' + divname).dialog({
bgiframe: true,
resizable: false,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Ok: function() {
$(this).dialog('close');return true;
},
Cancel: function() {
$(this).dialog('close');return false;
}
}
});
}
I am missing something, but don't know what. How do I solve this problem?
Thanks for any tip.
P.S. if you need add some additional information let me know.
You need to configure your modal dialog and then attach an onclick event handler in the document.ready handler. Also since you're using asp.net server controls, the id generated in the html will contain the naming container so you won't be able to select using #lbtnRenew selector mentioned above. The actual generated ID will be something like ctl00_...lbtnRenew. You can use alternate jquery selectors to get just the last part of the id or name as follows
$(function() {
// configure modal dialog
$('#dialogRenew').dialog({
bgiframe: true,
resizable: false,
modal: true,
autoOpen: false,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Ok: function() {
$(this).dialog('close');return true;
},
Cancel: function() {
$(this).dialog('close');return false;
}
}
});
// attach onclick event handler to open dialog
// $= selector for elements with attribute ending in text
$("submit[name$=lbtnRenew]").click(function(event) {
event.preventDefault();
$('#dialogRenew').dialog('open');
});
});
then you can remove the onclientclick inline javascript for your linkbutton
Remove the onClientClick and use jQuery to add the event, then you can use preventDefault...
$("#lbtnRenew").click(function(e) {
e.preventDefault(); //stops OnClick event
//jscript code here
});
I've created a jQuery UI Modal form, and I want that form to trigger a postback, but I'm having difficulty getting it to work.
I know there are quite a few articles based on using the SimpleModal plugin, and I have tried to adapt these and override the _doPostback function, but with no joy.
I think the problem is within the call to my __doPostBack function and what the parameters should be. Is that the case?
Here's my form
<form id="summaryForm" runat="server">
<div id="dialog" title="Quick Booking">
<p>Select user from list or enter name in box</p>
<fieldset>
<p><label>Is machine going out of the office?</label></p>
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />
<label for="dropLstUser">User:</label>
<asp:DropDownList ID="dropLstUser" runat="server" />
<input type="text" name="txtUser" id="txtUser" value="" class="text" />
<label for="txtStartDate">Start Date:</label>
<input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
<asp:HiddenField ID="assetField" runat="server" />
<%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
</fieldset>
</div>
//--------------------------------
Here is the JavaScript code:
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true,
buttons: {
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm",null);
}
}
});
});
function newDoPostBack(eventTarget, eventArgument)
{
alert("postingback");
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
</script>
After creating your dialog simply move the dialog back into your form. Example:
$("#divSaveAs").dialog({bgiframe:false,
autoOpen:false,
title:"Save As",
modal:true});
$("#divSaveAs").parent().appendTo($("form:first"));
This worked for me. Postback works find.
Be aware that there is an additional setting in jQuery UI v1.10. There is an appendTo setting that has been added, to address the ASP.NET workaround you're using to re-add the element to the form.
Try:
$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });
"AppendTo" option works to me.
$("#dialog").dialog({ ..., appendTo:"form" });
See: http://api.jqueryui.com/dialog/#option-appendTo
Many thanks for the post of csharpdev!
The following code did it for my page:
$("#photouploadbox").dialog({
autoOpen: false,
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); } },
draggable: false,
minWidth: 400 });
$("#photouploadbox").parent().appendTo($("form#profilform"));
One cheeky hack I have used is to create a normal .NET button along with textboxes, etc. within a div on the page, using jQuery get the HTML for that div, add it to the dialog, and then remove the HTML within the original div to avoid id duplication.
<div id="someDiv" style="display: none">
<p>A standard set of .net controls</p>
<asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
<input id="button1" type="button" value="Confirm" onclick="SomeEvent();" />
</div>
And the script:
var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true
});
I managed to solve the problem - probably not the best way but here's what I did.
The dialog wouldn't postback because jQuery UI takes the submit button out of the form and appends it to the bottom of the body tag, so when you try to postback the button it doesn't know what it's posting.
I got round this by modifying the jQuery UI code by changing this:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.body)
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
To this:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.forms[0])
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
It is not ideal to modify the source library, but it's better than nothing.
It works as expected when I used
$("#divDlg").dialog("destroy");
instead of
$("#divDlg").dialog("close").appendTo($("#Form1")).hide();
When we append to the Form and reopen the dialog, I had issues with layouts and z-index.
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm", null);
}}});});
The __doPostBack function takes the control which is causes the postback and an argument if required. Your JavaScript examples and your markup do not seem to match up. For example, where I have quoted above, you reference aspnetForm, change this to the ID of the form and try again.
Make sure that the ID you use for client script is the same as the client ID of the ASP.NET control at runtime. If a control resides in a INamingContainer then it will have a unique id based on its parent container, so YourControlID will become YourINaminContainerID_YourControlID.
Let us know the outcome.
I can get this working if I have one of each. One div, one script, and one link. In my case, the dialog is allowing the user to leave a "note" per database record. I don't have any buttons on my dialog, just the default upper right "x" to close the dialog.
But I'm trying to get this to work within a ColdFusion query loop.. Multiple records, with each having their own dialog button, associated script, and div. I'm changing the IDs dynamically so they're all unique (that is, appending a _XX where XX is primary key of record to all the ids).
When I expand to this model, having multiple dialogs, scripts, divs.. If I open each dialog to edit the corresponding "note" for that record, it will only save the LAST one. Should I be doing the .parent().appendTo on a button click vs. automatically? Somewhere it's getting confused.
If I don't open any dialog (don't make any changes via dialog) and run a dump on the form results, I see all dialog fields coming through on the post as expected.
When I look at the raw HTML produced... All the IDs are unique and are called appropriately. I was thinking I was getting collision on a conflicting name/id somewhere, but it all looks good on that front.
My script:
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 500,
resizable: false
});
$('.countable2').jqEasyCounter({
'maxChars': 2000,
});
// Dialog Link
$('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
$('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
return false;
});
//hover states on the static widgets
$('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
});
</script>
My div:
<div id="dialog#getALLFacilityEquipOrders.order_id#"
title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
style="display:none;">
<cfquery datasource="#a_dsn#" name="getOrderNotes">
select notebody
from QIP_EquipOrders_Notes
where fk_order_id = #getALLFacilityEquipOrders.order_id#
</cfquery>
<fieldset class="qip_menu">
<label><b>Enter/Edit Notes:</b></label>
<textarea class="countable2"
id="notebody_#getALLFacilityEquipOrders.order_id#"
name="notebody_#getALLFacilityEquipOrders.order_id#"
rows="10"
cols="75">#getOrderNotes.notebody#</textarea>
</fieldset>
</div>
My button:
<a href="##"
id="dialog_link#getALLFacilityEquipOrders.order_id#"
class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>
To remove the animation glitch while appending dialog to form, below is the strategy.
open: function (event, ui) {
var dg = $(this).parent();
setTimeout(function () { dg.appendTo("form"); }, 1000);
});