How to display text saved in DB, properly in HTML? - javascript

I am creating an application using PHP and MySQL.
In the DB, the data is saved in the following manner:
But, while displaying the result in HTML page, the result comes like this:
The issue might be because HTML needs tags like "<br/>", etc......
How can I display the result in actual format?
Here's the code section displaying the data:
<div class="com-text">
<?php echo $row['chatDesc'];?>
</div>
EDIT:
Also, I need to display the data by creating a div using jquery(dynamically). So how to display it in javascript format too?
html += '<div class="com-text">'+data.chat[i].chatDesc+'</div>';
$("#chat_list").append(html);

Use the below simple CSS
.com-text{
white-space: pre-wrap;
word-wrap: break-word;
}

You should use nl2br which inserts line breaks where newlines occur in a string
the javascript equivement of this function + your code:
function nl2br (str, is_xhtml) {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' :
'<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}
html += '<div class="com-text">'+nl2br(data.chat[i].chatDesc, true)+'</div>';
$("#chat_list").append(html);

You can try this.
<div class="com-text">
<pre> <?php echo $row['chatDesc'];?> </pre>
</div>

$orig = "I'll \"walk\" the dog now";
$a = htmlentities($orig);
$b = html_entity_decode($a);

You should use nl2br which inserts line breaks where newlines occur in a string
<div class="com-text">
<?php echo nl2br($row['chatDesc']);?>
</div>

Just use the nl2br() function to format it:
<?php
$mychat = nl2br($row['chatDesc']);
?>
Here is how you can do..
<div class="com-text">
<?php echo $mychat; ?>
</div>

use nl2br();
<div class="com-text">
<?php echo nl2br($row['chatDesc']) ;?>
</div>

Related

How to get content from external page where itemprop equals...?

I would like to get content from my app page on google play to my website. Right now I get all content that is included in the .content class. But I would like to get ONLY numbers of installs. This div looks like this:
<div class="content" itemprop="numDownloads"> </div>
Anybody knows how to get the itemprop="numDownloads" from the .content class?
This is my code right now:
blade.php
<?php echo file_get_contents($_GET['url']); ?>
Script
<script>
$(function(){
var contentURI= 'https://play.google.com/store/apps/someapp .content';
$('#response').load('grab.php?url='+ contentURI);
});
</script>
You can use regular expression for this in PHP or in javascript also.
Now I've implemented the PHP version, but with the pattern it could really easy to implement in javascript:
$siteContent = ''
. '<div class="content" itemprop="7"> </div>'
. '<div class="content" itemprop="5768"> </div>'
. '<div class="content" itemprop="69"> </div>';
$matches =array();
preg_match_all('/itemprop\s*=\s*[\'"]([^\'"]+)[\'"]/im', $siteContent, $matches);
var_dump($matches[1]);
The output is:
array
0 => string '7' (length=1)
1 => string '5768' (length=4)
2 => string '69' (length=2)

javascript function with 2 arguments is not working

DEscription :
I have a php script that displays the div on an html page
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id)"></div>';
Now when I click on this div the star_it function gets called and it works perfect...
The problem
I want to pass another argument in the star it function .. like this
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,'.$each_status['regno'].')"></div>';
or a simple alphabet if any like star_it(this.id,s)
but when I do so the function stops working as when I click the div the function does not gets called ....
I dont know why I am stuck and now my star rating system does not work... I have absolutely no idea what is wrong
Anyone ??
You should modify your string quote's like this :
<?php
$status = "second test";
echo '<div class="star_box" id="'.$id.'" onmousedown="star_it(this.id,'."'".$status."'".');" >Hello</div>';
?>
<script>
function star_it(foo1,foo2){
console.log(foo1);
console.log(foo2);
}
</script>
This example works for me.
So with your code :
<?php
echo '<div class="star_box" id="'.$id.'" onmousedown="star_it(this.id,'."'".$each_status['regno']."'".');" >Hello</div>';
?>
Here you go
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,\''.$each_status['regno'].'\')"></div>';
you forget to add \' before and after your string , the JS engine on the browser will treat your string as an undefined variable and the function will not work because of that .
//my English is not so good.
Try
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,\"'.$each_status['regno'].'\")"></div>';

Undefined variable from php to js

