Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Retrieve value of class element from last child of div

    Ok, i'm building a support interface for my website. its to sensitive to send over websockets, so ive opted for usage of ajax. so far, i've got everything implemented except for the ajax request. what i would like to do is, get the timestamp value from the last message of the div, and use it in my ajax request to get new messages since this time. backend and everything is done, but now i'm a bit stuck.

    here's my html for reference(or a basic representation of what it would look like if it wasn't generated by javascript). note this is the backend admin interface. the front end interface is similar in design, but uses websockets to notify the client when they need to send the ajax request, so im only using this taxing, every 5 seconds model on the backend.

    HTML
    Code:
    <div id="tabs-number" class="support-container">
    	<div id="#thread_number" class="support-message">
    	
    	</div>
    </div>
    <hr class="five">
    <text area class="support-reply" id="#reply_number">
    </text area>
    here's the javascript which is where i'm stuck. can't figure out how to get the value of .achg of the last child of #thread_number
    Code:
    <script type="text/javascript">
    $(document).ready( function() {
    	getTicket('.$row["tickethash"].');
    	setInterval(getNewReplies('.$row["tickethash"].'),5000);
    });
    
    function getNewReplies(tofetch)
    {
    	var timestamp = $("#thread_number :last-child")//this will give me the last `msgdiv` of the respective thread. i need to then get the val of span .achg 
    	$.get('process.php?do=support&action=getnew&ticket='+tofetch+'&timestamp='+timestamp, function(data) {
    		var response = JSON.parse(data);
    		for (var i = 0; i < response.length; i++) {
    		var type = response[i].type;
    		if(type == 'nonew')
    		{
    			//no new messages
    		}
    		if(type == 'error')
    		{
    			var code = response[i].code;
    			var msg  = response[i].message;
    			if(code == '4041')
    			{
    				notifypeep('Error 4041: Ajax Rate Limiting Exceeded. Wait '+message+' seconds','true');
    			}
    		}
    		if(type == 'reply')
    		{
    			var color = response[i].color;
    			var name  = response[i].user;
    			var msg   = response[i].message;
    			var tstam = response[i].timestamp;
    			$('#thread_number').append("<div class=\"msgdiv\"><hr class=\"five\"><span class=\"user_name\" style=\"color:#"+color+"\" onclick=\"reply2('"+name+"')\" title=\"Click To Reply\"><u>"+name+"</u></span></br><span class=\"user_message\">"+msg+"</span></br><span class=\"achg clear\" data-livestamp=\""+tstam+"\">"+tstam+"</span><hr class=\"five\"></div>");
    			notifypeep(name+' replied to a support ticket', 'true');
    		}
    		
    	})
    }
    
    function getTicket(toget)
    {
    $.get('process.php?do=support&action=fetchall&ticket='+toget, function(data){
    		var response = JSON.parse(data);
    		for (var i = 0; i < response.length; i++) {
    			var type = response[i].type;
    			if(type == 'options')
    			{
    				var status = response[i].status;
    				$('#thread_number').append("<div class=\"msgdiv\"><hr class=\"five\"><span class=\"user_name\" style=\"color:#000000\"><u>System</u></span></br><span class=\"user_message\">This ticket is "+status+". you can close it by clicking <a href=\"javascript:void(0)\" onclick=\"closeTicket('"+toget+"'); return false;\">here</p></span><hr class=\"five\"></div>");
    			}
    			if(type == 'ticket')
    			{
    				var color = response[i].color;
    				var user  = response[i].user;
    				var msg   = response[i].message;
    				var tstam = response[i].timestamp;
    				$('#thread_number').append("<div class=\"msgdiv\"><hr class=\"five\"><span class=\"user_name\" style=\"color:#"+color+"\" onclick=\"reply2('"+user+"')\" title=\"Click To Reply\"><u>"+user+"</u></span></br><span class=\"user_message\"><b>Original Ticket:</b> "+msg+"</span></br><span class=\"achg clear\" data-livestamp=\""+tstam+"\">"+tstam+"</span><hr class=\"five\"></div>");
    			}
    			if(type == 'reply')
    			{
    				var color = response[i].color;
    				var name  = response[i].user;
    				var msg   = response[i].message;
    				var tstam = response[i].timestamp;
    				$('#thread_number').append("<div class=\"msgdiv\"><hr class=\"five\"><span class=\"user_name\" style=\"color:#"+color+"\" onclick=\"reply2('"+name+"')\" title=\"Click To Reply\"><u>"+name+"</u></span></br><span class=\"user_message\">"+msg+"</span></br><span class=\"achg clear\" data-livestamp=\""+tstam+"\">"+tstam+"</span><hr class=\"five\"></div>");
    			}
    		}
    		scrollSupport();
    		setTimeout(function() {
    			$('.achg').removeClass('clear');
    		},1000);
    	});
    }
    </script>
    so basically, my php support view is checking for all the open tickets, then loading every singe open ticket into a tabbed inteface with a script for each pregenerated.

    here's the code for the php as well though its not really necessary.

    PHP Code:
    public function SupportPage() 
    {
        
    $tabs $divs $scripts = array();
        global 
    $loggedInUser,$mysqli;
        echo 
        
    '
        <script type="text/javascript" src="a/js/tabulous.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function ($) {

                $(\'#tabs\').tabulous({
                  effect: \'scale\'
                });  
            });
        </script>
        '
    ;
        echo 
    '<h1>Support Interface 0.1</h1>';
        
    $query $mysqli->query("SELECT * FROM uc_support_tickets WHERE status='open' ORDER BY `user` DESC");
        
    $i 1;
        while(
    $row $query->fetch_assoc())
        {
            
    $tabs[] = '<li><a href="#tabs-'.$i.'" title="Help '.$row["user"].'">'.$row["user"].'</a></li>';
            
    $divs[] = '
                        <div id="tabs-'
    .$i.'" class="support-container">
                            <div id="#thread_'
    .$row["tickethash"].'" class="support-message">
                            
                            </div>
                        </div>
                        <hr class="five">
                        <text area class="support-reply" id="#reply_'
    .$row["tickethash"].'">
                        </text area>
                      '
    ;
            
    $scripts[] =
                        
    '
                        <script type="text/javascript">
                        
                        </script>
                        '
            
    $i++;
        }
        echo
    '<div id="tabs"><ul>';
        for(
    $j 0$j count($tabs); $j++)
        {
            echo 
    $tabs[$j];
        }
        echo
    '</ul><div id="tabs_container">';
        for(
    $k 0$k count($divs); $k++)
        {
            echo 
    $divs[$k];
        }
        echo
    '</div></div>';
        for(
    $l 0$l count($scripts); $l++)
        {
            echo 
    $scripts[$l];
        }



  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    A span doesn't have a value, it has HTML and/or text.

    So how about that?
    Code:
    var theValue = $("#thread_number :last-child .achg").text();

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Alternative solution is to add the timestamp to the #thread_number itself. That would be simpler and faster.
    Code:
    $('#thread_number').data('livestamp', tstam).append("<div class=\"msgdiv\">.....");
    Code:
    var timestamp = $("#thread_number").data("livestamp");
    Every time you append a msgdiv to the thread_number, it will overwrite the livestamp data, so you are sure the last timestamp is always set to the thread_number element..
    Last edited by glenngv; 05-16-2014 at 06:50 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •