ansaurus

Question

how to create an ajax pop pulling a data from db ?

Answer 1

A:

Check out this jQuery plugin: http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/

Oscar Kilhed 2010-02-11 18:51:30

Answer 2

A:

something like the following?

AJAX to get the description and when you're received the response create the description 'box'

var tipel = document.createElement('div');  
tipel.innerHTML = descr;`

add it to the page

var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`

and position it like:

tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`

getting absolute coords of an element can be tricky, look for a fn online.

for closing the tip, a suggestion would be placing tipel just under the mouse pointer (you already know it's over the link "mytitleelement", just shift the tip a little in the lines above), and then add an onmouseout event function to tipel that:

tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page

(you might get away with using this instead of tipel in those 2 lines)

poop-deck 2010-02-12 08:54:05

Answer 3

+1 A:

You need jQuery. Add stylesheet into <head></head> and javascript to any place in your page.

Sample style:

<style type="text/css">
  .description {
    visible: hidden;
    position: absolute;
    left: 0px;
    top: 0px;

    /* View */
    font-family: Arial,Tahoma,Verdana;
    font-size: 8pt;
    color: #bbb;
    background-color: #444;
    padding: 5px 7px;
    border: 1px solid #222;
  }
</style>

Javascript:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Add listener to links
  $(".some_class").click(function(e) {
    var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
    $(this).append(description);
    description.css("left", e.pageX-4);
    description.css("top", e.pageY-4);
    description.animate({ opacity: 'toggle' }, 400, 'linear');
    // Remove description, if user moved the mouse cursor out description
    description.mouseout(function() {
      $(this).remove();
    });
    return false;
  });
});
</script>

Change your code:

<?php foreach($task->result() as $row): ?>
  <tr>
  <td><a href="#" class="some_class" description="<?php echo $row->description; ?>"><?php echo $row->title; ?></a></td>
  </tr>
<?php endforeach; ?>

But the better way is to check out some good jQuery plugin..

Vladimir 2010-02-15 08:01:06

But description can't contain html-tags.

Vladimir 2010-02-15 12:29:49

ansaurus

tags:

views:

answers:

how to create an ajax pop pulling a data from db ?

related questions