I'm trying to get content inside a div in another pages.
$.get('page1.php', function(data){
//option 1 <-- Cannot get content in a div inside a div, but can get root-div content
var content = $(data).filter('#bar').html();
//option 2 <-- Cannot get root-div content, but can get content in a div inside a div
var content = $('#bar', data).html();
});
I have noticed a problem, if I use filter function to extract data, I will not be able to get the content of a div inside a root-div. For example to get the content in id bar with this code: $(data).filter('#bar').html();
<div id="foo">
<div id="bar">
Lorem ipsum
</div>
</div>
However, If i use $('#bar', data).html(), I can retrieve the content inside bar, BUT I can't retrieve the content of foo for example ('#foo', data).html().
Are there any functions where you can combined these 2 situations instead of using these 2 methods together?
You should give an example with data specified, to make it clear what behavior you're expecting.From what you wrote, I'm supposing you're trying to use filter to select from the children of a div. It won't work, because filter selects from the objects in the current selection, it doesn't care
what is inside those objects. So, if you have div#foo in your selection, it won't care about div#bar inside it.
So, this works:
$("#foo").filter("#foo").html()
But it won't work
$("#foo").filter("#bar").html()
because div#bar is not in the selection from which you're trying to filter. It could work this way:
$("#foo").children().filter("#bar").html()
In case I misunderstood your question, I apologise, and will gladly update my answer.
Related
So I am building a tumblr template, and I am using stylehatch's Photoset-grid plugin. The plugin works, and in the custom html section I can make a fully functional grid.
The problem is, whenever I make a new tumblr post and edit the posts html to include the "data-layout" portion of the div, tumblr erases it. (Tumblr posts can only contain custom classes and id's in div's, apparently)
The markup I need is this:
<div class="photoset-grid" data-layout="132">
But tumblr erases the data-layout part when I save the post, so i get this:
<div class="photoset-grid">
My question is this: Can I use jquery to substitute a div id for a data layout?
So If I write this:
<div class="photoset-grid" id="132">
Can jquery change it to this, before the plugin loads so it works correctly?
<div class="photoset-grid" data-layout="132">
You can't substitute attributes directly, but you can simply get the id attribute value, create the new data attribute, and remove the ID attribute.
$(".photoset-grid").attr("data-layout", function () { return this.id })
.removeAttr("id");
http://jsfiddle.net/ERCPB/
You can do it in a few steps. First, save off the id value. Second, create a 'data-layout' attribute with that value. Lastly, remove the id attribute.
$('.photoset-grid').each(function(){
var identifier = $(this).attr('id');
$(this).attr('data-layout',identifier).removeAttr('id');
});
I am writing a quick function in javascript that interacts with wp in a set of posts that are hidden and shown when I click an element that corresponds to its matched href="#element".
Function would run like so:
1) You click one of the dynamically added post titles where it has a href value of the post title in the tag for it.
2) The corresponding hidden project under it with an id that matches the href value of the dynamically added elements above to basically show it and hide the previous child project.
Now I am trying to do this with pure javascript alone but its beginning to get really messy and long winded. I wondered if there was a good tool in the jquery api to aid in this?
Thanks,
If I understand your question correctly, in jQuery you could:
<h1 class="buttonHeader" data-divider="#dividerId1">Test</h1>
<h1 class="buttonHeader" data-divider="#dividerId2">Test 2</h1>
<div class="myDivider" id="dividerId1"><p>Content</p></div> <!-- Not sure what href is used for? -->
<div class="myDivider" id="dividerId2"><p>Content 2</p></div>
$(document).ready(function() {
$('h1.buttonHeader').click(function() {
// Get data attribute from clicked header
var correspondingDiv = $(this).attr('data-divider');
// Hide any open 'myDivider' dividers
$('.myDivider').hide();
// Display the corresponding divider
$(correspondingDiv).show();
})
})
I don't really understand why you're using the href attribute.
Edit: JSFiddle.
Edit: I've removed the loop as it wasn't necessary.
In my HTML I have a content div that contains articles created by a php script and handled with JQuery and Javascript. With Javascript I collect those articles into an array with the 'getElementsByClassName' function.
The scripts and HTML I'm writing here are simplified. I need this array because I'm trying to make that if the length of the array is larger than 10, only 10 articles are displayed per page. So page 1 will be index 0 to 9 of the array, page 2 index 10 to 19, etc.
Now,
Take this html code.
<body>
<div id="content">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</content>
</body>
And this Javascript code.
$.post("getarticles.php",{ page:"home" } ,function(data){
//place the content
document.getElementById("content").innerHTML = jQuery.trim(data);
//put elements in array
arrArticles = document.getElementsByClassName("article");
alert(arrArticles.length);
document.getElementById("content").innerHTML = "";
alert(arrArticles.length);
})
The first alert gives me "3", which is correct.. But the second alert gives me "0". Why is the array losing it's elements after the elements have been put in it?
By the way, the 'data' variable is a string of HTML passed on by a php script.
For example: In the php script I have the code
echo "<div class="article"><p>Article 1</p></div><div class="article"><p>Article 2</p></div><div class="article"><p>Article 3</p></div>"
&
document.getElementById("contentWrap").innerHTML = "";
I know this is causing the problem, but I don't know why. Can anyone explain or provide an alternative?
Thanks in advance
getElementsByClassName() returns a dynamic array (actually a live NodeList) that will change dynamically if/when you modify the DOM. So, if you change the content with innerHTML and elements in that array are affected, the array will change automatically.
If you want to keep this list of elements and make it not be live (so it won't change when the DOM is changed), you can make a copy of the NodeList into a normal array (that is not dynamic) and once it is in a normal array, the references to the DOM elements will keep them from getting destroyed. It won't prevent them from getting changed if your code changes their contents, but it will keep them around even if your code caused them to get removed from the DOM.
One way to make a copy of the dynamic NodeList into a static array is like this:
// fetch dynamic NodeList
var items = document.getElementsByClassName("article");
// make static copy of NodeList into normal array
items = Array.prototype.slice.call(items);
Or, since your post is tagged with jQuery, you can just use jQuery in the first place which contains a static array of nodes that isn't affected by other changes in the DOM:
var items = $(".article");
It looks like document.getElementByClassName is returning a reference to the element array which is being updated when you change the mark up. Not sure why; perhaps somebody better informed than me can answer that.
Using jQuery to select the array worked for me:
var arrArticles = $(".article")
document.getElementsByClassName("article");
return [NodeList array], this array contain pointers to DOM elements
arrArticles = anotherArray;
this code do not create a copy of anotherArray, but it is make a pointer to values form anotherArray.
So when elements in anotherArray will be deleted, in arrArticles elements will dissapear also.
I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);
How can I change the contents of my paragraph as well as the contents of my list once the link was clicked. reference: http://dummyproto.atspace.co.uk/
once i click woven badges on the navigation carousel i want to change the contents of the p as well as the imaged displayed. Is that possible via javascript? Is it a great alternative rather than creating a bunch of html pages for every page which has the same layout but different contents.
I'm looking forward to detailed solutions.Thanks
You need to modify your HTML a bit first so the content you want to swap out is contained in a single element that is easily selectable (for example wrap a div with a unique class name or id around just the stuff you want to swap out). Then do something like this:
document.getElementById('whateverIdYouGaveTheDiv').innerHTML = "blah blah blah";
maybe you can try jQuery template.
or, change the html when the trigger is clicked by using .click() and .html()
like:
var target_html = "something you want";
$('#trigger').click(function() {
$("#content").html(target_html);
});
Personally, I'd make a div "card" for each of your carousel options containing any images or text you want to go with them. Then I'd set all of them but the first to display: none;. When another link in the carousel is clicked, I'd cycle through the "cards," setting them all to display: none except the one needed (which should have the same number in the order of cards as the carousel item you selected in the order of carousel items), which will be display: block; so that I don't have to store HTML into Javascript variables.