basically I am not a coder. I just trying to learn about Javascript and is it possible to make a toggle to a specific class?
for HTML
<section class="book_shelf">
<h2>Unfinished Section</h2>
<div id="incompleteBookshelfList" class="book_list">
<article class="book_item">
<h3>Book Title</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<article class="book_item">
<h3>Book Title2</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<article class="book_item">
<h3>Book Title 3</h3>
<p>Penulis: John Doe</p>
<p>Tahun: 2002</p>
<div class="action">
<button class="green">Finished</button>
<button class="green">Edit</button>
<button class="red">Delete</button>
</div>
<section class="input_section edit_section">
<form id="editBook">
<div class="input">
<input id="editTitle" required="">
<input id="editAuthor" required="">
<input id="editYear" required="">
</div>
<div class="action">
<button class="black">Cancel</button>
<button class="grey">Save</button></div> </form>
</section>
</article>
<br>
</div>
</section>
for CSS
.edit_section {
margin-top: 20px;
display: none;
}
.edit_section.active {
display: block;
}
so my objective is when I click the edit button, the class edit_section has an active class, but the other edit_section classes from another article tag still collapsed. Is that possible without ID tag? I need to do it with pure JavaScript, Thanks guys.
Related
I need help with a code. Apparently, it seems like a simple problem. I want to make a script so that when the user clicks the button, it shows the accordion. I was even able to write something that worked, but I wanted to open an accordion for each card separately. I think it's the "this" tag, but the problem is that ".find" doesn't find the accordion because it's not in the same group as the button.
See my code, you will understand better.
$('#fuelAccordion').click(function() {
$(this).find('.cardAccordion').slideToggle('show');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion"></i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>
You need to use parents because this not find .cardAccordion inside #fuelAccordion
$('#fuelAccordion').click(function () {
$(this).parents('.fuelCard').find('.cardAccordion').slideToggle('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card fuelCard">
<div class="flex">
<div class="col">
<div class="flex">
<div>
<i class="fas fa-angle-down pointer" id="fuelAccordion">Test</i>
</div>
</div>
</div>
</div>
<div class="cardAccordion">
<div class="flex">
<div class="inputGrid">
<div>
<label for="placa">Litros</label>
<select class="form-control">
<option value="5">5 Lts</option>
</select>
</div>
<div>
<label for="placa">Valor total</label>
<input type="text" class="form-control" value="R$38,46" disabled />
</div>
</div>
<button class="btn btn-primary">Adicionar</button>
</div>
</div>
</div>
I have just learnt Google Apps Script a week to build a small online survey for my work.
Everything work fine, until I added 1 more question about taking Photo in the Index. Before that, it worked OK with 1 element taking Photo, but when I added 1 more element than an "Uncaught" error appear. I have tried to find this issue but it seems my English is not good enough to "google" right search key and didn't find any same error.
Please see my Index HTML code below: The error occurs when I added element with id "ds_q_Q06"
<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="Expires" content="0" />
<meta name="msapplication-TileColor" content="#0072C6" />
<title>GAS Question Templates</title>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<?!= include('CSS'); ?>
<?!= include('JS'); ?>
<?!= include('Json_data'); ?>
<?!= include('Routing'); ?>
</head>
<body>
<form class="form-survey test" id="mainForm">
<div class="survey-info" style="display:none;">
<input type="text" name="respID" id="respId" class="respId" ></input>
<input type="text" name="currentPage" id="currentPage" class="currentPage" ></input>
<input type="text" name="routing" id="routing" class="routing" ></input>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q01_1" id="ds_q_Q01_1">
<div class="q-question">
1. Điểm bán:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Điểm bán mở cửa - Khảo sát TC">Điểm bán mở cửa - Khảo sát TC</option>
<option value="Điểm bán không tìm thấy">Điểm bán không tìm thấy</option>
<option value="Điểm bán thay đổi KD">Điểm bán thay đổi KD</option>
<option value="Điểm bán đóng cửa">Điểm bán đóng cửa</option>
<option value="Điểm bán mở cửa - Từ chối hợp tác">Điểm bán mở cửa - Từ chối hợp tác</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsImage ds-question" name="ds_q_Q01_2" id="ds_q_Q01_2">
<div class="q-question">
Chụp hình
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" name="file" id="Q02_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question" name="ds_q_Q02" id="ds_q_Q02">
<div class="q-question">
2. Ghi chú
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<textarea type="text" name="answer" class="answer" ></textarea>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q03_1" id="ds_q_Q03_1">
<div class="q-question">
3. Tên điểm bán / Biển hiệu:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai - Cập nhật tên điểm bán mới</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q03_2" id="ds_q_Q03_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập tên điểm bán..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q04_1" id="ds_q_Q04_1">
<div class="q-question">
4. Địa chỉ:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q04_2" id="ds_q_Q04_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập địa chỉ..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSingle ds-question" name="ds_q_Q05" id="ds_q_Q05">
<div class="q-question">
5. Single Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<ul>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C1" class="dsSingleChoice"></input>
<label for="Q01_C1" class="answerLabel">Câu 2</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C2" class="dsSingleChoice"></input>
<label for="Q01_C2" class="answerLabel">Câu 3</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C3" class="dsSingleChoice"></input>
<label for="Q01_C3" class="answerLabel">Câu 4</label>
</li>
</ul>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
**<div class="main-content">
<div class="dsImage ds-question" name="ds_q_Q06" id="ds_q_Q06">
<div class="q-question">
6. Take Photo
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" id="Q06_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>**
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q07" id="ds_q_Q07">
<div class="q-question">
7. Drop Down Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>------</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsText ds-question" name="ds_q_Q08" id="ds_q_Q08">
<div class="q-question">
8. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSearch ds-question" name="ds_q_Q09" id="ds_q_Q09">
<div class="q-question">
9. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="ds-navigator">
<table>
<tbody>
<tr>
<td class="left"><div class="button dsPrev">Previous Page</div></td>
<td class="right"><div class="button dsNext">Next Page</div></td>
</tr>
</tbody>
</table>
</div>
<div class="survey-done hidden"><div class="dsEndMessage">Thank you for submitting!</div></div>
<div class="survey-loading hidden">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
</form>
</body>
</html>
Here is my app script that input data when click on submit button
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFiles(imageFile) {
//var folderId = getFolderID("App_Img");
var blob = Utilities.newBlob(imageFile.bytes, imageFile.mimeType, imageFile.filename);
var file = DriveApp.getFolderById("ID_FOLDER");
try {
var child = file.getFoldersByName(imageFile.folderName).next();
}
catch(e){
var child = file.createFolder(imageFile.folderName);
}
child.createFile(blob);
return {fileURL:file.getUrl(),fileDir:imageFile.fileDir};
}
function getFolderID(folderName)
{
var folders = DriveApp.getFolders();
while (folders.hasNext()) {
var folder = folders.next();
if(folder.getName() == folderName)
{
return folder.getId();
}
}
}
**
function inputData(formSurvey){
var url = "URL_GOOGLE_SHEETS";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Sheet1");
Logger.log(ws.getName());
console.log(ws.getName());
var data = [];
for (var i = 0; i<formSurvey.answer.length; i++){
data.push(formSurvey.answer[i]);
}
Logger.log(data.join(";"));
console.log(data.join(";"));
//ws.appendRow(data);
}
**
Here is my JS when click Submit button (last page)
function endSurvey(){
$(".survey-loading").show(0).delay(5000).hide(0);
google.script.run.withSuccessHandler(submitSuccess).inputData($("#mainForm")[0]);
}
function submitSuccess(){
$(".survey-done").toggleClass("hidden",false);
}
The error is quite weird , without any more information.
Please help me on this.
I've faced a similar situation with an "uncaught" console error after running some specific server side function. After a day of searching where the problem is, in my case It was caused by running the google app script from one account while logged in chrome to another one.
Once I changed and opened the app from the same account as logged in to Chrome, the problem disappeared.
I have an HTML look like this
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
I want to hide the next button of last fieldset of every modal dialog appears. Anyone, please suggest me. I am new to jquery and haven't done this kind of thing before. I code to learn and sometimes I fall in problem.
Try this
simple way In CSS code
button {
visibility: hidden
}
to hide btn in last element use "last-child" selector
.modalDialog:last-child .btn.btn-next {
display: none;
}
see fiddle
Rahul css answer is correct but if you gonna use jquery here is the code
$(".modalDialog button:last-child").hide();
The :last-child selector matches every element that is the last child of its parent, so you can select the last form element and hide it using display:none.
You can read more about :last-child here.
Notes: you are using duplicate id (id="outerr") in your HTML, which could make you markup invalid and create some issues, please consider correcting this issue in your real app.
.modalDialog:last-child form {
display: none;
}
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="" class="modalDialog">
<div>
<form role="form" class="registration-form" >
<fieldset>
<div id="outerr">
<div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
</div>
</fieldset>
</form>
</div>
this should be.
fieldset:last-child .btn.btn-next {
display: none;
}
this is the code which solved my problem.
I want to use a gmap in a modal. I write this code:
<div class="tab-pane fade" id="third">
<div class="row col-md-10 col-md-offset-1">
<label for="Editaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label>
<div class="span11">
<div style="top: 10px; left: 25px; width:210px; height:220px; float: left" id="EditMap">
<label>tttttttttttttttttt</label>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-4">
<button id="Editbutton_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
</div>
<div class="col-md-8">
<input type="text" id="Editaddress_with_google" name="Editaddress_with_google" placeholder="آدرس" class="form-control" />
</div>
</div>
<input type="text" hidden id="EditlatGoogleMap">
<input type="text" hidden id="EditlngGoogleMap">
<br>
</div>
</div>
but when i see the web, don't show any div for map. in other hand, Width and hiegth af EditMap div was 0. same bellow image.
How must i do?
May be you need to remove hidden from your map element and also their is duplicate id for element.
Chek this:
http://www.bootply.com/106707
Is there a max length on alert()?
If so is there a way to overcome it...different tool with larger max length?
Here is massive outptut from alert...note truncated at the end. The truncated content renders in the browser so I know it is there.
|<!--p|2--><!--FRAMEWORK
-->
<div id="Ba">
<div id="Ba1">
<!--ACCOUNT
--->
<div id="account">
<img id="picture" class="b" src="foo/images/generic_small.jpg" alt="">
</img>
<div id="wrap_menu_new">
<p id="top_new">
Test Account </p>
<div id="wrap_drop_down_new">
<p id="signout_button" class="drop_down_new">Sign Out
</p>
<p id="settings_button" class="drop_down_new">Settings
</p>
</div>
</div>
</div>
<!--FRAMEWORK
--->
</div>
</div>
<div id="Bb">
<div id="Bb1">
<!--BOOKMARKS
--->
<div id="bookmark_hold">
<form id="bookmark" method="post" name="bookmark">
<div id="bookmark_url_wrap">
<input id="bookmark_input_url" name="url" type="text" maxlength="2048" class="bookmark">
<p id="bookmark_label_url">Url
</p>
</input>
</div>
<div id="bookmark_title_wrap">
<input id="bookmark_input_title" name="title" type="text" maxlength="32" class="bookmark">
<p id="bookmark_label_title">Title
</p>
</input>
</div>
<div id="bookmark_tag_wrap">
<input id="bookmark_input_tag" name="tag" type="text" maxlength="8" class="bookmark">
<p id="bookmark_label_tag">Tag
</p>
</input>
</div>
<input type="hidden" name="domain" value="not_domain">
</input>
<input type="hidden" name="favicon" value="not_favicon">
</input>
<p id="bookmark_flip_button">Delete
</p>
<p id="bookmark_add_button">Add
</p>
<div id="bookmark_response" class="response">
</div>
</form>
<div id="tag_bookmark_fill">
<div id="tag_fill">
<!--TAG FILL
-->
</div>
<div id="space">
</div>
<div id="bookmark_fill">
<!--BOOKMARK FILL
-->
</div>
</div>
</div>
<!--TWEETS
-->
<div id="tweet_hold">
<form id="tweet" method="post" name="tweet">
<div id="tweet_input_wrap">
<input id="tweet_input" name="tweet" type="text" maxlength="40">
<p id="tweet_label">Comment
</p>
</input>
</div>
<p id="tweet_button" href="javascript:void(0)">Share
</p>
<div id="tweet_response" class="response">
</div>
<div id="tweet_fill">
<!--TWEET FILL
-->
</div>
</form>
</div>
<!--SETTINGS
-->
<form id="privacy">
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<p class="privacy_title">Normal</p>
<p class="privacy_content">Your bookmarks are posted to the feed.</p>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
<p class="privacy_title">Private</p>
<p class="privacy_content">Your bookmarks are not posted to the feed.</p>
<!--
<input type="radio" id="radio3" name="rdo">
<label for="radio3"></label>
<p class="privacy_title">Secret</p>
<p class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</p>
-->
<p id="save_button" class="wordpress">Save
</p>
<p id="cancel_button" class="wordpress">Cancel
</p>
</form>
<!--FRAMEWORK
--->
</div>
</div>
<!--DYNAMIC CONTENT
-->
<script type='text/javascript'>new Arc.Shared().set( 'load_on', 1 );</script><div id='bookmark_data'>[{"id":"1","0":"1","title":"ebay ","1":"ebay ","url":"http:\/\/ebay.com","2":"http:\/\/ebay.com","domain":"ebay.com","3":"ebay.com","tag":"buy","4":"buy","favicon":"http:\/\/www.ebay.com\/favicon.ico","5":"http:\/\/www.ebay.com\/favicon.ico"},{"id":"1","0":"1","title":"gilt","1":"gilt","url":"http:\/\/www.gilt.com\/","2":"http:\/\/www.gilt.com\/","domain":"gilt.com","3":"gilt.com","tag":"buy","4":"buy","favicon":"http:\/\/assets2.giltcdn.com\/assets\/201205231954-27b1d5fa2c\/images\/default\/util\/favicon.ico","5":"http:\/\/assets2.giltcdn.com\/assets\/201205231954-27b1d5fa2c\/images\/default\/util\/favicon.ico"},....
Yes, browsers do limit the maximum length of alert messages.
Why you you ever want to alert() such a huge blob of text anyway? For debugging you should use console.log() which works in all modern browsers or create a div/textarea and show the data in there.