Split strings

[EchoFool]

Hey

 

Im using a js split to seperate lines then limit the amount to just 4 using slice but it won't do it.

 

The data involved according to firebug is:

 

{"lastupdate":1293751302,"html":"<a style=\"color:#AA0000;\" href=\"profile.php?view=1\">Username<\/a>: test <br\/>"}

My split string is this:

document.getElementById(up.div).innerHTML += data.html.split("<br/>").slice(0,3).join("<br/>");

 

But its not working - any one got a clue where its going wrong?

[brianlange]

The split function will only return an array with two elements so slice (0,3) is not going to work.

Can you post the entire code or a url?

 

 

[EchoFool]

well i can give u the data involved so you try it :

 

div id is "chat"

 

var div = 'chat';

var html = 'username said hello five <br/>';

<div id="chat">

username said hello to you <br/>

username said hello to you two <br/>

username said hello to you three <br/>

username said hello to you four <br/>

</div>

 

 

This is it simplified for the above information:

document.getElementById(up.div).innerHTML += html.split("<br>").slice(0,3).join("<br/>");

 

1) First split on <br/>

2) From the split get array of 0 to 3

3) Join 0 to 3 with <br/> which we initially split on

4) The result should now show:

 

<div id="chat">

username said hello to you two <br/>

username said hello to you three <br/>

username said hello to you four <br/>

username said hello to you five <br/>

</div>

[brianlange]

Not sure why you are splitting, slicing and joining. It doesn't appear to be necessary.

This code will achieve the result.

document.getElementById(chat).innerHTML += html;

 

[EchoFool]

I do not see how - if you look my second post step 4 (the result) shows the first line is no longer present and there is still only 4 lines.

 

The code you posted would display all 5 lines.

[brianlange]

Gotcha. I would still just treat it as a string and not use array functions. This code should do it. I separated

the variables to make it easier to read but you could chain everything as well.

	
var div = 'chat';
var html = 'username said hello five <br/>';
var original = document.getElementById(div).innerHTML;
var index = original.indexOf('<br>') + 4;
var partial = original.substr(index);
document.getElementById(div).innerHTML = partial + html;

[EchoFool]

Okay its sorta improved but its not cutting the string properly.

 

Also the <br/> no longer seems to be in the divs so nothing is going to new lines aka its just a big block of text.

 

Edit:

Also it doesn't limit it to the number of lines that is put in the JS either

[brianlange]

Here's my example. Is it not giving the correct result? http://gonavygolf.com/test9.html

 

"Also it doesn't limit it to the number of lines that is put in the JS either"

 

Do you mean it should be dynamic? The text can grow or shrink and the js should accomodate accordingly?

[EchoFool]

It only shows 1 line - so when a new line comes in from a user only the one line shows no idea where the rest went.

 

This is what i got:

 

 

var data = eval('(' + this.responseText + ')');
                        
// start next timer
up.start(data.lastupdate);
                        
// fill chat
var original = document.getElementById(up.div).innerHTML;
var index = original.indexOf('<br>') + 4;
var partial = original.substr(index);
document.getElementById(up.div).innerHTML = partial + data.html;

[brianlange]

I don't think you need the eval function.

 

So if you alert the variable "partial" it doesn't display anything?

[EchoFool]

Yes partial is blank. Is this why its not working ?

 

The data for data.html comes from a PHP function on a seperate script which is collected to this JS script.

[brianlange]

You're doing an ajax call? I need to see more code or if you can tell me the entire problem (is this a chat system?) I can provide a general solution.

[EchoFool]

Sure thing, sadly as its new years eve i have no time today so check back tomorrow and ill have posted the code up okay ?

 

Thanks for your time helping and hope you have a fun new years night!

[EchoFool]

Okay here is the connection script:

 

function ajaxPost(url, postData, callback) {
    var req;
     try {
        req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch (e) {
        // browser does not have ajax support
    }
    req.onreadystatechange = typeof callback == 'function' ? callback : function() {
        if (req.readyState == 4 && req.status == 200) {
            if(typeof callback == 'string') callback = document.getElementById(callback);
            if(callback) callback.innerHTML = req.responseText;
        }
    };
    req.open('POST', url, true);
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.send(postData);

    return false;
}

 

And the script you have already seen:

 

    function Chat(div, url) {
        this.div = div;
        this.url = url;
        this.start = new Date().getTime();

        this.start = function(lastupdate) {
            lastupdate = lastupdate ? lastupdate : new Date().getTime()
            ajaxPost(this.url, 'lastupdate='+ lastupdate, function(up) {
                return function() {
                    if (this.readyState == 4) {
                        // success
                        if(this.status == 200) {
                            var data = eval('(' + this.responseText + ')');
                        
                            // start next timer
                            up.start(data.lastupdate);
                        
                            // fill chat
                            

                                var original = document.getElementById(up.div).innerHTML;
                                var index = original.indexOf('<br>') + 4;
                                var partial = original.substr(index);
                                alert(partial);
                                document.getElementById(up.div).innerHTML = partial + data.html;

                            //document.getElementById(up.div).innerHTML += data.html;
                            //alert(document.getElementById(up.div).innerHTML);
                        //alert(document.getElementById(div).innerHTML);
                        }
                        
                        // connection error
                        else {
                            // try again in .8 of a seconds
                            setTimeout(function(){
                                up.start(lastupdate);
                            }, 800);
                        }
                    }
                };
            }(this));
        };
    }
    
    var chat = new Chat('chat', 'backend.php');

 

 

Backend.php:

 

function getNewMessagesSince($timestamp) {
//get newest line (all of this stuff works so just removed it to keep it simple

        return array(
            'lastupdate' =>  time(),
            'html' => $row['Message'].' <br/>'
        );
}

while(! ($row = getNewMessagesSince($_POST['lastupdate']))) {
    //every half a second
    usleep(50000);
}