Generating feed items that won't nest Divs - javascript

I'm working on this project at helpspread.com. Everything is almost completed, now I need to generate feed on the homepage for logged in users, so they can get live update of an item when it is posted.
I save the id of the last item they saw and use it to query database for items of ids greater than the saved id, since the ids are auto incremented in the MySQL database. After some few seconds, I do the same and write content to the page.
The page that does this interval query is an iframe, and writes to the parent frame based on the id of the div.
This would replace the content of the div if I don't dynamically change it's id after each query. So I came up with the idea of generating div id from the id of the last item seen from database
But the next problem is that they are nested. An example is this:
I have a page with
<div id='new-feed-1367862865'>new item goes here</div>
I have an iframe with this
<script type="text/javascript">
var output_feed="<div id='new-feed-1367862872'>next new item will come here</div>New";
parent.document.getElementById('new-feed-1367862865').innerHTML=output_feed;
</script>
At the end, I'd get something like this: Nested divs
<div id="new-feed-1367864332"><div id="new-feed-1367864461"><div id="new-feed-1367864581"><div id="new-feed-1367864701"><div id="new-feed-1367864821"><div id="new-feed-1367864942"><div id="new-feed-1367865062"><div id="new-feed-1367865182"><div id="new-feed-1367865302"><div id="new-feed-1367865422"></div></div></div></div></div></div></div></div></div></div>
This doesn't cause problems on viewing, but is there a better way to do this, that may just append data to a particular div, and not replace its content.

... that may just append data to a particular div, and not replace its
content.
Yes it is called appendChild().

Related

How to capture the displayed link in HTML (JavaScript) and pass to another HTML page as a variable?

I am building a website (and I am a novice) and the site has 2 frames. On the left side (frame 1), I have a list of links that when you click on a link it will load a page in frame 2 (right side). But the links are on the left side are actually the result of a query and will change.
Rather than hard coding a site for each link, I want to use one target page to display data. I want to use the link on the left side as a variable value to pass to the right side so I can use the link name in a query on the target page.
MyUniqueLink
Any help would be very appreciated.
In your first <iframe>, you can access the parent document like so:
// window.parent will be undefined if you are not in an iframe.
window.parent.document
Then, as spencer said, it would be easier for you to use document.getElementById("secondFrameId") to get to your second iframe.
Also, the onclick event might be a bit more suited to your needs.
So together the code would look like:
<a onclick="window.parent.document.getElementById('secondFrameId').src='http://example.com'">MyUniqueLink</a>
If you want to access the data in your <a>'s, you should start by giving them an id:
<a id = "myId" href="JavaScript:void(top.frames[2].location.href='Recap.html');" >MyUniqueLink</a>
Then you can grab their data using standard js:
document.getElementById("myId").innerHTML; // grabs MyUniqueLink
document.getElementById("myId").getAttribute("href"); // resolves to href value
Or accomplish the same using jQuery:
$("#myId").html();
$("#myId").attr("href");
If you are dynamically creating the <a>'s in the first place, you can also assign them an id at this point using newElement.setAttribute("id", "someNewId");.

Update the content of a div every so often

I have this code that updates the contents of a div every 5 seconds:
<script type="text/javascript">
$(document).ready(function(){
setInterval(sensor,5000);
});
function sensor(){
$("#ex2").load("http://localhost:8050/ss2");
}
</script>
The content is a table that shows the data of a database and it is constantly updated, the information is updated but at the moment these updates start it brings me the whole page inside the div in this way:
Does anyone know how I can solve this problem?
As for what I can see http://localhost:8050/ss2 is also the URL of your page to visit? You should create another page that only gives you the html of the table, then you can replace the original contents.
Or you should extract the table html from the data you have (not sure what it's code is to be able do this for you). Then create a node from that text and add it to you r DOM

jQuery extracting data using filter

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.

Matching a click element with corresponding hidden project div

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.

Whats make different in below Jquery code?

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);

Categories