I am dynamically creating an iframe and loading it with content from a cgi. The content is a table. I would like to apply jeditable to a div in that iframe content. Here is the html which renders as I need.
<td align=left width=5%><font style="font-family:lucida console; font-size: 10px;"><div class="edit" id="div_1">$databasename</div><div class="edit_area" id="div_2"></div>
and here is the js:
var iframe = document.createElement('IFRAME');
$(iframe).attr({
id: 'frameName',
frameBorder: 'none',
width: '100%',
height: '465',
scrolling: 'yes',
src: "./dump.cgi?system=" + sys
});
document.body.appendChild(iframe);
$(iframe).load(function() {
$(document).ready(function () {
$('.edit').editable('./adtu.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
$('.edit_area').editable('./adtu.php', {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '<img src="img/indicator.gif">',
tooltip : 'Click to edit...'
});
});
});
The jquery.js and jquery.jeditable.js ARE NOT coded in the cgi. I'm hoping to avoid that overhead, but I will try if advised.
So when the page loads I click on the "databasename" in the table and I get nothing. I have had the jeditable code in numerous places. This code is my latest attempt, my thinking being that the iframe was not ready for jeditable to find the div class when coded outside the load() function.
I would lose the cgi and frame altogether but the cgi has other submit functions and the iframe container is how I contain the page refresh.
Thank you,
Mike
Related
I have a login screen which has an ExtJs form panel with two button Login and Reset.
Now, I'm trying to add another button below the lofin panel for a new user sign up.
But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!
I have these in my login.jsp file:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my app.js file:
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Member Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons: [{
text: 'New User Register',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: false,
url: 'registration.jsp'
})
}
},{
text: 'Login',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: true,
url: 'index.jsp'
})
}
},{
text: 'Reset',
scale: 'medium',
handler: function(){
login.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:325,
height:175,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work.
I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.
Can anybody help me out to create a separate button and my desired position?
Any kind of help is appreciated. Thanks.
I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.
NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.
Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;
Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window
Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code
Ext.getCmp('loginWindow').add(
{
xtype:button,
text:'Yay!'
}
);
If you need more code specific help, feel free to message me. I know your feel bro <3
i have an html page in which i sue TinyMCE editor in iframe and i have a button which is out side the iframe. my problem is taht iwant to get the value of editor on button click but when i click the button i found nothing please help here is my code
Iframe Code:
<iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 900px;
width: 1000px" scrolling="auto"></iframe>
UploadTemplates.aspx Code:
<div>
<p>
<textarea id="TemplateEditor" cols="50" rows="50" runat="server">
</textarea>
</p>
</div>
Jquery Code:
$(function () {
uploader = $("#TempateFileUploader");
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
width: "800",
height: "640"
// setup: function (ed) {
// ed.onClick.add(function (ed, e) {
// alert('Editor was clicked: ' + e.target.nodeName);
// });
// }
});
$("#Button1").click(function () {
alert(tinymce().get("TemplateEditor").getCOntent());
});
});
on the click of Button1 hsing Jquery i found nothing of TinyMCE althoug i found the object of tinyMCE but not able to get value please help how can i get the value of timyMCE out side the iframe on button click using jquery
The solution to your problem might be to use getContent() instead of getCOntent() .
Using getCOntent() you should get javascript errors!!
Simplemodal works perfectly but I dont know how to automatically close the Iframe after the form is submitted.
I have tried to get the event outside the modal options using js, but
if I close the modal window on the submit event, then the form is not submitted...
I have also added the class simplemodal-close to the input button, but it doest work in the form??
Any suggestions??
Here is my code
//Modal Window
modal.click(function(e){
e.preventDefault();
$.modal('<iframe src="' + this.href + '" height="480" width="525" style="border:0" >',{
containerCss:{
backgroundColor:"#fff"
},
overlayClose:true,
onShow: function (dialog) {
$("input",dialog.data).click(function (e) {
e.preventDefault();
alert('Here'); //Doesnt execute
$.modal.close();
parent.$.modal.close();
alert('Here');
});
}
});
Ok, I just did it.. I didnt use iframe because after parent.$.modal.close().. The js included in that iframe didnt execute anymore..
So I just did it this way..
//Modal Window
modal.click(function(e){
e.preventDefault();
$.get(this.href,function(data){
var resp = $('<div></div>').append(data); // wrap response
$(resp).modal({
overlayClose:true,
minHeight:450,
minWidth: 500,
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff"
},
onShow: function(dialog){
autocomplete();
}
});
});
});
If I use a div instead that an iframe,, when I submit, the modal closes otherwise it stays open....
It was easy, but I got confused..
I am updating one of my sites from asp.net with jQuery UI to use master pages.
Here is a snippet of my original code, which works w/out master pages, but not with:
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack('btnCancel', ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
However, I see what is going on, with the master page chaging the names of the functions, and this code below fixes it for this instance.
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack('ctl00$ContentPlaceHolder$btnCancel', ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
Notice I have put the 'ctl00$ContentPlaceHolder$' prefix on the btnCancel so that the appropriate callback function is fixed.
From other threads I have read on stackoverflow, there is a better solution than patching up the code one place at a time as I have done above, but haven't quite got it right yet.
What is the general-purpose way to get jQuery UI postback functions to find the right callback function when you are using master pages like in my example above?
A quick fix could be to do the following
$('#myCancelEventDialog').dialog({
autoOpen: false,
width: 500,
buttons: {
"Cancel This Event": function () { __doPostBack("'" + $('[id$=btnvalue]')[0].id + "'", ''); },
"Do Nothing": function () { $(this).dialog("close"); }
}
});
This uses the jQuery endswith selector since the master page now means your control id have prefixes but the ending is the same. This works as long as you dont have duplicate id's dotted around which is what the asp.net team aimed to stop by prefixing nested control id's.
The downside of this is that jQuery has to do more work to find the element as it cannot use the native getElementById.
Another fix would be to upgrade to asp.net 4.0 where you can turn of the prefixing of controls using the clientidmode
You will want to use the ClientID of the control you are after:
__doPostBack('<%= btnCancel.ClientID %>', '');
However, if you use this technique, you will have to enclose your script block inside a div that is exposed to the ASP.Net runtime via the runat attribute.
<div runat="server">
<script type="text/javascript" language="javascript">
//Your Script Here
</script>
</div>
It might be helpful for developers;
http://deepasp.wordpress.com/2013/05/31/jquery-dialog-in-asp-net-master-page/
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?