how to retrieve the value of TinyMCE - javascript

I have problems in 'textarea', I want to take the value of "TinyMCE" how can I take the value of "TinyMCE" with jquery
<td>
<textarea id="body" name="body" rows="20" cols="50" class="mceEditor"><c:out value="${article.body}"/></textarea>
<form:errors path="body" cssClass="fieldError"/>
</td>
this code after firebug
<table id="body_editor_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 341px; height: 303px;">
<tbody id="">
<tr class="mceFirst">
<tr class="mceLast">
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="body_editor_ifr" frameborder="0" src="javascript:""" style="width: 100%; height: 257px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">
<br mce_bogus="1">
</body>
</html>
</iframe>
</td>
</tr>
</tbody>
</table>
how I can retrieve the value of TinyMCE,
karenasaya want to issue a message when tinymce is of no value, and will be ignored if no value

This will give you the contents of a tinymce editor
$('#your_editor_id').tinymce().getContent());

Related

Remove HTML code block from response using Javascript

I want to remove HTML code Block and CSS block from below code and get only XML code from above HTML code block. I want remove this HTML code block and want simple XML format code.
<FUSION-REPORT-FILE>
<REPORT-FILE>
<HEADER>
<DATE-OF-REQUEST>22-02-2021</DATE-OF-REQUEST>
<PREPARED-FOR>INS0000001</PREPARED-FOR>
<PREPARED-FOR-ID>ABCD</PREPARED-FOR-ID>
<DATE-OF-ISSUE>22-02-2021</DATE-OF-ISSUE>
<REPORT-ID>xxyzD8989</REPORT-ID>
</HEADER>
<REQUEST>
<NAME>ABX. XYZ</NAME>
<DOB-DATE>1991-01-01</DOB-DATE>
<PAN>PQR789895</PAN>
<PHONE>9819941920</PHONE>
<BRANCH-ID>59</BRANCH-ID>
</REQUEST>
</FUSION-REPORT-FILE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fusion Report</title>
<table>
<td width="150"></td>
<td align="left" width="300" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" class="reportHead">FUSION REPORT
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
I want a response as like below without HTML Code block; want remove this HTML code block and want simple XML format code as like below.
<FUSION-REPORT-FILE>
<REPORT-FILE>
<HEADER>
<DATE-OF-REQUEST>22-02-2021</DATE-OF-REQUEST>
<PREPARED-FOR>INS0000001</PREPARED-FOR>
<PREPARED-FOR-ID>ABCD</PREPARED-FOR-ID>
<DATE-OF-ISSUE>22-02-2021</DATE-OF-ISSUE>
<REPORT-ID>xxyzD8989</REPORT-ID>
</HEADER>
<REQUEST>
<NAME>ABX XYZ</NAME>
<DOB-DATE>1991-01-01</DOB-DATE>
<PAN>PQR789895</PAN>
<PHONE>9819941920</PHONE>
<BRANCH-ID>59</BRANCH-ID>
</REQUEST>
</FUSION-REPORT-FILE>
if you konw the root tag of xml, you can use slice function in javascript to get part of the string.
var str = `<FUSION-REPORT-FILE>
<REPORT-FILE>
<HEADER>
<DATE-OF-REQUEST>22-02-2021</DATE-OF-REQUEST>
<PREPARED-FOR>INS0000001</PREPARED-FOR>
<PREPARED-FOR-ID>ABCD</PREPARED-FOR-ID>
<DATE-OF-ISSUE>22-02-2021</DATE-OF-ISSUE>
<REPORT-ID>xxyzD8989</REPORT-ID>
</HEADER>
<REQUEST>
<NAME>ABX. XYZ</NAME>
<DOB-DATE>1991-01-01</DOB-DATE>
<PAN>PQR789895</PAN>
<PHONE>9819941920</PHONE>
<BRANCH-ID>59</BRANCH-ID>
</REQUEST>
</FUSION-REPORT-FILE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fusion Report</title>
<table>
<td width="150"></td>
<td align="left" width="300" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left" class="reportHead">FUSION REPORT
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>`
var resultXml = str.slice(str.indexOf("<FUSION-REPORT-FILE>"),(str.indexOf("</FUSION-REPORT-FILE>")+21));
console.log(resultXml);

Onsubmit on a form not working the first time and behaving oddly on all subsequent tries

