Using jquery to get .html() of elements in php table where mysql rows are "echoed" - only getting elements off first table

Question

I'm creating an event based website. For the sake of shortening the question, I'll give a minimal example.

I have an event.php page, with a dropdown menu which has each month in it. Underneath is a set of php include's one for each month, ie. (jan.php, feb.php). So when you click "January" in the dropdown, the jan.php shows.

Each event is it's own table, and each table has multiple rows, though for the sake of this I'm "echoing" 3 rows - showname, date, time.

Now my jquery is giving the desired effect of formatting the time & date (for time shortening it to 08:00:00 instead of 08:00:00.0000...etc, and for the date it's taking it from YYYY/MM/DD to DD/MM/YYYY.

My issue is - for each span class="._start", when it is copying the html of class="_startplace" (the formatted date/time), it will only copy the first one, and adds that into ._start on each table(event)

Ie. Table 1 : Bobs BBQ 08:00:00 12/02/2015

Table 2 : Suzy's Party 09:00:00 13/02/2015

Table 3, Table 4, etc...

So each table has it's own span._start, and I need each of those to be filled with the corresponding time ie Table 1's span class="_start" needs to say 08:00:00 Table 2's span class ="_start" needs to say 09:00:00. Currently, the span class="start" in Table 1 says 08:00:00, and the span class="_start" in Table 2 says 08:00:00

Any idea's on how to fix this? I'm basically looking for a way to "bind" the formatting, then "copying" to each specific table.

Each "month".php goes something like this (note shortened version)

var startdate = $('._startplace').html();
    var subyear = (startdate).substr(0, 4);         
    var submonth = (startdate).substr(5, 2);
    var subday = (startdate).substr(8, 2);
    var starttime = (startdate).substr(11, 8);
var subfull = (subday + "-" + submonth + "-" + subyear);
$('._start, ._end').html(subfull + " " + starttime);



$sql = "SELECT id, date, time FROM january ORDER by date ASC, time ASC";
$result = $conn->query($sql);




if ($result->num_rows > 0) {
    echo 'Show';

     // output data of each row
     while($row = $result->fetch_assoc()) {
     echo "<table class='col-lg-12' id='event-container_'>
    <th>
    <h1 class='event-title-words'>". $row["showname"]. "</h1>
    </th>
    <tr id='event-table_'>
      <td class='column'> 
        <span class='_startplace'>" . $row["date"]. " " . $row["time"]. "</span>
           <a href='http://example.com/link-to-your-event' title='Add to Calendar' class='addthisevent' id='addevent'>
                                    Add to Calendar
                                    <span class='_start'></span>
                                    <span class='_end'></span>
             </a>
        </td>
      </tr>
</table>
 }
     echo "Done";
} else {
     echo "0 results";
}

$conn->close();
?>

EDIT: Basically I have data from an sql table being outputted in table format through PHP, with each SQL TABLE row, creating a new HTML TABLE, I am then trying to target the cell of outputted data which is displayed in the HTML table with jquery, format that data (ie. substr & create new variables with substrings to switch from YYYY/MM/DD to DD/MM/YYYY), and then copy that formatted data into a span with a class of "_start". I can either only display the data in the "_start" of the first table, or it displays the formatted data from the cell in row 1 (sql row), in all "_start" spans on the page. I need each HTML table to act as 1 "event" (think calendar), and for the row of Date & Time outputted by PHP & SQL to be formatted to a particular format, and copied into a span that is enclosed within an "a href". Example of why I need date and time formatted https://addthisevent.com/

My coding is certainly not the best, so if you notice anything I "shouldn't" be doing, or know of easier ways to achieve my desired effect I'd be happy to hear it! Cheers!

score 1 · Accepted Answer · 2015-01-17 10:25:00Z

1

What you're doing here:

var startdate = $('._startplace').html();

is incorrect. When you use $('._startplace'), you're in fact getting all the matching elements. Then, calling .html() on that, will only return the HTML of the first element.

When you later use $('._start, ._end').html(subfull + " " + starttime);, you again have all matching elements, but then you're writing HTML to it (rather than reading from it), which means that all elements are updated.

Instead, you need to loop over all elements, for example like this:

$('td.column').each(function(){
    var x = $(this).find('.start_place').html();
    // do stuff with x
    $(this).find('.start, .end').html(x);
});

You use .each() to loop over all the table cells. Then, for each cell, you .find() the .start_place span, compute the right values, and then again .find() the .start and .end spans, and write the right values to them.

Here's a minimal working example:

$('td.column').each(function(){
    var startdate = $(this).find('._startplace').html();
    var subyear = (startdate).substr(0, 4);         
    var submonth = (startdate).substr(5, 2);
    var subday = (startdate).substr(8, 2);
    var starttime = (startdate).substr(11, 8);
    var subfull = (subday + "-" + submonth + "-" + subyear);
    $(this).find('._start, ._end').html(subfull + " " + starttime);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class='col-lg-12' id='event-container_'>
    <tr>
        <th>Some title</th>
    </tr>
    <tr>
      <td class='column'> 
          <span class='_startplace'>2015/02/13 17:15:00.0000</span>
          <a href='#' title='Add to Calendar' class='addthisevent'>
              Add to Calendar
              <span class='_start'></span>
              <span class='_end'></span>
          </a>
      </td>
   </tr>
    <tr>
      <td class='column'> 
          <span class='_startplace'>2015/03/05 09:30:00.0000</span>
          <a href='#' title='Add to Calendar' class='addthisevent'>
              Add to Calendar
              <span class='_start'></span>
              <span class='_end'></span>
          </a>
      </td>
   </tr>
</table>

edited Jan 17, 2015 at 10:25

answered Jan 16, 2015 at 23:07

user1544337

Sign up to request clarification or add additional context in comments.

2 Comments

Alan Hill Over a year ago

Thanks for the response. I tried your solution(also stripped way all of my scripts incase it was interfering with something) but it's still only targeting the first _startplace where the unformatted time is, grabbing it, and displaying it in the first ._start & ._end spans. The second and third table it leaves the ._start & ._end spans empty. Also, with your method, where I was using (startdate) in my jquery for formatting the time and date, is that replaced by (x), if so, do those variables go within the .each() function? I kept getting x is undefined.

user1544337 Over a year ago

@AlanHill I'm sorry my code fragment wasn't clear enough. I've added a minimal working example with an example table. If this doesn't work in your setup, your HTML must be incorrect. I noticed some strange things, like a th that's not in a tr, id attributes that occur more than once, stuff like that.

Collectives™ on Stack Overflow

Using jquery to get .html() of elements in php table where mysql rows are "echoed" - only getting elements off first table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related