i have a complicated PHP conundrum. I have a constantly updating table in my database (Lets call it TABLE) with multiple records being added a second, these results will be posted using PHP on a page (page.php) using AJAX.
The maximum amount of posts shown are 1 every three seconds, for which i have a relevancy algorithm. I don't know how to merge the jquery transitions with the constantly updated records from the table (Got by AJAX).The best i came up with isn't much better than a hack, and dosen't accomadate for an infinite number of posts.
Jquery:
$(#5).delay(1000).slideDown(700);
$(#4).delay(4000).slideDown(700);
$(#3).delay(8000).slideDown(700);
$(#2).delay(12000).slideDown(700);
$(#1).delay(16000).slideDown(700);
PHP:
Not required
HTML:
<div id='5' class='post'></div>
<div id='4' class='post'></div>
<div id='3' class='post'></div>
<div id='2' class='post'></div>
<div id='1' class='post'></div>
I don't know what to do with AJAX.
Any help would be greatly appreciated,
thanks
If your question is simply how to slidedown the newest appended div, try this:
HTML:
<div id="updatePanel">
<div id='div5' class='post'></div>
<div id='div4' class='post'></div>
<div id='div3' class='post'></div>
<div id='div2' class='post'></div>
<div id='div1' class='post'></div>
</div>
Note: id attributes starting with numbers are invalid.
jQuery
setInterval(getData, 3000);
function getData() {
// call ajax, get data.
// success: function () {...
var id = parseInt($("#updatePanel div:first").attr("id").replace("div", "")) + 1;
$div = $("<div></div>").attr("id", id)
.addClass("post")
.text(dataFromAJAX)
.css("display", "none") // change this to be a class - this is just to make it clear.
.prependTo("#updatePanel")
.slideDown();
}
Example fiddle
I'm not sure, but is this basically checking for new posts every three seconds, and then displaying them with a slide down?
If so, once you've pulled the new posts with ajax, append/prepend the code to a wrapper container, preset to div to hidden, and then slide it down.
I can help with code if this is what you want but you'll need to post your ajax so I can get a better idea.
Related
A bit complicated, but ill do my best to explain my question.
I have a main file, dashboard.html.
Within that I have a jQuery function to load the mysql_query every 15sec to get the 15 or so variables that I need. (This is a financial/sales webapp...the sales agents want near realtime updates of the sales, orders, $earned..etc) which are displayed in a #div with multiple listitems contained within. No issues with this with the approach that every 15sec, query, then entire div is updated all at once. Because of this I have not attached an Jquery effect (namely fadeIn/fadeOut) to it, as then the entire div is constantly fading. Not the visual effect I would like, but as it stands, it works.
My Goal: To be able to do the mysql_query every 15sec. Grab the variables (which Im already doing currently. But now, I would like to be able to update ONLY the ListItem that has changed and attach the fade effect to just that item, not the entire #div as a whole.
What Im trying to avoid is separating out the query to 15 separate querys, as that obviously that is not efficient.
Hopefully that makes some sense to everyone. Code can be provided, but I dont think it will help at this point .. I need to understand what approach I need to go to develop the correct code. Thanks everyone for your anticipated help.
EDIT: Im adding a bit of code to help clarify where I stand:
dashboard.html
var auto_refresh = setInterval(function (){
$('#order_jq').load('stats_count.php')
}, 15000); // refresh every 15 seconds
and then in the body:
<div class="span8">
<div id="order_jq" class="centerContent">
Patiently loading stats ...
</div><!-- End id="ortder_jq -->
</div><!-- End .span8 -->
stats_count.php consists of (stripped down for clarity)
<?php
require "database/connect2.php";
$result = mysql_query( "SELECT .... NORMAL QUERY...NOTHING FANCY HERE")
while ($row = mysql_fetch_array($result))
{$orders = number_format($row['ordercount']);
$annual_order = number_format($row['annual_order']);
}
and lastly contained within stats_count.php I also include the list items:
<ul class="bigBtnIcon">
<li>
<a href="#">
<span class="icon entypo-icon-phone"></span>
<span class="txt">Orders</span>
<span class="notification"><?php echo $orders?></span>
</a>
</li>
<li>
<a href="#">
<span class="icon brocco-icon-mic"></span>
<span class="txt">Auburn</span>
<span class="notification blue"><?php echo $annual_order ?></span>
</a>
</li>
</ul>
-D
If you have multiple divs to be updated, you have to select them with their class ".class" not id "#id"..
To create mysql_query every 15 seconds, you need to make setInterval(function(),15000) where function must make ajax request to some page where to do this query..
I can advice you to use jQuery Ajax for those requests..
Without knowing more details about what format your data is being returned in its difficult to get into specifics but the general approach would be:
store current values into an object,
create a new object with your incoming values
cycle through the properties of the obect comparing incoming values
to existing values
update individual panels (via classes or more specific id's)
turn incoming values object into current values object in
preperation for next sql query
If i understand correctly, this could be done like this :
- all your listitems must have a class attribute let's say "list_items".
- after getting data with Jquery you can do a jquery.each() on the list_items, this way you can check if the value of that list item == the new value if not you update your list item.
I hope this answers a little bit your question.
I've searched high and low to see if this is possible and came up empty handed. Firstly, here's my code:
<div id="information" style="display:none">
</div>
<?php $seat = mysql_query("SELECT * FROM people WHERE seat='C3-24'"); $row = mysql_fetch_array($seat); ?>
<ul>
<li> <?= $row['first_name']; ?></li>
<li> <?= $row['last_name']?> </li>
<li> <?= $row['seat']?></li>
</ul>
</div><!-- information -->
<div id="c3-24" class="seat">
<a class="trigger" onClick="document.getElementById('information').style.display='block';"></a></div>
</div>
Basically I want to update the li list when I select a div id "c3-25". Now I know that having the WHERE seat="C3-25" will only output the database row of with that but I want to reuse this structure with other locations. From what I read this isn't possible. Ideally I want to have a list of divs (c3-24 to c3-50) and display the corresponding information when the anchor tag is clicked in the li fields.
I've tried putting multiple "information" divs but the information just end up stacking on top of one another.
Any help would be appreciated.
The problem is timing. There are two very separate execution contexts worth considering to understand your problem:
page construction (PHP) - the web server creates HTML to send to the browser;
user interaction (JavaScript) - the user's browser has rendered the page and the user is interacting with it.
Since page construction time happens way before the browser gets the information, it can't possibly implement user decisions (which happen later).
The typical solution to this kind of solution is to break up the application into multiple requests. As a best practice, it's also better to split out your JavaScript into a separate file and use a technique called delegation to reduce the amount of code.
Here's how I'd do it. First, send down the page structure (PHP/HTML):
<div id="information">
<!-- leave empty -->
</div>
<div class="seats">
<div class="seat">
<a class="trigger">c3-24</a></div>
</div>
<div class="seat">
<a class="trigger">c3-25</a></div>
</div>
...
</div>
Then set up the user interaction in a separate JavaScript file:
// setup a click handler on the parent 'seats' div
document.querySelector('.seats').addEventListener('click', function(e){
// check if the target of the click was actually an anchor tag with class=target
if (e.target.classList.contains('target')) {
var
// use the text of the anchor tag to get the seat
seat = e.target.textContent,
// create an XMLHttpRequest to asynchronously get the seat details
req = new XMLHttpRequest();
// handle server result by inserting details
req.onreadystatechange = function() {
if(req.readyState === 4){
document.getElementById('information').innerHTML = req.responseText;
}
};
req.open("GET", "seatdata.php?seat=" + encodeURIComponent(seat), true);
req.send(null);
}
});
Finally, implement a separate PHP script which gets the data for a specific seat (e.g. seatdata.php). Your script should get the seat URL parameter via $_GET['seat'] and use that in your query.
Per Madara's comment, don't use the mysql_query function directly since it has been deprecated, use something better instead.
Suppose you have a page in which users can create a new, unique div every time they click a button. The content of the div is mostly based on a common single template on the server side, but as the user can create several of these, the content DOMs ids of the resulting div have to be dynamically generated for each request, so as to be able to select each individual div and its content separately through jQuery afterwards (otherwise, since these divs are based on the same template, they would naturally always have the same DOM Ids, thus making it impossible to select them individually using jQuery)
Let's say you are building a windows system with javascript and jquery. On the server side you have one template that represents the "folder" window; this template has its own buttons, menus, etc, all of them being dom elements with their ID.
The user is then, on the page, supposed to be able to open several "folder" windows, each of which is assigned a different id on its creation, but the contents are the same, since the template loaded is the same for all of these windows. That is to say, provided the user opens 3 "folder" windows, the actual markup loaded in the page may look like the following:
<div id="firstWindow">
<div id="windowContainer">
<div id="windowHead">
stuff
</div>
<div id="windowBody">
<div id="windowInfoButton">stuff</div>
stuff
</div>
</div>
</div>
<div id="secondWindow">
<div id="windowContainer">
<div id="windowHead">
stuff
</div>
<div id="windowBody">
<div id="windowInfoButton">stuff</div>
stuff
</div>
</div>
</div>
<div id="thirdWindow">
<div id="windowContainer">
<div id="windowHead">
stuff
</div>
<div id="windowBody">
<div id="windowInfoButton">stuff</div>
stuff
</div>
</div>
</div>
As you can see windowContainer, windowHead, etc are duplicated as a result of reading from the same template. By itself this is already bad, but moreover I need to be able to select each windowContainer or windowHead using jQuery in such a way that manipulating them in firstWindow doesn't affect secondWindow, so simply switching all ids to classes wouldn't do it.
There are two approaches I can think to solve this:
1) Since I'm using PHP directly as the templating language, I could easily attach some code that generates a randomid or string and replace every DOM e.g. from this:
<div id="someFixedID" class="someClass">stuff</div>
To this:
<div id="<?=$someRandomStuff?>someFixedID" class="someClass">stuff</div>
The problem is that, well, if the template has some 20 or 30 DOM elements, that would greatly pollute it, and I'm trying to have as little code in the templates as possible to be able to quickly iterate on the design.
2) Using jQuery, it's possible to load the template via ajax, loop through every element in the div and change their ids on the fly before showing it. This would help keeping the templates clean, but I'm concerned this method may add an unnecesary overhead on the client side, since it may have to loop through some 20 or 30 elements.
Which method would make more sense in terms of maintainability and performance? Is there another way to approach this I didn't think of?
If I understand your problem you need to create a DIV dynamically with a unique id. Add DIVs with unique IDs using jQuery and then load content from server side in these DIVs. You need to synchronize your client side IDs generate code with server side template names/content.
For Example:
HTML:
<div id='container'></div>
<input type='button' name='create' value='create' id='create'>
jQuery:
$('#create').live( 'click', function(){
var num = $('div.mydiv').length;
var html = '<div id="myid' + num + '" class="mydiv">My Content ' + num + '</div>';
$('#container').append(html);
});
Try Here
May be not a perfect solution but hope it will give you a direction.
You could add a parameter in the URL of the Ajax call to get the template to use your client side generated key.
A very rough (not secure) draft:
On the server (template.php):
<div id='<?= $_GET["container_key"] ?>' class='main-container'>
....
</div>
Your ajax call:
var containerKey = Math.random();
$.ajax("/template.php?container_key=" + containerKey, ....)
Use something better than Math.random() (like timestamps, guids, ...) to prevent collisions.
I have an HTML div:
<div id='text_icon_<?php $i++; ?>' class="text_icon">Some Text</div>
that I print inside a foreach loop. I am using ajax to handle the click() event on it and change its text to Done!, so I have an output like:
<div class="text">Done!</div>
If I run the loop 4 times and I click on one of the divs (i.e. the one with class text_icon) then only first one is working while the rest of the divs are not working.
Update:
Your update indicates the below is not the problem, the IDs are unique.
Without your jQuery code it's hard to help you debug, so here's an example of how it can be done:
HTML:
<div id='text_icon1' class='text_icon'>Div #1</div>
<div id='text_icon2' class='text_icon'>Div #2</div>
<div id='text_icon3' class='text_icon'>Div #3</div>
<div id='text_icon4' class='text_icon'>Div #4</div>
JavaScript code using jQuery:
$("div.text_icon").click(function() {
// Within the `click` handler, `this` points to the
// DOM element. If you're kicking off some ajax something,
// you'll probably be doing something like this:
// Grab `this` to a variable we can access from the
// `success` closure
var theDiv = this;
// Do our call
$.ajax({
url: "your_url_here",
success: function() {
// It worked, udate the div
$(theDiv).text("Done!");
}
});
});
Live copy
Original answer:
If you're really using "DIV id='text_icon' class="text_icon..../DIV", e.g.:
<DIV id='text_icon' class="text_icon">....</DIV>
...then the problem is that the id is not unique. ID values must be unique on the page (reference). That would seem to fit with the symptom you describe, with "only the first one" working. Most browsers, when given invalid HTML with multiple IDs, will use the ID on the first element in document order and ignore the remaining ones.
If you don't need the div to have an ID at all, you can just remove it. Otherwise, just ensure the ID is unique, e.g.:
<DIV id='text_icon1' class="text_icon">....</DIV>
<DIV id='text_icon2' class="text_icon">....</DIV>
<DIV id='text_icon3' class="text_icon">....</DIV>
<DIV id='text_icon4' class="text_icon">....</DIV>
As far as I can tell, you are giving your divs the same ID. Targetting multiple elements with the same ID is impossible, the IDs need to be unique.
Try this:
$i = 1;
foreach ($array as $al) {
echo "<div id='text_icon_$i'>blablabla</div>";
$i++;
}
Of course, you'll need to modify your jQuery code too to include a potentially unlimited number of such IDs (I don't know whether performance will be good this way, but I remember doing it once for a comments list on a blog).
Another way would be to use a common class rather than unique IDs :).
Apart from the arguments about unique IDs, could it also be that the click handlers need to be hooked up again after the ajax call? If so, it'd be better to use .live rather than .click.
$("div.text_icon").live("click",
function(event) {
var icon = $(this);
}
}
I have following markup and javascript to sort some items. Items can be sorted within a block or across other blocks. It works but I have a problem in retrieving correct block ID after an item is moved from one block to another.
For example, if I move item 1 within "Block 1", I get "I am in Block= block_1" but if I move Item 1 to Block 2 I still get I am in Block 1.
But I want to make the block 2 as its parent container. I need to retrieve this id so that I can do some ajax and update the db accordingly.
Can you please help me correct this??
<div id="blocks_sortable">
<div id="block_1">
<h2>Block 1</h2>
<div class="items_sortable connectedSortable">
<div id="item_1">
<span>Item 1</span></div>
<div id="item_2">
<span>Item 2</span></div>
<div id="item_3">
<span>Item 3</span></div>
</div>
</div>
<div id="block_2">
<h2>Block 2</h2>
<div class="items_sortable connectedSortable">
<div id="item_4">
<span>Item 4</span></div>
<div id="item_5">
<span>Item 5</span></div>
<div id="item_6">
<span>Item 6</span></div>
</div>
</div>
</div>
<script>
$("#blocks_sortable").sortable({ });
$(".items_sortable").sortable({
connectWith: '.connectedSortable'
, forcePlaceholderSize: true
, stop : function(event, ui){
alert("I am in block = "+$(this).parent().attr("id"));
}
}).disableSelection();
</script>
Thank you.
I suspect the problem is you are using the wrong event. Basically what I think is happening is that the stop event is firing too soon or for the wrong object.
I would read over the docs Here and see if there is a more appropriate event for what you are trying to do.
I think what you want is something like the "update" or "deactivate" events.
Both of these events will fire once for each "block" if you move an item from one "block" to the other.
Update will only fire once if moved within a block
Deactivate will always fire for all the blocks.
With update you can check if the event is firing in the "non-original" block by checking for ui.sender:
$(".items_sortable").sortable({
connectWith: '.connectedSortable',
forcePlaceholderSize: true,
update: function(event, ui){
if(ui.sender){
alert(ui.item.attr("nodeName") + " in block = " +
$(this).parent().attr("id"));
}
}
}).disableSelection();
Will alert the parent id ONLY when an item is moved to another block. The event will fire for both blocks, but the alert will only show for the "non-original" one.
If you're using AJAX to update info in a DB I suspect what you want is the event to fire for both blocks:
Once for the "original" which is now missing an element, and one for the "new" which has now gained an element.
I'm not too familiar with exactly what you are doing or jQuery UI, so I can't be more specific. Remember, the docs are your friend.
Hope this helps.
maybe its better instead of using the id attribute you identify the elements using their index.
so more like
alert('I am in block' + $(this).parent().index());
You can play safe and add a REL attribute which will hold the value of the appropriate parent id. You will need to add some code to maintain that REL attribute when you move elements around.