I currently have a problem with a "onsubmit" call on my form.
The goal is to use a iframe in an overlay to update another iframe behind that overlay.
Whenever I try to update the "background" iframe using a button ("onclick") and this code:
parent.document.getElementById('frame_login').src=parent.document.getElementById('frame_login').src;
It works everytime.
But if I try to do it on the form "onsubmit":
It does not work the first time (the "background" iframe is not updated) but it does work the second time, although, the refresh will give the result it was supposed to on the first time. Here is an example:
I open the overlay and I login, the overlay displays that I am logged in but the "background" iframe does not change.
I click logout on the overlay, the overlay displays that I am logged out, the "background" iframe shows that I am logged in.
I login again using the overlay, the overlay will say that I am logged in, but the "background" iframe will now say that I am logged out.
I am aware that the "onsubmit" code is not exactly executed the same way that an "onclick" is, but I was unable to find a solution thus far, is there any way to fix this behavior please? Perhaps a different approach?
Here is the code of the "background" iframe:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td><iframe src="user.php" width="100%" height="70px" frameborder="0" id="frame_login" name="frame_login"></iframe>
</td>
</tr>
</table>
Here is the code of the overlay iframe:
<?
include('config.php')
?>
<script>
function myFunction() {
parent.document.getElementById('frame_login').src=parent.document.getElementById('frame_login').src;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?
if($user->data['is_registered'])
{
//User is already logged in to phpBB
?>
<form method="post" action="phpBB_logout.php" onSubmit="return myFunction()"/>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0" style="height:25px;"/>
<tr>
<td align="center">Welcome</td>
<td align="center"><? echo $user->data['username'] ?></td>
<td align="center"><input type="submit" value="Logout"/></td>
</tr>
</table>
</form>
<?
}
else
{
?>
<form method="post" action="phpBB_login.php" onSubmit="return myFunction()"/>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="height:25px;">
<tr>
<td align="center">Username:
<input type="text" size="20" name="username" /></td>
<td align="center">Password:
<input type="password" size="20" name="password" /></td>
<td align="center"><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
<?
}
?>
<input type="button" size="30" name="button" onClick="myFunction()" value="Button"/>
</body>
</html>
Please note that "onclick" on the form does the same behavior as the "onsubmit" (I tried to set the "onclick" on the submit input on the form: <input type="submit" value="Submit" onClick="myFunction()"/>.
Thank you for your time and help, it's greatly appreciated.

JSS resize images on table HTML

i'm doing a webapplication for android and iOS
i'm resizing every object in my html file by Javascript
but there's a problem, the first table it's perfect
but when i copy it down the image of the second table doesn't resize, can you help me please?
this is the site
http://bestparty.altervista.org/IOS/IOS/eventi.php
this is .JS file
$(document).ready(function() {
$("body").css("height", ((($(window).height() * 100) / 100)));
$("#evntfoto").css("height", ((($(window).height() * 20) / 100)));
$("#evntfoto").css("width", ((($(window).width() * 40) / 100)));
document.ontouchstart = function(e) {
e.preventDefault();
};
});
and this is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="True" name="HandheldFriendly">
<meta content="on" http-equiv="cleartype">
<link href="css/stile.css" rel="stylesheet" type="text/css">
<meta content="width=320, initial-scale=0.7, user-scalable=no" name=
"viewport">
<script src="JS/jquery-1.11.1.js.js"></script><!--PER EVENTI-->
<script src="JS/func.js"></script><!--PER EVENTI-->
<title>BParty</title>
</head>
<body>
<div id="navigation">
<table width="100%">
<tr valign="middle">
<td align="center" valign="middle" width="25%"><</td>
<td align="center" valign="middle" width="50%">BPARTY</td>
<td align="center" width="25%">></td>
</tr>
</table>
</div>
<div id="evntprg">
EVENTI IN PROGRAMMA
</div>
<div id="container" style="overflow:scroll;">
<div style=
"width:90%; display:block; margin:0 auto; padding-top:10px; margin-top:10px; padding-left:10px; background-color:#FFF; padding-bottom:10px;">
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
<table width="100%">
<tr valign="middle">
<td align="center" id="evntfoto" style=
"background-image:url(IMG/fnky.jpg); background-position:center; background-size: cover;"
valign="middle"></td>
<td align="left" id="evnttxt" valign="top">
<b>Fnky carnival</b><br>
Sabato 21 Febbraio<br>
Nikita<br></td>
</tr>
</table>
</div>
</div>
</body>
</html>
You are using ID's. ID's in HTML are unique there only can be one.
Change id="eventfoto" to class="eventfoto" in your HTML. Then in jQuery change your selectors to be $(".evntfoto"). Some knowledge about HTML ID'S. The reason why you would use classes is because you can use more than one on the HTML page.
Change below td width as 80%.
Static Html code :
<td valign="middle" align="center" id="evntfoto" style="height: 119px; width: 80%; background-image: url(http://bestparty.altervista.org/IOS/IOS/IMG/fnky.jpg); background-size: cover; background-position: 50% 50%;">
</td>
Dynamic code using jquery :
$("#evntfoto").css("width","80%");

Change iFrame Source from separate iFrame with same parent?

Here's my full, latest code that doesn't work. Here's the main window HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body background="core_rec/web_res/cf2.jpg">
<center>
<table width="720" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="180"><img src="core_rec/logos/metaltop.png" /></td>
<td colspan="3"><img src="core_rec/web_res/title.png" align="bottom"/></td>
</tr>
<tr>
<td width="180"><img src="core_rec/logos/metalbottom.png" /></td>
<td width="70"><center><font id="menutext">Menu</font></center></td>
<td width="100"><center><font id="menutext">Info</font></center></td>
<td width="200"><center><font id="menutext">Products/Services</font></center></td>
<td width="170"><center><font id="menutext">Contact</font></center></td>
</tr>
</table>
<br /><br />
<table height="80%" width="720">
<tr>
<td width="140"><iframe src="iframes/menus/main.html" width="140" id="sidebar"></iframe></td>
<td width="540"><iframe src="iframes/bodies/main/main.html" width="540" name="bodyframe" id="bodyframe"></iframe></td>
</tr>
</table>
</center>
</html>
Here's the menus/main.html. It contains the button.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iFrame Main</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css" />
</script>
</head>
<body bgcolor="#000000">
<center>
<font id="sidebartext">
Main<br /><br />
Other Feeds<br /><br />
<button onclick="parent.document.getElementById('bodyframe').src='../bodies/main/othersites.html'">Other Sites</button><br /><br />
</font>
</center>
</body>
</html>
Whenever I push the button on the menu frame, the body frame doesn't change.
Make sure to run this on a simple server and test. Many browsers have restrictions when it comes to iframes.
Many files don't work properly if using file:// protocol, which will be used if you directly open the html file (i.e.: Not through a server).
You misspelled getElementById: last letter d should not be uppercase.
Instead of window.document.getElementById you could write document.getElementById, because window is the global object in browser javascript (at least, global per window/(i)frame)
http://jsfiddle.net/kNrVL/

HTML and JavaScript

Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.

Categories

Resources