Javascript in PHP

[westman]

$string = 'Hello and hi';
$text ='
<a class="link" href = "javascript:void(0)" onclick = "document.getElementById(\'text_div\').innerHTML=\''.$string.'\';">Text</a>
';

This is code I am using to print $string in text_div.
What syntax (characters) can I not pass through this script?

Edited March 23, 2018 by westman

[Ingolme]

That code will work as long as the contents of $string do not have a single-quote because the single-quote will close the Javascript string. If you want to protect the code from that then you can use the addslashes() function before using $string.

[westman]

thank you so much.
Very helpful.

[westman]

Using the same script at the top of this post.
How do I send the info to a php file instead of a div?

[dsonesuk]

Depends on what is the reason you wish to send this info to a php file? for including? or AJAX type request for example?

[westman]

the idea is this

$id1 = '123';
$id2 = '123';
$text ='
<a class="link" href = "javascript:void(0)" onclick = "document.getElementById(\'test.php\').innerHTML=\''.$id1.'\';document.getElementById(\'test.php\').innerHTML=\''.$id2.'\';">Text</a>
';

then test.php will echo back information to the main page.

[dsonesuk]

This is AJAX, Whatever is echoed out in a external PHP page by using AJAX and is on a success,  placed anywhere you wish by referencing a specific element id.

NOTE: I don't know why you have 'test.php' as id ref?.

IF the test.php page is going to be as above you need to initiate request to this test.page using AJAX through an event such as onclick or onloading of page, the test.php should echo out $text. Then this echoed output is returned to main page and on success is place on page using using 'document.getElementById("placementID")';

IF you are planning on sending '123' to the test page you need to send as POST or GET, and read using $_POST['...'] or $_GET['...'], you then assign to the variables ($id1, $id2) these retrieved values, insert as you have, then echo output and process in main page as previously done.

See AJAX tutorials for examples.

 

 

[westman]

where do I start with this code?

[dsonesuk]

You start this JavaScript AJAX request on the main page, which is either triggered by onclick event or onload event.

[westman]

Before I go ahead and start coding this I need some advice on functionality.
I don't know if I should run everything from my main page or use AJAX to call on a second php file.

So this I what I am programming.
An inbox page like google. 

From pic1.PNG you can see my layout.
Once you click on the subject a div will show with the message history.

I will be taking all the info from my DB and creating more divs in php to dynamically echo to the popup div.
The problem...
JavaScript does not like my content ie ' " and line brakes.
If I have a second php file using AJAX would it work better?   

[dsonesuk]

1) IF you collect info from the database and dynamically echo into a pop-up, you will have to send a id of some type to retrieve the required info by reloading this single main page, get the id with $_GET or POST and process to get required info from database, to show in pop-up div, which must be set to show.

2) AJAX will do exactly the same using the same php code to process and get the required info, but this code is in a separate external php in which the id is sent to, this means the loading of page to process is done in this external page, and not in the main page, which the echoed output from external php file is returned to.

So produced the required result using (1), then if you want, make an AJAX version, as I said it is basically the same but separated , whichever you use, you would have find a way for it to accept quote and line break issues. either by escaping or encoding these characters instead.

[westman]

Thank you.
Then I am going to use 1 php file (main page) to do all the work.
There will be no page reloading as I am looping everything from the DB. first loop is message subject and inside that loop is a sub-loop to get the messages of all subjects.
I am sacrificing page load time for not reloading the page.  

[westman]

Last piece of the puzzle.
I have coded everything and It works well apart from one aspect "JavaScript in php" the title of this post.

this is what I have.
 

$text = strip_tags($text);
$text = str_replace("`", "\'", $text);
$text = str_replace("'", "\'", $text);
$text = str_replace('"', "\'", $text);
$text = preg_replace("/[\n\r]/","<br />",$text);

$text_div = $text;

$subject_all_show .= '
<div align="left" style="background-color:#FFF;">

<div class="link_black" style="padding-top:10px; padding-left:5px; float:left;">
<a href = "javascript:void(0)" onclick = "document.getElementById(\'mail\').style.display=\'block\';document.getElementById(\'fade\').style.display=\'block\';document.getElementById(\'subject\').innerHTML=\''.$subject.'\';document.getElementById(\'mail_text\').innerHTML=\''.$text_div.'\';">subject</a>
</div>
<div style="float:right; padding-top:10px; padding-right:5px;">
date
</div>
<div style="clear:both;"></div>

</div>
<br />
';

This works fine.

but when I change
$text_div = $text;
to
$text_div .= '
<div style="clear:both;"></div>
'.$text.'
</div>';
There is a problem.
How do I fix it as I need to add css to different divs in the while loop. 

 

 

[justsomeguy]

You should use heredocs if you need to define large blocks of text, that's what they're for.  It's a lot more common to use a template engine to do this kind of thing though.

http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

[westman]

I have looked through this page.
https://www.w3schools.com/php/php_ref_string.asp
which one should I use? 

[westman]

