Hi huys as you can see here I am having a dialog not found issue . I know this is part of jquery ui which i think i have loaded correctly but it still seems to not be working .
Error:
Uncaught TypeError: $(...).dialog is not a function(anonymous function)
# fablinker.php:524jQuery.event.handle
# jq.js:1936elemData.handle.eventHandle
# jq.js:1599
And here is my code guys , and help would be great been stuck on this with days now. Thanks
<?php
// //identify which user is logged in so the right profile info can be pulled up from dbase
// session_start();
// $UserN = $_SESSION['UserN'];
// if(isset($_SESSION['UserN']))
// {
// //$CurrentUser = $_SESSION['UserID'];
// $UserN = $_SESSION['UserN'];
// }
// else
// {
// header("location:index.php");
// }
if (isset($_REQUEST["casestudyid"]))
{
$casestudyid = $_REQUEST["casestudyid"];
}
else
{
$casestudyid = "";
}
?>
<!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>Fab Linker</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
<!--[if IE 8.0000]>
<link rel="stylesheet" type="text/css" href="IE8.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/fab/main.css" />
<link rel="stylesheet" type="text/css" href="css/fab/style.css" />
<link rel="stylesheet" href="css/fab/jquery.tooltip.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/dolearnfinance-aab51d.webflow.css">
<link rel="stylesheet" type="text/css" href="css/fab/myFab.css" />
<link rel="stylesheet" href="js/fablinker/jquery/jquery-ui.min.css">
<script src="js/fablinker/jquery/external/jquery/jquery.js"></script>
<script src="js/fablinker/jquery/jquery-ui.min.js"></script>
<script src="js/fablinker/popup.js" type="text/javascript"></script>
<script src="js/fablinker/jq.js" type="text/javascript"></script>
<script src="js/fablinker/fab.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fablinker/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/fablinker/jquery.corner.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navscroll" data-collapse="medium" data-animation="default" data-duration="400" class="w-nav navbarone notfixed">
<div class="w-container"><h1 class="logo-text">do<span class="pinktext">Learn</span>Finance</h1>
<nav role="navigation" class="w-nav-menu w-clearfix nav-menu">HomeAboutContactsign in
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="w-section head-section">
<div class="w-container">
<h1 class="course-headings">Fablinker</h1>
<div class="breadcrums-div">
<a href="index.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">HOME</div>
</a>
<div class="breadcrum next">></div>
<a href="index.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">course</div>
</a>
<div class="breadcrum next">></div>
<a href="learn_home.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">Learn</div>
</a>
<div class="breadcrum next">></div>
<a href="fablinker.php" class="w-inline-block breadcrum">
<div class="breadcrum-text">Fablinker</div>
</a>
</div>
</div>
</div>
<div class="w-section main-section ">
<!--######################################################################################################-->
<div id="parent">
<div id="topDiv">
<!-- <div id="mainmenu">
<div id="btnNew" class="menuButton">New</div>
<div id="btnLoad" class="menuButton">Load</div>
<div id="btnSave" class="menuButton">Save</div>
<div id="btnDelete" class="menuButton">Delete</div>
<div id="btnTutor" class="menuButton">Tutor On</div>
<div id="btnHelp" class="menuButton">Glossary</div>
</div> -->
New LoadSaveDeleteTutorGlossary
</div>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Left Column -->
<div id="leftcolumn">
<div id="divInputs" class="exerciseColumn">
<div id="divInputs_SellingAndBuyingGoods"></div>
<div id="divInputs_OverheadExpenses"></div>
<div id="divInputs_Funding"></div>
<div id="divInputs_FixedAssets"></div>
</div>
</div>
<!-- End Left Column -->
<!-- Begin PnL Col -->
<div id="content">
<div id="hdg">
<h3 class ="fablinkerheading" >Profit/Loss Account</h3>
<div class="htmltooltip" id="htt23" style="width: 170px;">
<p class="tipText" >Is a financial statement which shows the net profit or loss of a business for a given accounting period.It is essentially a statement of the "income generating" performance of the business.</p>
</div>
<i class ="i-space" style="color:black;">(Projected)</i>
</div>
<div id="divOutputs_PNL" class="exerciseColumn">
<div id="divOutputs_Sales_PNL"></div>
<div id="divOutputs_CashFlow_PNL"></div>
</div>
</div>
<div id="content">
<div id="hdg">
<h3 style="color: black" >Balance Sheet</h3>
<div class="htmltooltip" id="htt23" style="width: 170px;">
<p class="tipText" >
Is a financial statement which shows the net profit or loss of a business for a given accounting period.
It is essentially a statement of the "income generating" performance of the business.</p>
</div>
<i style="color:black;">(Projected)</i>
</div>
<br/>
<div id="divOutputs_BS" class="exerciseColumn">
<div id="divOutputs_FixedAssets_BS"></div>
<div id="divOutputs_CurrentAssets_BS"></div>
<div id="divOutputs_CurrentLiabilities_BS"></div>
<div id="divOutputs_Assets_BS"></div>
<div id="divOutputs_RepresentedBy_BS"></div>
</div>
</div>
<!-- End Content Column -->
<!-- Begin Right Column ############################################################################################## -->
<!-- Begin PnL Col -->
<!-- End Content Column -->
<div id="rightcolumn">
<div id="hdg">
<h3 style="color: black;" >Operating Ratios</h3>
<div class="htmltooltip" id="htt43" style="width: 170px;" >
<p class="tipText">
The balance sheet is a statement of the financial position of a business at a given date.
It is normally based on historical costs and discloses the book value of the assets, liabilities, share capital and reserves.</p>
</div>
<i style="color: black;">(Projected)</i>
<div id="menu" style="border-style: 2px solid red; padding: 5px; margin-left: 19px; ;margin-top: -43px; background:#195e93; float:right; width:95px; height: 83px;" class="invisible">
<div style="padding: 3px; float: right;">
Home<br/>
About Us<br/>
Support<br/>
Log Out
</div>
</div>
</div>
<div id="divOutputs_RAT" class="exerciseColumn">
<div id="divOutputs_ProfitLossRatios_RAT"></div>
<div id="divOutputs_LiquidityRatios_RAT"></div>
<div id="divOutputs_WorkingCapitalRatios_RAT"></div>
<div id="divOutputs_GearingRatios_RAT"></div>
<div id="divOutputs_VolumeRatios_RAT"></div>
</div>
</div>
<!-- End Right Column -->
<br>
</div> <!-- end -->
</div> <!-- end of wrapper -->
</div>
<div id="dlgNew" class="fldialog">
<h3>New Case Study</h3>
Create a new case study.
<br/>
Name:<input type="text" id="newName"/><br/>
Description:<input type="text" id="newDescription"/><br/>
</div>
<div id="dlgLoad" class="fldialog">
Load a case study:
<select id="selCaseStudies">
</select>
</div>
<div id="dlgDelete" class="fldialog">
Delete a case study:
<select id="selCaseStudiesToDelete">
</select>
</div>
<div id="dlgSave" class="fldialog">
Save:<br/>
Name:<input type="text" id="saveName"/><br/>
Description:<input type="text" id="saveDescription"/><br/>
</div>
<!--End Parent Div -->
<script type="text/javascript" src="js/fablinker/BusinessLogic-min.js"></script>
<script type="text/javascript" src="js/fablinker/fablinkerObjects-min.js"></script>
<script type="text/javascript" src="js/fablinker/jquery.helpify.js"></script>
<?php echo("<script type='text/javascript'>var casestudyid = '$casestudyid';</script>");?>
<script type="text/javascript">
var currentCSName;
var currentCSDescription;
var currentCSID;
var bNotSaved;
$(document).ready(function(){
$('#wrapper').corner();
bSaved = true;
$('#dlgNew').hide();
$('#btnTutor').html('Tutor Off');
$('#btnTutor').addClass('menuButton_Selected');
initMapObjects();
// reset the figures
if (!casestudyid)
{
newCaseStudy();
}
else
{
loadCaseStudy(casestudyid);
}
//configureDependenciesForOutputs();
configureDependencyTree();
recalcAll();
$('#btnNew').click(function(evt){
if (confirm("New Casestudy"))
{
currentCSName = "";
$('#currentCSName').val("");
currentCSDescription = "";
$('#currentCSDescription').val("");
currentCSID = -1;
bSaved = true;
newCaseStudy();
recalcAll();
}
// don't call the home button handler
//evt.stopPropagation();
});
$('#btnRecalc').click(function(evt){
recalcAll();
//alert("recalc(Netassets_BS)");
//om["Netassets_BS"].evaluate();
});
$('#topDiv').click(function(evt){
if (evt.originalTarget == evt.currentTarget)
{
window.location.href="userhome.php";
}
});
$('#btnLoad').click(function(evt) {
// empty the list
$('#selCaseStudies').find('option').remove();
// populate the list of case studies
$.getJSON("dbs/gcsl.php", function(data){
$.each(data, function(key, value){
//alert(key + ":" + value);
$('#selCaseStudies').append("<option value='" + key + "'>" + value[1] + "-" + value[2] + "</option>");
});
});
// show the dialog
$('#dlgLoad').dialog({
buttons: {
"Ok" : function() {
$(this).dialog("close");
var csd = {};
csid = $('#selCaseStudies').val();
//csid = prompt("casestudyid", "1");
loadCaseStudy(csid);
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
// don't call the home button handler
evt.stopPropagation();
});
$('#btnDelete').click(function(evt) {
// empty the list
$('#selCaseStudiesToDelete').find('option').remove();
// populate the list of case studies
$.getJSON("dbs/gcsl.php", function(data){
$.each(data, function(key, value){
//alert(key + ":" + value);
$('#selCaseStudiesToDelete').append("<option value='" + key + "'>" + value[1] + "-" + value[2] + "</option>");
});
});
// show the dialog
$('#dlgDelete').dialog({
buttons: {
"Ok" : function() {
var csd = {};
csid = $('#selCaseStudiesToDelete').val();
if (confirm("Delete Casestudy")) {
deleteCaseStudy(csid);
//alert ("deleting");
$(this).dialog("close");
//$.getJSON("dbs/dcs.php?csid=" + csid, function(data){
//});
currentCSName = "";
$('#currentCSName').val("");
currentCSDescription = "";
$('#currentCSDescription').val("");
currentCSID = -1;
bSaved = true;
newCaseStudy();
recalcAll();
}
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
// don't call the home button handler
evt.stopPropagation();
});
$('#btnTutor').click(function(evt) {
if ($('#btnTutor').hasClass('menuButton_Selected'))
{
$('#btnTutor').html('Tutor On');
$('#btnTutor').removeClass('menuButton_Selected');
$('.imginfo').hide();
}
else
{
$('#btnTutor').html('Tutor Off');
$('#btnTutor').addClass('menuButton_Selected');
$('.imginfo').show();
}
// don't call the home button handler
evt.stopPropagation();
});
$('#btnTest').click(function() {
$("#txtSellingPrice").keyup(function(e)
{
alert("hello");
});
});
$('#btnEvaluate').click(function() {
for (var o in om)
{
//alert(om[o].inputDependencies);
om[o].evaluate();
}
});
$('#btnExpand').click(function () {
if ($('#exerciseHeader').height() == 100) {
$('#exerciseHeader').animate({
height:"25px"
}, 500);
}
else
{
$('#exerciseHeader').animate({
height:"100px"
}, 500);
}
});
$("#dlgHelp").helpify();
$('#btnHelp').click(function(evt){
showHelpForTopic("dlgHelp", 1);
});
$('#btnTest').click(function(evt) {
showHelpForFlid("dlgHelp", "CostOfSales_PNL");
});
$('.helplink').click(function(evt) {
alert('hello');
});
$('#btnSave').click(function(evt) {
var csd = {};
csid = currentCSID;
$('#saveName').val(currentCSName);
$('#saveDescription').val(currentCSDescription);
// show the save dialog
$('#dlgSave').dialog({
buttons: {
"Ok" : function() {
$(this).dialog("close");
saveName = $('#saveName').val();
saveDescription = $('#saveDescription').val();
if (saveName != currentCSName)
{
// save as
csid = -1;
$('#currentCSName').val(saveName);
$('#currentCSDescription').val(saveDescription);
}
currentCSName = saveName;
currentCSDescription = saveDescription;
$.each(im, function(index, value) {
console.log(index + " " + value.value);
csd[index] = value.value;
});
//for (item in im)
//{
// csd[item] = im[item].value;
//}
var data = "csid=" + csid
+ "&csn=" + currentCSName
+ "&csdesc=" + currentCSDescription
+ "&csd=" + JSON.stringify(csd);
jQuery.ajax({
url:"dbs/scs.php",
data:data,
type:"post",
success:function(resp){
currentCSID = parseInt(resp);
//alert("saved:" + currentCSID);
alert("saved");
},
error:function(e){
alert("failed to save");
}
});
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
// don't call the home button handler
evt.stopPropagation();
});
});
</script>
</body>
<footer>
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-3">
<h1 class="logo-text">do<span class="pinktext">Learn</span>Finance</h1>
</div>
<div class="w-col w-col-6">
<div class="centered">
<a href="index.php" class="w-inline-block footer-link">
<div class="footer-link">Home</div>
</a>
<a href="about.php" class="w-inline-block footer-link">
<div class="footer-link">About</div>
</a>
<a href="contact.php" class="w-inline-block footer-link">
<div class="footer-link">Contact</div>
</a>
<a href="#" class="w-inline-block footer-link">
<div class="modal-link footer-link">Sign In</div>
</a>
</div>
</div>
<div class="w-col w-col-3">
<div>
</div>
</div>
</div>
</footer>
</html>
Related
I'm a beginner in Javascript I have an api which I need to execute asynchronously or I need a request to be executed only after the previous one is completed.
Researching I found that with Callback it is possible to do this, however I cannot implement it in my script.
Below is my HTML:
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Chameleon Admin is a modern Bootstrap 4 webapp & admin dashboard html template with a large number of components, elegant design, clean and organized code.">
<meta name="keywords" content="admin template, Chameleon admin template, dashboard template, gradient admin template, responsive admin template, webapp, eCommerce dashboard, analytic dashboard">
<meta name="author" content="Niklausec">
<title></title>
<link rel="apple-touch-icon" href="../../theme-assets/images/ico/apple-icon-120.png">
<link rel="shortcut icon" type="image/x-icon" href="theme-assets/images/logo/logo.png">
<link href="https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i,700,700i%7CComfortaa:300,400,700" rel="stylesheet">
<link href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="vertical-layout vertical-menu 2-columns menu-expanded fixed-navbar" style="background: #0f1321;" data-open="click" data-menu="vertical-menu" data-color="bg-chartbg" data-col="2-columns">
<div class="container mt-4" style="margin-bottom: 100px;">
<div class="text-center mb-3">
<div class="text-center ">
<h1 class="text-light"><b></b> </h1>
<div class="text-center ">
</div>
<textarea class="form-control bg-dark text-light" style="resize: none;text-align: center;margin: auto;" rows="12" id="lista" placeholder="Informe sua lista"></textarea>
</fieldset>
<center>
<div class="mb-3">
<button type="button" class="btn btn-light btn-min-width mr-1 mb-1" id="testar" onclick="enviar()">INICIAR</button>
<button type="button" class="btn btn-light btn-min-width mr-1 mb-1" id="parar" disabled="true">PARAR</button>
VOLTAR
</div>
</center>
<center>
<div class="badge badge-success badge-pill" style="padding: 10px 10px;margin: 5px;">
<i class="la la-check"></i>
<span style="font-size: 15px;"> Aprovados</span>
<span style="font-size: 15px;" id="cLive">0</span>
</div>
<div class="badge badge-danger badge-pill" style="padding: 10px 10px;margin: 5px;">
<i class="la la-close"></i>
<span style="font-size: 15px;"> Reprovados</span>
<span style="font-size: 15px;" id="cDie">0</span>
</div>
<div class="badge badge-primary badge-pill" style="padding: 10px 10px;margin: 5px;">
<i class="la la-clock-o"></i>
<span style="font-size: 15px;"> Testados</span>
<span style="font-size: 15px;" id="total">0</span>
</div>
<div class="badge badge-info badge-pill" style="padding: 10px 10px;margin: 5px;">
<i class="la la-cloud-upload"></i>
<span style="font-size: 15px;"> Carregados</span>
<span style="font-size: 15px;" id="carregadas">0</span>
</div>
</center>
<center>
<div class="text-center text-light mt-3">
<h4 class="text-light" id="status_ccs">AGUARDANDO INICIO...</h4>
</div>
</center>
<div class="col-md-12 mt-3 p-0">
<div class="card bg-dark text-light">
<div style="position: absolute;top: 0;right: 0;">
<button id="mostra" class="btn btn-primary" style="padding: 2px 5px;"><i class="la la-external-link-square" style="font-size: 30px;"></i></button>
</div>
<div class="card-body">
<h6 style="font-weight: bold;" class="card-title text-light">Aprovados - <span id="cLive2" class="badge badge-success">0</span></h6>
<div id="bode"><span id=".aprovadas" class="aprovadas"></span></div>
</div>
</div>
</div>
<div class="col-md-12 mt-3 p-0">
<div class="card bg-dark text-light">
<div style="position: absolute;top: 0;right: 0;">
<button id="mostra2" class="btn btn-primary" style="padding: 2px 5px;"><i class="la la-external-link-square" style="font-size: 30px;"></i></button>
</div>
<div class="card-body">
<h6 style="font-weight: bold;" class="card-title text-light">Reprovados - <span id="cDie2" class="badge badge-danger">0</span></h6>
<div id="bode2"><span id=".reprovadas" class="reprovadas"></span></div>
</div>
</div>
</div>
</div>
<!-- BEGIN VENDOR JS-->
<script src="theme-assets/vendors/js/vendors.min.js" type="text/javascript"></script>
<!-- BEGIN VENDOR JS-->
<!-- BEGIN PAGE VENDOR JS-->
<script src="theme-assets/vendors/js/charts/chartist.min.js" type="text/javascript"></script>
<!-- END PAGE VENDOR JS-->
<!-- BEGIN CHAMELEON JS-->
<script src="theme-assets/js/core/app-menu-lite.js" type="text/javascript"></script>
<script src="theme-assets/js/core/app-lite.js" type="text/javascript"></script>
<!-- END CHAMELEON JS-->
<!-- BEGIN PAGE LEVEL JS-->
<script src="theme-assets/js/scripts/pages/dashboard-lite.js" type="text/javascript"></script>
<!-- END PAGE LEVEL JS-->
<script type="text/javascript">
$(document).ready(function(){
$("#bode").hide();
$("#esconde").show();
$('#mostra').click(function(){$("#bode").slideToggle();});
});
$(document).ready(function(){
$("#bode2").hide();
$("#esconde2").show();
$('#mostra2').click(function(){$("#bode2").slideToggle();});
});
function enviar() {
var linha = $("#lista").val();
var linhaenviar = linha.split("\n");
var total = linhaenviar.length;
if (total > 500) {
alert("Limite: 500 GERADEX POR TESTE!");
return;
}
var ap = 0;
var rp = 0;
$('#testar').attr('disabled', 'disabled');
$('#parar').attr('disabled', null);
var callBackFn = function(index) {
if (index >= linhaenviar.length) {
return;
}
var value = linhaenviar[index];
var ajaxCall = $.ajax({
url: 'afa.php?lista=' + value,
type: 'GET',
async: true,
success: function(resultado) {
if (resultado.match("APROVADO")) {
removelinha();
ap++;
aprovadas(resultado + "");
$('#status_ccs').html('APROVADO');
} else {
removelinha();
rp++;
reprovadas(resultado + "");
$('#status_ccs').html('');
}
$('#carregadas').html(total);
var fila = parseInt(ap) + parseInt(rp);
$('#cLive').html(ap);
$('#cDie').html(rp);
$('#total').html(fila);
$('#cLive2').html(ap);
$('#cDie2').html(rp);
if (fila == total) {
$('#testar').attr('disabled', null);
$('#parar').attr('disabled', 'disabled');
$('#lista').attr('disabled', null);
// audio.play();
document.getElementById("status_ccs").innerHTML = "FINALIZADO";
setTimeout(function() {
document.getElementById("status_ccs").innerHTML = "AGUARDANDO INICIO...";
}, 6000);
}
index++;
callBackFn(index);
}
});
$('#parar').click(function() {
ajaxCall.abort();
$('#testar').attr('disabled', null);
$('#parar').attr('disabled', 'disabled');
$('#lista').attr('disabled', null);
var st = 'PAUSADO';
$('#status_ccs').html(st);
});
}
callBackFn(0);
}
});
}
function aprovadas(str) {
$(".aprovadas").prepend(str + "<br>");
}
function reprovadas(str) {
$(".reprovadas").prepend(str + "<br>");
}
function removelinha() {
var lines = $("#lista").val().split('\n');
lines.splice(0, 1);
$("#lista").val(lines.join("\n"));
}
</script>
</body>
</html>
Expected Result:
I need only another call to be made in the API after the end of the later one and so on.
I changed your enviar function so that each ajaxCall is executed just after previous has finished.
Notice:
I created a variable "callBackFn". This is function that will be used as callback.
At the end of ajax success I executed this callBackFn.
function enviar() {
var linha = $("#lista").val();
var linhaenviar = linha.split("\n");
var total = linhaenviar.length;
if (total > 500) {
alert("Limite: 500 GERADEX POR TESTE!");
return;
}
var ap = 0;
var rp = 0;
$('#testar').attr('disabled', 'disabled');
$('#parar').attr('disabled', null);
var callBackFn = function(index) {
if (index >= linhaenviar.length) {
return;
}
var value = linhaenviar[index];
var ajaxCall = $.ajax({
url: 'afa.php?lista=' + value,
type: 'GET',
async: true,
success: function(resultado) {
if (resultado.match("APROVADO")) {
removelinha();
ap++;
aprovadas(resultado + "");
$('#status_ccs').html('APROVADO');
} else {
removelinha();
rp++;
reprovadas(resultado + "");
$('#status_ccs').html('');
}
$('#carregadas').html(total);
var fila = parseInt(ap) + parseInt(rp);
$('#cLive').html(ap);
$('#cDie').html(rp);
$('#total').html(fila);
$('#cLive2').html(ap);
$('#cDie2').html(rp);
if (fila == total) {
$('#testar').attr('disabled', null);
$('#parar').attr('disabled', 'disabled');
$('#lista').attr('disabled', null);
// audio.play();
document.getElementById("status_ccs").innerHTML = "FINALIZADO";
setTimeout(function() {
document.getElementById("status_ccs").innerHTML = "AGUARDANDO INICIO...";
}, 6000);
}
index++;
callBackFn(index);
}
});
$('#parar').click(function() {
ajaxCall.abort();
$('#testar').attr('disabled', null);
$('#parar').attr('disabled', 'disabled');
$('#lista').attr('disabled', null);
var st = 'PAUSADO';
$('#status_ccs').html(st);
});
}
callBackFn(0);
}
By the way, if you intend to process audio I would suggest using https://howlerjs.com/
when I click on the "Todo Ekleyin" button, I get a warning. However, I would like this alert to appear only once per press, not multiple times, and can be pressed again after the alert disappears. How can I achieve this and?
Thank you in advance for your answer, good work. (If there is a method other than the method you suggested, I would be glad if you can write its name.)
// Tüm Elementleri Seçme
const form = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo");
const todoList = document.querySelector(".list-group");
const firstCardBody = document.querySelectorAll(".card-body")[0];
const secondCardBody = document.querySelectorAll(".card-body")[1];
const filter = document.querySelector("#filter");
const clearButton = document.querySelector("#clear-todos");
eventListeners();
function eventListeners() { // Tüm Event Listenerlar
form.addEventListener("submit", addTodo);
}
function addTodo(e) {
const newTodo = todoInput.value.trim();
if (newTodo === "") { // Alarm Verme
showAlert("danger","Lütfen Bir Todo Giriniz");
}
else {
addTodoToUI(newTodo);
}
addTodoToUI(newTodo);
e.preventDefault();
}
function showAlert(type,message){
const alert = document.createElement("div");
alert.className = `alert alert-${type}`;
alert.textContent = message;
firstCardBody.appendChild(alert);
//setTimeout
setTimeout(function(){
alert.remove();
}, 1000);
}
function addTodoToUI(newTodo) { // String Değerini List Item olarak Ekleyecek.
// List Item Oluşturma.
const listItem = document.createElement("li");
// Link Oluşturma
const link = document.createElement("a");
link.href = "#";
link.className = "delete-item";
link.innerHTML = "<i class = 'fa fa-remove'></i>";
listItem.className = "list-group-item d-flex justify-content-between";
// Text Node
listItem.appendChild(document.createTextNode(newTodo));
listItem.appendChild(link);
// Todo List'e List Item'ı Ekleme
todoList.appendChild(listItem);
// Ekleme Sonrası Input'tan yazı Silme
todoInput.value = "";
}
// Todo Ekleme Bilgi Mesajı
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<title>Todo List</title>
</head>
<body>
<div class="container" style="margin-top: 20px">
<div class="card row">
<div class="card-header">Todo List</div>
<div class="card-body">
<form id="todo-form" name="form">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="todo" id="todo"
placeholder="Bir Todo Girin" />
</div>
</div>
<button type="submit" class="btn btn-danger">Todo Ekleyin</button>
</form>
<hr />
<!-- <div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div> -->
</div>
<div class="card-body">
<hr />
<h5 class="card-title" id="tasks-title">Todolar</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id="filter"
placeholder="Bir Todo Arayın" />
</div>
</div>
<hr />
<ul class="list-group">
<!-- <li class="list-group-item d-flex justify-content-between">
Todo 1
<a href = "#" class ="delete-item">
<i class = "fa fa-remove"></i>
</a>
</li>-->
</ul>
<hr />
<a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="berkay.js"></script>
</body>
</html>
You can put an integer in your alert function and every using array increase a one more.
For example, if you want after 5 times don't show alert.
var a = 0;
var b = true;
if (newTodo === "" || b) { // Alarm Verme
showAlert("danger","Please Give me a Todo!");
a++;
if(a == 5 ){
b = false;
}
}
I am writing a page that has the code for a function in a pre tag, a button below the raw code that will run the code. I am having trouble with displaying the result of the button on the same page. I know document.write() is probably the culprit but I'm unsure what to change it to. Thanks you for your time.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <title>Stack Overflow Question</title>
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Q3</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Question 3 Start -->
<div role="tabpanel" class="tab-pane tab-pane active" id="q3">
<div class="row">
<div class="col-md-12">
</div>
<div class="col-md-12">
<!-- button -->
<button id="q3-button" class="btn btn-default" type="button">Question Three Solution</button>
</div>
<div class="col-md-12">
<!-- result -->
<div id="q3-result"></div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//Q 3
function start(){
var start = parseInt(prompt("How long would you like the side to be?"));
if (isNaN(start)) {
alert("That's not a number, please retry.");
var start = prompt("Please re-enter a number.");
}
var str = " " + "<br>";
for (var i=1; i<=start; i++){
for(var j=1; j<=8; j++){
if((i+j)%2==0){
document.write("#");
}
else{
document.write(" ");
}
}
document.write(str);
}
$("#q3-result").html(start);
}
$("#q3-button").on("click", function(){
start();
});
//ends document ready function
});
</script>
</div>
</body>
</html>
I'm trying to animate a .col-md-3 to slide from the left side of the screen after pressing a button and make it come back (aka side menu).
First part of the animation works perfect, but -$lefty.outerWidht():0 drags all the content at its right too much.
Here's the code:
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
Here's my 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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth():
0
});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here's if's properties
if ($lefty.offset().left== 0) {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
Your should use offset().left instead of outerWidth(). If you move the div to the left, the div gets an offset - and you need to move the div back based on this offset.
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
});
See the updated code below:
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here is the fiddle: https://jsfiddle.net/aaqtw3do/
Good day! I am using iframe and instead of an src to another page for its contents, I used the iframe's id to call a Javascript action but nothing shows. Here is my code:
#(title: Html, nav: String = "")(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
width:25%;
height:100%;
}
.mainContent {
width:75%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<link href='#routes.Assets.at("stylesheets/css/ui-lightness/jquery-ui-1.10.4.css")' rel="stylesheet">
<script src='#routes.Assets.at("javascripts/jquery-ui-1.10.4.js")'></script>
<script type="text/javascript">
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
</script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#routes.Application.index()">Home</a>
<ul class="nav">
<li class="#("active".when(nav == "add tag"))">
Add Tag
</li>
<li class="#("active".when(nav == "view edit"))">
View/Edit Tag
</li>
<li class="#("active".when(nav == "log"))">
Log Information
</li>
<li class="#("active".when(nav == "map"))">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="#routes.Tags.map(false)" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank" ></iframe>
</body>
</html>
The left iframe has no problem but the other side (where there is no src) is empty. I checked the console and it says Uncaught TypeError: Cannot read property 'contentWindow' of null. Please help me figure this out. Thanks a lot.
EDIT
This is the page-source.
<link rel="stylesheet" href="/assets/stylesheets/jquery-ui.css">
<script src="/assets/javascripts/jquery-1.10.2.js"></script>
<script src="/assets/javascripts/jquery-ui-1.10.4.js"></script>
<script src='/assets/javascripts/jquery-1.7.1.min.js' type="text/javascript"></script>
<script>
$(function() {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var scntDiv = $('#addMore');
var i = $('#addMore p').size();
$('#addRT').live('click', function() {
$('<p>'+
'<input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name" required /> '+
'<textarea name="relatedTags.relatedNotes" placeholder="Notes"></textarea> '+
'<select name="relatedTags.relationship"> <option value="parent"> parent </option>'+
'<option value="child"> child </option>'+
'<option value="peer"> peer </option>'+
'</select> '+
'Remove</p>').appendTo(scntDiv);
$( "#tags"+i ).autocomplete({
source: availableTags
});
i++;
return false;
});
$('#remRT').live('click', function() {
if( i > 0 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
function checkDuplicates() {
if ( $.trim( $('#name').val() ) == '' ) {
alert('Invalid name.');
return false;
}
else {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var input = document.getElementById('name').value;
input = input.replace(/\s+/g,' ').trim().toLowerCase();
var found = $.inArray(input, availableTags);
if(found != -1) {
alert("Tag already exists.");
return false;
} else { //does not contain the value
var k = $('#addMore p').size();
for (var i=0; i<k; i++) {
for (var j=0; j<k; j++) {
if (i!=j){
if (document.getElementById('tags'+i).value==document.getElementById('tags'+j).value &&
document.getElementById('tags'+i).value!="" && document.getElementById('tags'+j).value!="") {
alert("Duplicate entries found.");
document.getElementById('tags'+i).select();
return false;
}
}
}
}
return true;
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
float:left;
width:20%;
height:100%;
}
.mainContent {
float:left;
width:79%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
<link href='/assets/stylesheets/css/ui-lightness/jquery-ui-1.10.4.css' rel="stylesheet">
<script src='/assets/javascripts/jquery-ui-1.10.4.js'></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="/index">Home</a>
<ul class="nav">
<li class="active">
Add Tag
</li>
<li class="">
View/Edit Tag
</li>
<li class="">
Log Information
</li>
<li class="">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="/map?editable=false" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank"></iframe>
<script type="text/javascript">
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write("<div class='container'> <div class='content'> <div class='row'> <div class='span14'>
<p align="right"> Logged in as: <b>user1</b> </p>
<h1> Add Tag </h1>
<form action="/addTag" method="POST" id="form" onsubmit="return checkDuplicates(this);">
<fieldset>
<legend>Add Tag</legend>
<div class="clearfix " id="name_field">
<label for="name">Name</label>
<div class="input">
<input type="text" id="name" name="name" value="" >
<span class="help-inline"></span>
<span class="help-block">Maximum length: 100, Required</span>
</div>
</div>
<div class="clearfix " id="notes_field">
<label for="notes">Impact Analysis Notes</label>
<div class="input">
<textarea id="notes" name="notes" ></textarea>
<span class="help-inline"></span>
<span class="help-block">Maximum length: 200</span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Related Tags</legend>
<div id="profiles">
<div id="addMore" class="twipsies well profile">
</div>
<div class="manage">
<a class="addProfile btn success" id="addRT">Add related tag</a>
</div>
</div>
</fieldset>
<div class="actions">
<input type="submit" class="btn primary" value="Add Tag">
Cancel
</div>
</form>
<script type="text/javascript" charset="utf-8">
$('.addProfile').live('click', function(e) {
var template = $('.profile_template')
template.before('<div class="twipsies well profile">' + template.html() + '</div>')
renumber()
})
$('#form').submit(function() {
$('.phone_template').remove()
$('.profile_template').remove()
})
var renumber = function(phones) {
$('.profile').each(function(i) {
$('input', this).each(function() {
$(this).attr('name', $(this).attr('name').replace(/relatedTags\[.+?\]/g, 'relatedTags[' + i + ']'))
})
})
}
</script>
</div> </div> </div> </div>');
doc.close();
});
</script>
</body>
</html>
What happens is a syntax error because the #content is also an HTML. The quotation marks are messed up. Please help me. Thank you so much.
Well, you use jQuery is a tag... so I'll use a jQuery :)
What about:
$('#frame').contents().find('body').append('<div>your content</div>');
Or:
$('#frame').contents().find('body').html('<div>your content</div>');
Difference between the both examples?
.append(): http://api.jquery.com/append/
.html() : http://api.jquery.com/html/
run your javascript when the page is loaded.
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
});