I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
Related
it is showing the checkboxes, but by default i want it to hide but after click show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
plz help i am a newbie so plz do explain after submitting your code,... Sorry and i'll be very thankfull for the help... waiting for an early response thank you...
To hide the checkboxes and p initially, you can simply use CSS:
div.electro > * {
display:none;
}
That said, it seems you could simplify your code by hiding and showing the div container instead of each individual child element:
CSS:
div.electro {
display:none;
}
JavaScript:
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
This is much better because it follows the DRY principle and is more flexible, for example if you adding some new elements to the container like some helper text, you don't need to update the JavaScript logic.
I want to do text editor and change the texts which is inside the content editable elements and also selected by the user.
my question is:
How to get the selected texts inside the content editable elements?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
//alert("selected texts");
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444" contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
This should get you started, although you will need to consider expanding on this code to cater for situations where someone selects outside of your text area and when someone presses the button and nothing is selected.
Oh, and I have console logged the output rather than alerted it.
$(document).ready(function(){
$("#show").click(function(){
range = window.getSelection().getRangeAt(0);
console.log(range.toString());
});
});
You can use window.getSelection() method.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
alert(window.getSelection().toString());
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444"contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');
I have an object tag with a blank data value and a menu of hyperlinks. I need the data value of the object tag to change to the href link set in each menu item upon click, preferably using javascript.
All help appreciated and thank you in advance.
EDIT:
Lets say i have an object tag with data="" If Link A has a href="this.html" I want the data attribute of object to become data="this.html" when Link A is clicked
On clicking the Anchors link the object data gets changed ,hoping this is what you want
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var thisObjectText=$(this).attr("href");
if(thisObjectText!=null && thisObjectText!="")
{
$('#swf').attr("data",thisObjectText);
alert($('#swf').attr("data"));
}
});
});
</script>
</head>
<body>
<div id="test">
Aaaa
Baaa
Caaa
Daaa
</div>
<object id="swf" width="400" height="400" data=""></object>
</body>
</html>
By going through your question what i analyzed is you have anchor tags on clicking those anchor tag " the value attached to that tag should pass to the objects"
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
var obj=new Object;
obj={};
var thisObjectText=$(this).attr("name");
obj.value=thisObjectText;
alert("object value on clicking links " + obj.value);
});
});
</script>
</head>
<body>
<div id="test">
Aaaa
Baaa
Caaa
Daaa
</div>
<div id="result">
</div>
</body>
</html>
I need to be able to create a hyperlink dynamically on mouseover and remove it on mouseout event. However, when the mouse goes over the link I need it to not behave as if it is mouseout. When this happens the events goes into infinite loop. See example below:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
var editTag = document.createElement('a');
editTag.appendChild(document.createTextNode("test2"));
editTag.setAttribute('name', 'test2');
editTag.setAttribute('id', 'lnkEdit');
editTag.setAttribute('href', '#');
editTag.setAttribute('style', 'float:right;');
tcell.appendChild(editTag);
}
function hideEdit(tcell) {
//var tcell = document.getElementById("tcAdd");
var lnk = document.getElementById("lnkEdit");
tcell.removeChild(lnk);
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
</td>
</tr>
</table>
</div>
</body>
</html>
Put the cursor on test1 and test2 to see the difference.
I think I am missing something obvious.
Well, I don't know if you want like this, but it works:
<html>
<head><title>
</title></head>
<body>
<script language="javascript" type="text/javascript">
function showEdit(tcell) {
document.getElementById("lnkEdit").style.display="inline";
}
function hideEdit(tcell) {
document.getElementById("lnkEdit").style.display="none";
}
</script>
<div>
<table style="width:200px;">
<tr>
<td id="tcAdd" style="border:1px solid #CCC" onmouseover="showEdit(this);" onmouseout="hideEdit(this);">
test1
test2
</td>
</tr>
</table>
</div>
</body>
</html>
It's a simpler way than using DOM. But if you want to use DOM, I can take another try =)