I tried to develop a website which allows user to post status and comment each of the status.
So, each of the status will have a comment group which belongs to the status.
I apply jquery ajax with setinterval which will loop the jquery to retrieve the latest status and display it in my website.
However, when comes to comment. I tried to apply this to each of the comment group but the problem I met is when new status and comment group show in my website. Some of the javascript not triggered.
If my website have 100 status with their own comment groups which mean the website will have 100 setinterval function running. will it be a problem for performance? Is that any better ways to achieve this?
My code is in JsFiddle
http://jsfiddle.net/4mm4buzk/
<div id="Status">
<!-- Call this function for specific status because div no onload event -->
<script>
TriggerGetComment(1)
</script>
<!-- This will be adding in dynamically through ajax-->
<div id="ContainerForEachOfTheStatus">
<div style="display:none">1</div>Status/Message will be here.
<div id="Comment1">
<!-- Container for each of the comment -->
<div>
<div style="display:none">1</div>Comment Here</div>
</div>
</div>
So, the question that I want to ask is
- Is that any other way beside using setInterval to keep request to web server to check the new status or comments ?
- What is common ways that people used to solve such problem?
Sorry for my poor english. Thank you.
Related
I have a simple file based with html that looks like this:
<html>
<body>
<b>Faculty</b><br><br>
Dr Mcgee
<br>
Dr Else
<br><br>
<b>Values</b><br><br>
1
<br>
2
<br>
</body>
</html>
I'm new to the web end of things, and was wondering how I could go about doing this: When the user hovers over a piece of text that's under the Faculty column of my school (I'm not gonna link my schools page because if I do someone from my school will likely create this extension). I want it to show a ratemyproff rating.
I have no idea on how to do this, because well I don't really know what to search on google to do such a thing?
I know there are CSS overlays over images like such:
https://www.w3schools.com/howto/howto_css_image_overlay.asp
But in my case, I'm not guaranteed what professors will be listed (I just want to understand the basic process of doing such things).
I don't think I can use PHP as that would require users who I want to share this eventually with to also have a php/server side thing installed. I guess I just don't know how to go about doing such a thing, and don't know what to search on the internet for it?
If the sites you are requesting data from aren't under your control you are very likely not going to be able to do this without a backend because of CORS, which basically prohibits site A from loading in data from site B. Site B would have to give you special permission. You can read about that here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
However, if you are able to access the pages, or you decide to use a backend for this, the term you are looking for is ajax.
A rough outline of what your script might look like is:
Give these school elements a classname.
Also add data attribute to these elements to store data needed to get the information you are looking for (e.g. a url or a school name or id).
In the JS, set up a trigger so that when something with that classname is hovered over, an ajax request is made to a url to get the data you are looking for.
If the ajax request is successful, show the data you want to show in a container set up on the page.
As far as setting up the container to show, it would probably be simplest to add an empty container for each listing which will then be populated with data.
If you are new to all of this, I would suggest using jQuery. You can find the ajax documentation here: http://api.jquery.com/jquery.ajax/
First Step:
Use something to get the text and store in a javascript variable when hovered over the text that is searchable,
To do this put the text in a single node like <span class="searchable">This text is searchable</span>.
You can do something like this to get node value http://jsfiddle.net/5gyRx/
Second step:
Add an empty node <div class="data"></div> aboslutely positioned inside the container div which will be used to show fetched details about that text.
Third step:
Use JavaScript/jQuery to fire an Ajax call with the text you got from the first step and populate the empty node created earlier with this data.
For example I have the arrangement of HTML like this:
<div class="container">
User Without
<div id="comment">
This comment.. //This will be replaced automatically
</div>
Name User
<div id="comment">
This comment..
</div>
</div>
I only allow users to comment using blogger account and Anonymous. If there are users commented using a URL other than the one I want, then the comment content will be replaced automatically with javascript or jquery.
For example:
$("#comment").html("You may only use the commenting blogger account and Anonymous")
or
document.getElementById("comment").innerHTML="You may only use the commenting blogger account and Anonymous";
Sorry if the question is a bit confusing. But I really want the code to be installed on my blog. Please help if anyone can. Thank you..
I had help with my previous question to be able to create changing navlinks with my navbar with JavaScript. Now I need to make the buttons be created automatically within the same JavaScript. This is what I had, this is what the code creates, with CSS and html output. http://jsfiddle.net/k35wawyg/2/
What Should Happen
What should happen is the buttons appear above each other in the top right, but it seems that it doesn't work. Also, the buttons should be linked with the JavaScript src that would be inside the HTML with
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js">
</div>
What Actually Happens
As you can see in the JSFiddle, they are under the NavBar, across from each other, and clicking it will make it output a console error with:
Uncaught ReferenceError: execFunction() is not defined
Please help. I rewrote the question due to a JSFIDDLE request.
I think you had a number of problems in your fragment. I have modified the code and here is a new jsFiddle that now seems to work. Because there were so many things I changed, I can't list them here but if you compare the new code to your existing code, hopefully it should become clear.
jsFiddle
Probably the biggest change was the way that the functions were invoked:
<a onclick="execFunction2();">
I'm trying to add 3 buttons to the header of a mobile web-app i am making with jQuery.
I am able to make 2 buttons but as soon as i put the 3rd on the header the first dissapears :/
i tried the answer in this question: Adding many buttons to header in JQuery Mobile
however for some reason jquery style's will not apply to div tags inside the header.
my header currently has this code:
<div data-role="header">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
</div>
<h1 id="usr"></h1>
Profile
</div>
and my webpage looks like this:
Does anybody have any ideas why this is happening?
please excuse any grammar/spelling mistakes: I am dyslexic and may have missed some in proof reading
okay so thanks to #TSV who pointed out i was using "data-roll" not "data-role"
that actually fixed my problem completely :)
Apologies if this question is flooded in the internet but nothing works in my favor.
I thought all you need to do is add the # + div id at the end of a url which matches the div you are going to.
I want when I got to a particular url, the view port goes to that div. For example:
www.foo.com/bar#5
Takes me to:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5">
<!-- You have found me! -->
</div>
I have not much experience with this part of html and wonder if JavaScript is involved?
Back in the days I used to use Dreamweaver and added an anchor tag was just a click of a button so never knew the actual work behind it.
My frontend is React; using Rails 5.
My react layout:
Normally you are correct but have in mind that if your react application doesn't use server side rendering, all you deliver to your users is a blank page in which react later renders the dom. The problem with this is, that when the browser loads the page initially and searches for an element with the id the document might be empty.