I've got a loop posting images from database.
I tried to give each photo div separate id.
When i tried to send it to script by onclick function
It shows that "$photoid is not defined "
I tried to print this variable in this first php script but it shows me all IDs, so shouldnt be empty or undefined...
$allphotos = mysql_query("SELECT * FROM photos ORDER BY id DESC");
while ($numphotos = mysql_fetch_assoc($allphotos)){
$photoinfo = mysql_query('SELECT * FROM photos WHERE link="'.$numphotos['link'].'" ');
$fetchinfo = mysql_fetch_assoc($photoinfo);
$photoid = $fetchinfo['id'];
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick=clicked($photoid)></div>';
}
Here goes script:
<script>
function clicked(photoid){
document.getElementById('photoid').style.backgroundColor = 'red'
}
</script>
Change this:
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick=clicked($photoid)></div>';
to this:
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick="clicked('.$photoid.');"></div>';
otherwise, the output is just clicked($photoid), all text.
Also change that:
function clicked(photoid){
document.getElementById('photoid').style.backgroundColor = 'red'
}
to that:
function clicked(photoid){
document.getElementById( photoid.toString() ).style.backgroundColor = 'red';
}
The answer above is working, but they forgot to add something,
instead of
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick="clicked('.$photoid.');"></div>';
copy this code
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" style="background-color:white" onclick="clicked('.$photoid.');"></div>';
add the style="background-color:white;" i think you can't access the .style in js if you didn't initialize it in your div. hope this will help
This is simply an escaping issue. The argument $photoid in your echoed function has to be escaped if it is a string. In your code above this:
onclick=clicked($photoid)
should be
onclick="clicked($photoid)"
if $photoid is a number or
onclick="clicked(\'$photoid\')"
if it is alphanumeric or a string

Reduce string length retrieved from database

I am fetching rows with title & its description from MySQL database.
I want to alter the strings that I got from the database.
<div class="title"><?php $row['title']?></div>
<div class="details"><?php $row['desc']?></div>
So please tell me, how to apply javascript to this content ($row['..'])? Means, how I can access those strings in Javascript?
If the string length is more than 50 characters, I want to limit the string & add dots (...) to it.
It is better to use mb_substr() than substr()
<?php
echo mb_substr($row['title'],0,50);
Source
You can do this using substr.
<?php echo (strlen($row['desc']) > 50) ? substr ($row['desc'] , 0, 50 ).'...' : $row['desc']; ?>
Why do that? Html has a css for that. you can fix the width and add the "text-overflow:ellipsis".
Try this:
<div class="fixedWidth title"><?php $row['title']?></div>
<div class="fixedWidth details"><?php $row['desc']?></div>
<style>
.fixedWidth{
width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
If you are working with non-ASCII strings and you want to manipulate those then substr() is wrong to use. Instead you should use multibyte string functions, like mb_substr() and others.
For that you must have mbstring-extension enabled for PHP. see http://php.net/manual/en/mbstring.installation.php
I would also not directly echo string for using javascript - you never know what chars could be there and then you should start to escape some chars to work properly with javascript.
Instead I would encourage you to use json_encode. This will escape properly all special and UTF8-chars.
PECL's json-extension must be enabled for json_* functions. See http://php.net/manual/en/json.installation.php
Of course if you are using Zend-framework, then proper would be use Zend_Json::encode()
<?php
$maxLength = 50;
$encoding = 'UTF-8';
$tail = ' ...';
$row['desc'] = (mb_strlen($row['desc'], $encoding) > $maxLength) ? mb_substr($row['desc'], 0, $maxLength, $encoding) . $tail : $row['desc'];
?>
<script type="text/javascript">
var rowData = <?php echo json_encode($row); ?>;
alert(rowData.desc);
</script>
why don't you try in directly php scripting insted of javascript.
you can make it as below.
<div class="title"><?php echo $title = strlen($row['title']) > 50 ? substr($row['title'], 0, 50)."..." : $row['title']; ?></div>
Then you can get the title in javascript as well.
$(document).ready(function(){
var title = $(".title").text();
});

problem with using getElementById().getValue in FBJS/Facebook !

I am using this code to generate hidden HTML code in Facebook :
echo "<div id=\"y257y\" style=\"display:none;\">".$fdesc."</div>";
And, I am trying to get this element back in JS using the following code
newVal=document.getElementById('y257y').getValue();
But, I am getting an error: Undefined
Can anyone kindly help me out ?
Thanks.
-
ahsan
Instead of:
newVal = document.getElementById('y257y').getValue();
try using:
newVal = document.getElementById('y257y').innerHTML;
Are you using any JavaScript library, like jQuery or Prototype? If you're using jQuery:
newVal = $('#y257y').html();
Other suggestions:
Use hidden form element:
echo "<input type=hidden id=y257y value=\"$fdesc\">";
and in JavaScript:
newVal = document.getElementById('y257y').value;
Or just output a <script> tag:
echo "<script>newVal = \"$fdesc\";</script>";
and there's no need to find the value in the DOM – it's already in JavaScript.
Try using a textarea? Since at least that may have a getValue method if you are really lucky:
$fdesc = str_replace('<', '<', $fdesc);
$fdesc = str_replace('>', '>', $fdesc);
echo "<textarea id=\"y257y\" style=\"display:none;\">".$fdesc."</textarea>";
newVal=document.getElementById('y257y').getValue();
newVal = newVal.replace(">", ">")
newVal = newVal.replace("<", "<")
But something tells me that is not going to work for you, facebook may not like it.
Seems easier just to do this:
$fdesc = <<<EOD
<div>Here is your html</div>
<p>And some more </p>
EOD;
$fdesc = str_replace("'", "\'", $fdesc); //Escape single quotes
$fdesc = str_replace("\n", "";', $fdesc); //Get rid of line breaks
echo "var fdesc = '$fdesk';";

Categories

Resources