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
Related
I have an array set up that has something added to the array every time to drop a word into a bucket on the page. I'm trying to show and hide certain div's depending on how many objects are in the array.
My code is:
if (test > 5){
$(".moving").hide();
$("#done").show();
}
This works perfectly except when the page first loads. The div with ID #done is still showing when the page first loads and then goes away when the array gets it's first object. (Array starts empty)
In your css just add #done{display: none;} That way the div will not show when page first loads.
Or use #done{visibility: hidden;} if you just want the div not to be visible.
If you don't have access to the HTML code you could hide it in ready function :
$(function(){
$("#done").hide();
//Or
$("#done").css("display","none");
//The rest of code
});
Hope this helps.
Use : #done{display:none;} or #done{opacity:0;}
Later in code, whenever you want to display it, you may use js/css to change display to block or opacity to 1.
The following function will hide done div and show moving div when page
is ready after complete page is rendered:
$(document).ready(function(){
$("#done").hide();
$(".moving").show();
});
Similarly you can use load method in to run a function on page load. but be aware load method is executed before complete page
is rendered
In your current code, you can add the following at the very beginning of ready function,
$('#done').hide();
or
$('#done').css('visibility','hidden');
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().
I have an HTML table with a time column, whose values I want to change. However, when I do this within the document.ready(), DOM manipulation heavily affects my load time.
Is it possible to change the table column cell values before the DOM loads?
The code I need to use for the manipulation is -
var time_col = rows[i].cells[TimeColumnIndex];
//Calculate new values
var time_Str = getUpdatedValue(time_col.innerText);
//Set values
time_col.innerText = time_Str;
time_col.innerHTML = time_Str;
I would appreciate any suggestions that people have, I'm still trying to understand things related to DOM, so please feel free to tell me if this cannot be done.
EDIT 1:
The getUpdatedValue() function just gets the difference in the users timezone as compared to UTC and adds the required number of minutes.
I've tried commenting out each line to see which lines actually increase the load time, and I found that it was just the DOM manipulation that took time, namely the following lines
time_col.innerText = time_Str;
time_col.innerHTML = time_Str;
My HTML table has about 1500 rows, so I go through each row and change the value of the time column.
If for some reason, you need your code to run immediately after the table has been loaded, you can just place your <script> tag immediately after the closing </table> tag
<table>
<tbody>
<tr><td>A</td><td>B</td></tr>
</tbody>
</table>
<script type="text/javascript">
var tables = document.getElementsByTagName("table");
var tableAbove = tables[tables.length - 1];
</script>
You cannot run code that operates on the DOM before the DOM has loaded. Hopefully, it obvious to you why that would be the case as DOM elements that aren't loaded are not accessible to javascript yet.
The options you have available are as follows:
Locate your script in your page immediately after the part of the DOM that you want to modify. Since things are loaded in pure sequence, you can manipulate any part of the DOM that is physically located before your script in the HTML file.
Use document.ready() for your code and just operate on the table after the whole DOM is loaded.
Hide the table initially with CSS so it is not initally visible. Modify it using either of the above two methods and then when you are done modifying it, show the table. This prevents the table being visible before you've modified it.
If an ajax call is involved in fetching the data for the table, you can further optimize things by starting that ajax call BEFORE the DOM is loaded and just store it's result when it completes (if the DOM isn't yet ready). This parallelizes the two operations so that the ajax call is being fetched at the same time as the DOM is loading. Then, when both the ajax call has completed and the DOM has loaded, you can then insert the ajax result into the DOM.
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);
First of all I would like to say that while this is the first time i post here these boards have helped me much.
With that said, I have got a strange issue regarding AJAX and scripts.
You see, in my web application i used custome JS context menus. Now each of them menus is implemented with specific features depending on the object and if the object exists.
E.x : if we got an upper menu place holder but no upper menu the context menu will have one option which is "add menu".
But say we already have the upper menu the context menu will have different options such as "edit menu" etc...
so far so good, however, say we have an upper menu place holder and no menu and then we added the menu (still no refresh on the page) i need to generate a new context menu and inject it right? so i do just that along with the new menu i just built.
all that code goes into the SAME div where the old context menu script and upper menu place holder were so basicaly they are overwriten.
Now the menu itself is in HTML so it overrides the current code the JS however acts wierd and will show now 2 context menus the old one and the new one even though i overwrite it's code.
I need to some how get rid of the old context menu script without refreshing the page.
Any ideas?
P.S
all the JS are dynamicaly generated if that makes any difference (i dont think it does.)
Well after some head breaking i figured it out..
(the problem not the solution yet) this is the ajax function right?
$.ajax({
type: "GET",
url: "../../../Tier1/EditZone/Generate.aspx?Item=contentholder&Script=true",
dataType: "html",
success: function (data) {
$('#CPH_Body_1_content_holder').html(data);
}
});
now they function uses a page with an event handler, that event handler reutnrs the data as followed response.write(answer) it just hit me that when you use response.write it sends the code after it's been compiled and ran in our case at page Generate.aspx.
so the script will run but not in the page i intended it to run and because of that i cannot overwrite it... how silly of me.
what i think ill do it return the data as an actualy string and then and only then inject the code into the container div.
ill let you folks know if that works out.
cheers and thanks for the advice these forums rock.
No matter what anyone says, do not use EVAL. It's evil and will give you memory issues if used more than a few times on a page.
See my soluition here: trying to call js code that is passed back from ajax call
Basically, create a div with the ID of "codeHolder" and voila. You'll basically want to pass your HTML and JS back to the AJAX receiver (separated by a separator), parse it on the JS side, display the HTML and put the JS Code in your javascriptCode variable.
//Somehow, get your HTML Code and JS Code into strings
var javascriptCode="function test(){.....}";
var htmlCode="<html>....</html>";
//HTML /////////////////////////////////////////
//Locate our HTML holder Div
var wndw=document.getElementById("display");
//Update visible HTML
wndw.innerHTML = htmlCode;
//Javascript ///////////////////////////////////
//Create a JSON Object to hold the new JS Code
var JSONCode=document.createElement("script");
JSONCode.setAttribute("type","text/javascript");
//Feed the JS Code string to the JSON Object
JSONCode.text=javascriptCode;
//Locate our code holder Div
var cell=document.getElementById("codeHolder");
//Remove all previous JS Code
if ( cell.hasChildNodes() )
while ( cell.childNodes.length >= 1 )
cell.removeChild( cell.firstChild );
//Add our new JS Code
cell.appendChild(JSONCode);
//Test Call///////////////////////////////////////
test();
This code will replace all previous JS code you might have put there with the new JS Code String.
Thanks for the replies.
Dutchie - that's exactly what I did. now the thing is the HTML is properly overwritten (I didn't use append I overwrote the entire div) and yes the javascript just keeps on caching...
I tried to disable browser cache and still the problem persists i get multiple context menu per item the more I ran the ajax function...
Jan,
My AJAX function builds a div tag and script tags and places them into another container div tag in the page.
What's suppose to happen is that every time the AJAX runs the code inside the container div is overwritten and you get an updated version.
the div inside the container div is overwritten yet the script tags somehow are cached into the memory and now each time the out jQuery function calls the context menu i get multiple menus...
I don't think code is needed but I will post it tomorrow.
Any ideas?