I thought that adding a DOM element as context to a JQuery method would restrict the method to looking ONLY at that element and its descendants instead of the entire document. If this is the case...
Why does this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
$(document).ready(function() {
var contextElem = document.getElementById("row1");
$("img").closest(".drow", contextElem).each(function(index, elem) {
console.log("Context Element: " + elem.tagName + " " + elem.className
+ " " + elem.id);
});
});
</script>
</head>
<body>
<h1>JQuery Closest Example</h1>
<form method="post">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
<div class="dcell">
<img src="cell11.png"/><label for="cell11">Cell 1 1:</label>
<input name="cell11Value" value="0" required>
</div>
<div class="dcell">
<img src="cell12.png"/><label for="cell12">Cell 1 2:</label>
<input name="cell12Value" value="0" required >
</div>
</div>
<div id="row2"class="drow">
<div class="dcell">
<img src="cell21.png"/><label for="cell21">Cell 2 1:</label>
<input name="cell21Value" value="0" required>
</div>
<div class="dcell">
<img src="cell22.png"/><label for="cell22">Cell 2 2:</label>
<input name="cell22Value" value="0" required >
</div>
</div>
</div>
</div>
<div id="buttonDiv"><button type="submit">Save</button></div>
</form>
</body>
</html>
J
Result in this in the console:
Context Element: DIV drow row2
Instead of this:
Context Element: DIV drow row1
???
Passing in a context means jQuery will look for your selector as a descendent of context. In your case, your selector and context are the same element.
Related
I am kind of stuck. I have thought of the idea to use the .insertBefore() but I am not sure where to place the syntax. I also need to add checkboxes instead of the bullets that automaticly apear when using , I have no clue have to do this.
My code is as follows.
HTML
const n = [];
function changeText() {
inputText = document.getElementById('inputText').value;
n.push(inputText);
document.querySelector('#list ul').innerHTML += "<li>" + inputText
}
<html lang="en">
<head>
<title>To-Do list</title>
<mmeta charset="UTF-8">
<link rel="stylesheet" href="todoStyle.css">
</head>
<body>
<div id="form">
<h1>New Task</h1>
<div id="button">
<button onclick="changeText()">Add to list</button>
</div>
<div id="input">
<input type="text" id="inputText" name="addNewList">
</div>
</div>
<div class="list1" id="list">
<h1>My to-do list</h1>
<ul>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>
I tried inserting the .insertBefore() in a new document.getElementById. But I was not sure where to insert this line of code.
To add an element to the beginning of an array, just array.unshift(element) instead of .push
And for putting a checkbox per array item:
<li><input type="checkbox"/></li>
One way to do it is to first save the current content. Then you will concatenate the new item with the current content, in the order you want it to be presented. I modified the code to work like that
const n = [];
function changeText() {
inputText = document.getElementById('inputText').value;
// add the item in the beginning of the list
n.unshift(inputText);
// save current listing
const currentContent = document.querySelector('#list ul').innerHTML;
// append new item in the beginning the the current listing
document.querySelector('#list ul').innerHTML = "<li>" + inputText + "</li>" + currentContent;
}
<html lang="en">
<head>
<title>To-Do list</title>
<mmeta charset="UTF-8">
<link rel="stylesheet" href="todoStyle.css">
</head>
<body>
<div id="form">
<h1>New Task</h1>
<div id="button">
<button onclick="changeText()">Add to list</button>
</div>
<div id="input">
<input type="text" id="inputText" name="addNewList">
</div>
</div>
<div class="list1" id="list">
<h1>My to-do list</h1>
<ul>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>
Try using afterbegin, I used css to remove the circle of the list styles and having a checkbox with the text, now you should have some events for the input to handle.
const n = [];
function changeText() {
inputText = document.getElementById('inputText').value;
n.push(inputText)
// get reference to the nav tag
const listUl = document.querySelector("#list ul");
listUl.insertAdjacentHTML("afterbegin", `
<li>
<input type="checkbox"/>
${inputText}
</li>
`);
}
#list ul li{
list-style:none;
}
<html lang="en">
<head>
<title>To-Do list</title>
<mmeta charset="UTF-8">
<link rel="stylesheet" href="todoStyle.css">
</head>
<body>
<div id="form">
<h1>New Task</h1>
<div id="button">
<button onclick="changeText()">Add to list</button>
</div>
<div id="input">
<input type="text" id="inputText" name="addNewList">
</div>
</div>
<div class="list1" id="list">
<h1>My to-do list</h1>
<ul>
</ul>
</div>
<script src="todo.js"></script>
</body>
</html>
how can i copy a html element to a string correctly. I use metroui, version 4. They have a special input class where a X popsout with a click you can delete the value that you entered in the input.
https://metroui.org.ua/input.html
When i copy the html element to a var this X does nothing, but when i define a var with the string and append this, it works. When i get it with the element id, there is already injected the javascript code from metro js, because i use this data-role="input", then metroui js do some things. How can i get the same string as it would be with var div ? The pure html like it shows in editor? Or isnt this possible because jquery can only read the dom? So that i can read this pure html
<span id="section-one-a1">
<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
<input value="val1" id="val1" type="text" data-role="input" />
</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#addScnt').on('click', function() {
var div = $('<span id="section-one-a1">'+
'<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>'+
'<input value="val1" id="val1" type="text" data-role="input" />'+
'</span>');
//console.log(div);
var newdiv = $('#section-one-a1').prop('outerHTML').replace(/(\r\n|\n|\r|\t)/gm,"");
console.log(newdiv)
var test = $(newdiv);
$(div.appendTo("#p_scents"));
return false;
});
});
</script>
</head>
<body id="main">
<ul id="test">
<li>
new
</li>
</ul>
<div id="p_scents">
<span id="section-one-a1">
<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
<input value="val1" id="val1" type="text" data-role="input" />
</span>
</div>
</body>
</html>
I did it this way no, perhaps not nicely, but works. Remove the elements and attributes that the MetroUI JS injected in the html when data-role is input, then it works. When it goes to the dom with appendto the metroui JS injected the new ones.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#addScnt').on('click', function() {
var div1 = $('<span id="section-one-a1">'+
'<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>'+
'<input value="val1" id="val1" type="text" data-role="input" />'+
'</span>');
//console.log(div);
var newdiv = $('#section-one-a1').clone().html().replace(/(\r\n|\n|\r|\t)/gm,""); // string
var replace = newdiv.replace('<div class="input">',''); // replace input
replace = replace.replace('data-role-input="true"',''); // replace data-role-input
replace = '<span id="section-one-a1">'+replace+'</span>';
var div = $(replace); // to object
div.find(".button-group").remove(); // remove button-group
//console.log(test)
$(div.appendTo("#p_scents"));
return false;
});
});
</script>
</head>
<body id="main">
<ul id="test">
<li>
new
</li>
</ul>
<div id="p_scents">
<span id="section-one-a1">
<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
<input value="val1" id="val1" type="text" data-role="input" />
</span>
</div>
</body>
</html>
I know this is a basic questions, but I am working on making a dynamic form and was having a bit of trouble figuring out how to delete elements that share the same class. I have looked around on the web and other posts for a means to accomplish this, but still was unable to figure it out.
I am new to this so I apologize for the basic question. Below, I have pasted the relevant code and my attempt at this. Would anyone be able to assist me?
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName){
if (ingCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement('directionSet');'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName){
if (dirCounter == limit) {
alert("You have reached the add limit");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<!-- Required program scripts -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Style Sheets-->
<link rel="stylesheet" href="/styles/navBarStyle.css">
<link rel="stylesheet" href="/styles/myRecipesStyle.css">
<link rel="stylesheet" href="/styles/createRecipeStyle.css">
<link rel="stylesheet" href="/styles/errorMessageStyle.css">
</head>
<body>
<!-- Background image -->
<img id="background" src="/images/foodBackground.jpg" alt="">
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<%- include('../_partial/_messages'); -%>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage"/>
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
<!-- Required scripts to run app -->
<script src="/controls/newRecipeControl.js"></script>
<script src="/controls/errorMessageControl.js"></script>
</html>
Thanks for any help.
In your code you are using getElementById but there is no id called directionSet its a class.
You can simply use parentElement and remove to remove the newly added dynamic inputs by calling an onClick function.
In the onClick function removeElement() - this refers to the elements we have clicked and it will remove from the form.
var ingCounter = 1;
var dirCounter = 1;
var limit = 10;
function addIngredient(divName) {
if (ingCounter == limit) {
alert("You have reached the add limit");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='ingredientSet'><input class='ingredientInput' type='text' name='ingredients[]'><button class='deleteIngredientButton' type='button' onClick='removeElement(this);'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
ingCounter++;
}
}
function addDirection(divName) {
if (dirCounter == limit) {
alert("You have reached the add limit");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='directionSet'><input class='directionInput' type='text' name='directions[]'><button class='deleteDirectionButton' onClick='removeElement(this);' type='button'>X</button></div>";
document.getElementById(divName).appendChild(newdiv);
dirCounter++;
}
}
function removeElement(elementId) {
// Removes an element from the document
elementId.parentElement.remove()
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
</head>
<body>
<!-- Background image -->
<div id="newRecipeContainer">
<div id="closeButtonContainer">
<div id="backButton"><a id="back" href="/recipes/myRecipes">← My Recipes</a></div>
</div>
<form id="createRecipeForm" action="/recipes/createRecipe" method="POST" enctype="multipart/form-data">
<label id="formSubHeading">Create Your Homemade Recipe</label>
<div id="recipeNameContainer">
<label id="recipeNameLabel">Title</label>
<input id="recipeNameInput" type="text" name="recipeName">
</div>
<div id="recipeImage">
<label id="recipeImageLabel">Add An Image of Your Meal</label>
<input id="recipeImageInput" type="file" accept="image/*" name="recipeImage" />
<label id="recipeImageInputLabel" for="recipeImageInput" name="recipeImage">Choose A File</label>
</div>
<div id="recipeDescription">
<label id="recipeDescriptionLabel">Description</label>
<textarea id="recipeDescriptionInput" name="recipeDescription" cols="30" rows="10" maxlength="2000"></textarea>
</div>
<div class="ingredientsContainer">
<label id="ingredientsLabel">Ingredients</label>
<button id="addIngredientButton" type="button" onClick="addIngredient('allIngredients');">Add Another Ingredient</button>
<div id="allIngredients">
<div class="ingredientSet">
<input class="ingredientInput" type="text" name="ingredients[]">
</div>
</div>
</div>
<div class="directionsContainer">
<label id="directionsLabel">Directions</label>
<button id="addDirectionButton" type="button" onClick="addDirection('allDirections');">Add Another Direction</button>
<div id="allDirections">
<div class="directionSet">
<input class="directionInput" type="text" name="directions[]">
</div>
</div>
</div>
<div id="createRecipeButtonContainer">
<button id="createRecipeButton" type="submit">Create Recipe</button>
</div>
</form>
</div>
</body>
</html>
Hi I want to get the innerHTML of a div that contains input elements with input values.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" />
</div>
<p id="pid">
un texte.<input type="text" id="in" />
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
I want to get the inserted text in the inputs elements.
A piece of code can do the magic.
onblur='javascript:this.setAttribute("value",this.value)' value=""
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' />
</div>
<p id="pid">
un texte.<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' value=""/>
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
function afficher()
{
var t=document.getElementById('test').querySelectorAll("input");
console.log(t[0].value);
var t=document.getElementById('pid').querySelectorAll("input");
console.log(t[0].value);
}
<div id="test">
<input type="text"/>
</div>
<p id="pid">
un texte.<input type="text" />
</p>
<input type="submit" id="in" onclick="afficher();" />
Get div/p element using getElementById then use querySelectorAll to get input element. To get the value use input.value
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();
});