I want to use the .each and .attr function to get div ids. I know how to do that, but what I want to do is grab each div ID from the DOM with a certain class (let's say "edit" class) and .append some data into that div.
Here's what I am having trouble with: I want to put the ID of that particular DIV in the .each loop inside the .append. For example: if I wanted to put a link inside the .append, I would want the link to be http://www.website.com/index.php?id=1&div=DIV-ID
Any ideas, and I'm sorta a novice, so can you provide code example. I understand attr and .each though to an extent.
http://jsfiddle.net/WrGLC/1/
For the sake of keeping it on this page:
HTML:
<div id="1" class="edit">A</div>
<div id="2" class="edit">B</div>
<div id="3">C</div>
JS:
// Anonymous loop, in case you copy and paste this script, the vars won't get confused
(function() {
// Loop for each .edit
$('.edit').each(function() {
// Update the text inside
$(this).html('http://www.website.com/id='+$(this).attr('id'));
});
})();
Here's an untested solution that looks like it should work. It may not work if there are multiple classes assigned to the div elements.
$(function() {
$('div').each(function() {
var _t = $(this);
var id = _t.attr("id");
if(_t.attr("class") == "someClass") {
_t.append("<a href = 'http://www.website.com/index.php?id=1&div="+id+"'>Hello World!</a>");
}
});
});
I'll guess. You want this?
$( '.edit' ).append( function () {
return '<a href="http://www.website.com/index.php?id=1&div=' +
this.id + '">link</a>';
});
I think I'm correctly interpreting your conditions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="a" class="edit">A</div>
<div id="b" class="edit">B</div>
<div id="c">C</div>
<div id="d" class="save">D</div>
<div id="e" class="edit">E</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$("div.edit").each(function (i) {
var $div = $(this);
$div.append('Link');
});
})(jQuery);
</script>
</body>
</html>
UPDATE: #JohnHartsock is correct. No each method is needed here. I'd adjust my code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="a" class="edit">A</div>
<div id="b" class="edit">B</div>
<div id="c">C</div>
<div id="d" class="save">D</div>
<div id="e" class="edit">E</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$("div.edit").append(function () {
var $div = $(this);
$div.append('Link');
});
})(jQuery);
</script>
</body>
</html>
I don't believe an jQuery call to each() would be necessary. With append() you can pass a function where this will represent the current iteration of your selector.
$('div.mydivclass').append(function () {
return 'My Div link';
});
Here is a fiddle http://jsfiddle.net/WFd7k/
Related
Hiii everyone,
I just want to show one div if the database value is equal to some value.I tried like this
<?php echo $show['birth_certificate_available']=='Available') { ?>
<script type="text/javascript">
$(".birth").show();
</script>
<?php } ?>
But the div is not showing.I dont know why its not working.Kindly guide me to correct this issue.
Please modify the code accordingly :
<?php if($show['birth_certificate_available']=='Available') { // put a condition?>
<script type="text/javascript">
$(document).ready(function(){ // jQuery ready function
$(".birth").show();
});
</script>
<?php } ?>
Wrap it in ready() function as follows,
Assuming you have already imported the relevant jquery lib in your code.
<?php echo $show['birth_certificate_available']=='Available') { ?>
<script type="text/javascript">
$(document).ready(function(){
$(".birth").show();
});
</script>
<?php } ?>
I missed JQuery reference document so that its not worked.Now I added script document its working.Thanks all who helped me to fix this.
Solution
echo outputs data to the page. To write a condition, you would like to use if statements.
<?php if ($show['birth_certificate_available'] === 'Available'): ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.birth').show();
});
</script>
<?php endif; ?>
Note: if jQuery is already linked to your document, remove the <script src="..."></script> line. Otherwise, I suggest you to move the <script src="..."></script> line right before the </body> HTML closing tag to speedup HTML elements loading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="birth" hidden="hidden">Foobar</div>
<?php if ($show['birth_certificate_available'] === 'Available'): ?>
<script>
$(document).ready(function() {
$('.birth').show();
});
</script>
<?php endif; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Note: I use the === equal assertion to force type testing. Whatever, be careful: testing is case-sensitive, whether it is == or ===
The div element must have the birth class, must exist and must be hidden in order to successfully show() it
Debug
$show variable
If this is not working, and in order to debug the $show variable, you may want to use var_dump() as so:
var_dump($show);
and ensure it is an array and has the birth_certificate_available index defined.
Javascript errors
Use the browser console to retrieve javascript errors (such as inexisting div elements...)
<html>
<head>
<script src="js/jquery-1_9_1_js.js"></script>
<script>
$(function() {
$("#mainDiv").load("two.php");
});
</script>
</head>
<body>
<div class="main" id="mainDiv"></div>
</body>
</html>
Hi, I have above code in one.php. It loads data from two.php into mainDiv.
The contents of two.php are overlapping out of the div instead of the scrolling inside the div in one.php. Please help me insert a script/code that will scroll the contents inside mainDiv instead of overlapping.
try this :
<div id="" style="overflow-y: scroll; height:'your height';">
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#mainDiv').load('home.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
it will refresh every 5 seconds
How can I link HTML href values to AJAX so that I get result on same page but in different conatainer. Below is my my code:
<html>
<head>
<title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#a').click(function() {
e.preventDefault();
$('content').load($(this).attr('href'));
});
});
</script>
</head>
<body>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body</div>
<div id="footer"> </div>
</body>
</html>
Since I am new to AJAX, I am not able to understand how to get information related to clicked value of href in AJAX function so that it will display result in same page but in other division. My filename is, say front_end.php
This is your code, just updated:
<html>
<head> <title>DTC Search</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
});
</script>
CT1<br>
CT2<br>
CT3<br>
CT4<br>
<div id="sidebar"> Body
</div> <div id="content"></div>
<div id="footer"> </div>
</body>
</html>
1) A tag is not $("#a") in jquery
2) $('content') is nothing
3) element with id $('#content') or some element with class $('#content')
Tako a look at jsBin example
1: http://jsbin.com/IFaLoJE/1/ or jsfiddle example
Try something like this :
$('a').click(function (e) {
e.preventDefault();
$('#content').load(this.href);
});
I have trawled the net and Stack Overflow and have not found an adequate answer to this question. Before I start the trial and error process of finding my own solution, I thought I would turn to the Stack Overflow braintrust and see if there was already a successful implementation.
I have an AJAX powered page that degrades properly for non-javascript browsers and SEO. Each click in the AJAX version can be represented by a unique URL.
What I want to do is to dynamically change the HREF of the button. I do understand that this tag is converted to standard HTML at runtime (namely into a nasty table / iframe layout).
I was just wondering if anyone had any insight as to how to implement this FB like button onto AJAX powered pages?
Cheers in advance :)
EDIT:
What do you think of this method I just hacked together? See any huge problems with it?
<!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 runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("a#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("div#Container").empty().append(elem);
FB.XFBML.parse($("div#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
SIMPLE SOLUTION
Just parse trigger the parse function when load complete.
If you’re using jQuery, there’s a real easy and slick solution to this problem:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
http://developers.facebook.com/docs/reference/plugins/like/
This is the solution I ended up going with:
<!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 runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("#Container").empty().append(elem);
FB.XFBML.parse($("#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
You're making this hard on yourself - just render a new iframe-based one.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$( '#ChangeToGoogle' ).click( function( event )
{
event.preventDefault();
$( '#Container' ).empty().append( $('<iframe />')
.attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80' )
.attr( 'scrolling', 'no' )
.attr( 'frameborder', 'no' )
.attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' )
.attr( 'allowTransparency', 'true' )
);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true">
</iframe>
</div>
</form>
</body>
This is how I handled this situation when I ran into it - seems to work well.
// Set Facebook Like Button with jQuery
setFBLikeButtons = function (container,url,send,layout,width,show_faces,font) {
// Set Default Args
if(!send) { send = "false"; }
if(!layout) { layout = "button_count"; }
if(!width) { width = "100"; }
if(!show_faces) { show_faces = "false"; }
if(!font) { font = "arial"; }
$(container).empty(); // Remove current like button
$(container).html('<fb:like href="'+url+'" send="'+send+'"
layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'"
font="'+font+'"></fb:like>');
FB.XFBML.parse(); // This is the magical syrup
}
create like button
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("span");
for(var i=0; i<divs.length i++){
if(divs[i].className == "likes"){
if(divs[i].title){ var Href = divs[i].title; }else{ var Href = window.location; }
var fb_like = document.createElement("fb:like");
fb_like.setAttribute("href", Href);
fb_like.setAttribute("layout", "box_count");
fb_like.setAttribute("show_faces", "false");
fb_like.setAttribute("width", "55");
document.getElementById("likes2").appendChild(fb_like);
}
}
}
</script>
</head>
<body>
<span class="likes" title="www.bzzs.me"></span>
</body>
Load it after the window loads, this is what works for me:
$(window).load(function(){
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
try{
FB.XFBML.parse();
} catch(ex) {}
});
});
If you're using the jQuery Mobile framework you can run the same code as the accepted answer in the pagecontainershow event which jQuery Mobile uses when it displays a new page.
// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
try
{
FB.XFBML.parse();
} catch (ex) { }
});
i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>