I'm wondering if JavaScript has a writing format for using html elements that have both single and double quotes inside JavaScript functions. May be something like heredoc for javascript or it could be a function in jQuery.
I couldn't find a solution to my problem and will try to describe it below:
I am writing a web page on php. I have a page and there is a form in it. There is a jQuery function that appends select elements to a form. After appending, user selects some options and submit the form. (I really wanted to paste a whole code here to make it clearer, but there is a big amount of code which is not so nice, so I tried to simplify it for you, sorry for some bad code)
I have a php variable like this one (select has onchange event, showUser is a function with AJAX request):
$string = <<<EOT
<select name="sapak[]" onchange='showUser(this.value, document.getElementsByName("dereje[]")[0].value)'>
EOT;
And there are many option in between and of course closing </select>(I didn't write all the code to be shorter). A part of jQuery function that appends select to the form:
$(wrapper).append('<div> <? echo $string; ?> Del</div>');
My problem here is that in $string variable I have to use single and double quotes, and when it comes to append() function in jQuery I use quotes again. And all these give me error in browser's console Uncaught SyntaxError: Unexpected identifier, because of single quotes started at append(' , but ending at onchange=' . Is there are any smart solution for this? I thought that heredoc will be, I've googled and I think that actually there is no heredoc for javascript. May be some other formattings available?
This should work :
$(wrapper).append("<div> <? echo $string; ?> </div>");
$string = <<<EOT
<select name=\"sapak[]\" onchange=\"showUser(this.value, document.getElementsByName('dereje[]')[0].value)\">
EOT;
As #Imperative advises about character escaping
Related
I am trying to create a preview HTML division wherein I face a challenge.
When I try to get code from the textarea and print it in the HTML, I could not see the PHP code. Here's are my codes,
HTML Where the code from textarea will be printed
<pre id='pques'></pre>
jQuery code that will take value from textarea and put in the above HTML pretty print area:
jQuery(document).ready(function($) {
setInterval(function(){
$("#pques").html($("#eques").val());
}
});
Value inside the textarea with id=eques
What will be the output of the following php code?
<div class="code"><?php $num = 1; $num1 = 2; print $num . "+". $num1 ; ?> </div>
Someone kindly help me to achieve this. I want somewhat similar functionality to the stack overflow question preview stuff.
Thank you.
The simplest way to do this is to escape the angle brackets in the PHP open and closing tags as HTML entities:
<?php .. ?> becomes <?php ... ?> - PHP will not treat this as server code and will ignore it, but the browser will display < as < and > as >. This way you don't need JavaScript to do it, you can print it directly to the page. I would advise always HTML encoding any PHP code that is input on your site, and storing it with entities rather than executable code.
As you use jquery, you can achieve this as described here
This will escape the brackets as #kallum-tanton already pointed out.
I've run into a bit of a design problem. I have a webpage with a button. The page is written in php. The php outputs HTML that uses jQuery to initialize a button. When I click that button, a jquery dialog appears. The contents of the dialog are created from an object in PHP. and passed from a php object, but require formatting in Javascript, which is also passed from the php object.
A simplified version of the code would look like this:
$obj = new Custom_Object();
echo <<<EOD
<input type="button" id="button1">
<script>
$("#button1")
.button()
.click(function(){
var dialog = $("<div>" + {$obj->print()} + "</div>");
dialog.dialog();});
</script>
EOD;
with $obj->print() looking something like:
$return = "<p>Some HTML</p>";
$return .= "<script>Some Javascript to format the 'Some HTML' paragraph</script>";
return str_replace(array("\r", "\n"), '', $return);
My questions: (1) Is there some obviously better way of writing this code that just isn't occurring to me; and (2) how does the browser deal with the fact that there are two sets of \script\ tags nested inside of each other? (For some reason the code doesn't work and I am guessing that this is what is causing it, but I am not sure).
Answer to question 1:
You could just write your normal HTML and then insert the PHP values inside of it, without using a heredoc, like so:
<?php $obj = new Custom_Object(); ?>
<input type="button" id="button1">
<script>
$("#button1")
.button()
.click(function(){
var dialog = $("<div>"+<?php {$obj->print()} ?>+"</div>");
dialog.dialog();
});
</script>
Answer to question 2:
The second script tag is not being nested inside of the first, it just seems like it. The second script tag is actually being inserted in a completely different place in the DOM by jQuery after your code is interpreted.
If you think it may be getting interpreted incorrectly, you should try wrapping your JavaScript in CDATA tags and escaping quotes properly inside of the string generated by PHP.
You can achieve a lot more stability by simply "closing" your php tag and re-opening it later in the document.
So for instance, you could have:
<?php
$obj = new Object();
?>
<input type="button" id="button1">
<script>
$("#button1").button().click(function(){
var dialog = $("<div><?php $obj->print(); ?></div>");
dialog.dialog();
});
</script>
Just remember that what ever you output from $obj->print(); will need to have double-quotation marks escaped
Most modern browsers are able to work very well with more than 1 tag.
I'd also advise that you set the script type by changing your opening tag to .
So far on this piece of development I have built this page. As you can hopefully see, it suggests dragging the words on the right sidebar into the slots: http://francesca-designed.me/create-a-status/index.php
The words are pulled from a PHP array, and pressing the button loads some new ones in using AJAX.
I'm trying to implement Dragabilly as it has the functionality and look I want: http://draggabilly.desandro.com/
But I'm running into problems using it. To define which items are draggable, I need to add class="draggie" to each of those spans.
Here is the code that creates my spans:
<div class="words one">
<?php foreach (array_rand($poolOne, 4) as $key) {
echo "<span>".$poolOne[$key]."</span>";
}?>
</div>
So, to make this work I added the "draggie" classname:
echo "<span class="draggie">".$poolOne[$key]."</span>";
However, I have no idea why, but this breaks the WHOLE page. It seems that it can't call in the AJAX any more. But I am not sure, why would adding a simple classname to some PHP cause the whole page to break?
Here is a duplicate of the site code shown in the first link but with the addition of class="draggie" - you'll see that the page just shows up blank. Everything is the same apart from the addition of the draggie class.
http://francesca-designed.me/create-a-status/index2.php
I don't know if this would kill the entire page, but you're trying to nest double quotes.
echo "<span class="draggie">".$poolOne[$key]."</span>";
If there isn't something in PHP-land with the name draggie, PHP will throw an error and quit rendering.
I'm guessing that you have errors turned off, too.
You can either replace the double quotes around draggie with single quotes (class='draggie'), or escape the inner set of double quotes (class=\"draggie\"). I'd recommend just switching to single quotes.
I am trying to display code on a webpage, just as text, for the user to view. The code snippet is obtained from a database, input using a form, and put in a div using PHP. Jquery is then used to replicate the html of that div in another element. The code from the database will never be executed; I am basically just making notes.
Code example: alert('Hello'); (could be PHP or html)
What is the best way of displaying this as text, in my browser?
Filter it somehow using PHP as it is input using a form.
Use of HTML tags (pre, xmp tags, CDDATA).
Convert special characters with some javascript function.
combination of the above.
Example of use below.
PHP
$inputQuery="SELECT x FROM y";
$input = mysqli_query($dbc,$inputQuery);
$row = mysqli_fetch_array($input);
//no issues above, just used to clarify the issue. If $input is javascript code, the below doesn't work.
echo'
<div id="inputCode">'.$row["x"].'</div>';
JAVASCRIPT/JQUERY
var inputCode = $("#inputCode").html();
$( "#displayInputCode").html(inputCode);
Use htmlentities() to convert all the HTML special characters to entities, so they won't be executed:
echo'
<div id="inputCode">'.htmlentities($row["x"]).'</div>';
For HTML you can use htmlentities() which would protect against malicious data like <script> tags that include bad stuff; and for PHP you're already fine since echo'ing PHP code does not execute it (and browsers doesn't execute PHP code either).
Example code :
echo '<div id="inputCode">'.htmlentities($row["x"]).'</div>';
I am trying to parse a webpage and print out a table which is on the webpage. I am using php_simple_html dom parser. However, when I try to parse the table off the webpage, all the javascript commands to output the table get turned into comments within the php:
<html>
<script type="text/javascript" src="jquery.js"></script>
<?php
include 'crawling/simple_html_dom.php';
$html = file_get_html('http://uiucfreefood.com/');
$ret = $html->find('body', 0)->find('div', 10)->find('table',0); //gets to the table tag
echo $ret; // nothing is echoed out because the original webpage uses jscript commands to write the table to the page but these commands get turned to comments for some reason.
?>
</html>
When I inspect the element of the page where I am echoing the parsed information I am able to see that the table tag with all the info is in there but the jscript commands have been turned into comments. Is there a way for me to just grab the info and echo it out myself? I tried adding another ->find('tbody'); at the end of the parse command but it doesn't do anything. Any advice is appreciated. Thanks.
EDIT: You can try this code out yourself if you download the simple_html_dom.php and include it in your php file. Source: http://sourceforge.net/projects/simplehtmldom/files/
EDIT: Just noticed something really important. The javascript commands are commented out in the original webpage also. Instead, the original webpage is using a javascript function to print out the table which I do not have defined. Writing that function myself should fix the issue.
EDIT: yup, that worked.
Try using file_get_content instead of get HTML and see if that works. Honestly, depending on your needs, you should code your own parser. It is not that hard to write a parser for the table scan and display.
You will just need the following;
$array = split("<table>", $content);
$boolPlaceHolder = false;
and you can then set the placeholder to true when you encounter this way you can scan through the chars of the content and grab the table.
Hope this helps.