$text_div .= <<<HTML
<div>
$text
</div>
HTML;

This did not work.

Could you please give an example of what I should do.

[dsonesuk]

Just do it how you would normal write html and place php code where you require it

<?php
        $id1 = '111';
        $id2 = '333';
        $text = <<<HTML
                <div>
<a class="link" href = "javascript:void(0)" onclick = "document.getElementById('text_div').innerHTML='$id1';document.getElementById('text_div').innerHTML='$id2'">Text</a>
                </div>
HTML;
        echo $text;
?>

 

[westman]

That does not work for me and the <div> needs to add css to $text not to the <a>
In the end $text will have <div>'s and css inside.

Edited March 27, 2018 by westman

[dsonesuk]

Oh well if it doesn't work with no apparent explanation why it doesn't work, might as well give up then.

I was going by YOUR example, you can either have placed addition html (with or without php) within the heredoc or use php to echo between html elements of the page.

I don't understand divs and css inside?.

[westman]

I mean
 

$subject_all_show .= '
<div align="left" style="background-color:#FFF;">
<div class="link_black" style="padding-top:10px; padding-left:5px; float:left;">
<a class="link" href = "javascript:void(0)" onclick =document.getElementById(\'text_div\').innerHTML=\'<div style=\"color:FFF;\">'.$text_div.'</div>\'">Text</a>
</div>
<div style="float:right; padding-top:10px; padding-right:5px;">
date
</div>
<div style="clear:both;"></div>
</div>
<br />';

<div style="color:FFF;"> and $text_div need to be together in but it does not work. 

Edited March 27, 2018 by westman

[justsomeguy]

Seriously, just use a heredoc.

$subject_all_show .= <<<EOT
<div align="left" style="background-color:#FFF;">
<div class="link_black" style="padding-top:10px; padding-left:5px; float:left;">
<a class="link" href = "javascript:void(0)" onclick =document.getElementById('text_div').innerHTML='<div style=\"color:FFF;\">$text_div</div>'">Text</a>
</div>
<div style="float:right; padding-top:10px; padding-right:5px;">
date
</div>
<div style="clear:both;"></div>
</div>
<br />
EOT;

You have other problems which have nothing to do with strings and PHP.  For example, that onclick attribute is missing an opening quote, but you have a closing quote.  You probably also need to use HTML entities for some of those characters in that attribute, including anything you have inside $text_div, if you're going to try to jam everything into an onclick attribute.  You need to look at the output from PHP, the HTML that it prints, figure out what it's supposed to look like, what it actually does look like, and how to fix it.  Coming back saying "it doesn't work" doesn't help anyone fix the problems.  Look at the actual HTML being produced and figure out what's wrong with it, then how to fix it.

[dsonesuk]

I would seriously consider adding id or classes for styling, and create a function/s on main page for all innerHTML work, then call that function on click event with the required arguments to produce end html result.

[westman]

I fond the problem...
the closing div in <div style=\"color:FFF;\">$text_div</div> was not been seen by my browser.

So here is what I did to find the best way to get everything working.
I used 3 files. pm.php, pm2.php, and pmjs.js

//pm.php
<?php
$subject .= '
<div align="left" style="background-color:#FFF; height:40px; width:600px; padding: 5px; font-size: 16px; border-radius: 15px; box-shadow: inset 5px 0px 0px 0px rgba(42,42,42,.0); text-shadow: 0px 0px 0px rgba(42,42,42,.75); border: 2px solid #1695C4;">

<div class="link_black" style="padding-top:10px; padding-left:5px; float:left;">
<div class=\'pmbutton\' data-id=\''.htmlentities($idRow).'\' data-id2=\''.htmlentities($mainRow).'\'  >  '.$subjectRow.'  </div>
</div>
<div style="float:right; padding-top:10px; padding-right:5px;">
date
</div>
<div style="clear:both;"></div>

</div>
<br />
';
?>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="pmjs.js"></script>
    
  </head>
  <body>
<h1>Some text</h1>
<?php echo $subject; ?>
<div class='mail_text'></div>
  </body>
 </html>

// pmjs.js

$( document ).ready(function() {
    $('.pmbutton').click(function(e) {
	$('.mail_text').load('pm2.php', { id : $(this).data('id'),id2 : $(this).data('id2') });
});


  });

//pm2.php

<?php
$text = htmlentities($_REQUEST['id']);
$text2 = htmlentities($_REQUEST['id2']);

$text = '
<div align="center" style="padding:15px;">
<div align="left" style="padding:5px; background-color:#E0E0E0;">
<div style="float:left;">
<strong>name</strong>
</div>
<div style="float:right;">
<strong>'.$text2.'</strong>
</div>
<div style="clear:both;"></div>
' . $text . '
</div>
</div>
';

?>


<div>this is the output</div>
<div>div2  &amp; stuff</div>

<?php echo $text; ?>

works well.
Dsonesuk, Thank you for suggesting this as you can see I am using "htmlentities" to help.