EvilZone

Programming and Scripting => Web Oriented Coding => : The Alchemist July 04, 2013, 06:36:25 AM

: Code preview using jQuery not working
: The Alchemist July 04, 2013, 06:36:25 AM
I've provided the three codes that does the job of displaying the syntax highlighted equivalent of an entered string. But, for some reason, they ain't working. Can anybody solve this problem?
index.html :
: (html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <script type="text/javascript" src="preview.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>Test Code Preview</title>
 </head>
 <body>
 <textarea id="pastecode" rows="20" cols="50" name="pastecode"></textarea>
 <br /><input type="text" id="language" name="language"/>
 <br /><input type="button" onclick="process()" value="Preview"/>
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <div id="previewcode"></div>
 </body>
 </html>

preview.js :
: (javascript)
function process(){
 $.ajax({
 url: "preview.php",
 type: "post",
 data: {
 pastecode: $("pastecode").val(),
 language: $("language").val()
 },
 success: function(data){
 $("#previewcode").html(data);
 //Or handle data with jQuery.parseXML()
 },
 error:function(jqXHR, textStatus, errorThrown){
 alert("The following error occured: " + textStatus + " " + errorThrown);
 }   
}); }

preview.php :

: (php)
<?php
header
('Content-Type: text/xml');
echo 
'<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
';

echo '<response>';
   if(!empty($_POST['pastecode']) && !empty($_POST['language']))
   {
       $code=$_POST['pastecode'];
       $language=$_POST['language'];
       include("geshi/geshi.php");
       $path     = '';
       $geshi    = new GeSHi($code, $language, $path);
       $geshi->set_overall_style('background-color: #ffffee;', true);
       $out = $geshi->parse_code();
       echo htmlentities($out);
   }
   else
   {
       echo htmlentities("<p>Nothing to display</p>");
   }
echo '</response>';
?>

Whats wrong with the code?
I'm filling up the textarea and the language box and pressing the preview button. But no response.
: Re: Code preview using jQuery not working
: Stackprotector July 04, 2013, 10:03:01 AM
I've provided the three codes that does the job of displaying the syntax highlighted equivalent of an entered string. But, for some reason, they ain't working. Can anybody solve this problem?
index.html :
: (html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <script type="text/javascript" src="preview.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>Test Code Preview</title>
 </head>
 <body>
 <textarea id="pastecode" rows="20" cols="50" name="pastecode"></textarea>
 <br /><input type="text" id="language" name="language"/>
 <br /><input type="button" onclick="process()" value="Preview"/>
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <div id="previewcode"></div>
 </body>
 </html>

preview.js :
: (javascript)
function process(){
 $.ajax({
 url: "preview.php",
 type: "post",
 data: {
 pastecode: $("pastecode").val(),
 language: $("language").val()
 },
 success: function(data){
 $("#previewcode").html(data);
 //Or handle data with jQuery.parseXML()
 },
 error:function(jqXHR, textStatus, errorThrown){
 alert("The following error occured: " + textStatus + " " + errorThrown);
 }   
}); }

preview.php :

: (php)
<?php
header
('Content-Type: text/xml');
echo 
'<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
';

echo '<response>';
   if(!empty($_POST['pastecode']) && !empty($_POST['language']))
   {
       $code=$_POST['pastecode'];
       $language=$_POST['language'];
       include("geshi/geshi.php");
       $path     = '';
       $geshi    = new GeSHi($code, $language, $path);
       $geshi->set_overall_style('background-color: #ffffee;', true);
       $out = $geshi->parse_code();
       echo htmlentities($out);
   }
   else
   {
       echo htmlentities("<p>Nothing to display</p>");
   }
echo '</response>';
?>

Whats wrong with the code?
I'm filling up the textarea and the language box and pressing the preview button. But no response.

Well, first off I suggest you go with json, as it is easier. Second off, you are putting htmlentities over your valid html data, it will kill it. And can you trace any php errors? maybe in the logs?
: Re: Code preview using jQuery not working
: The Alchemist July 04, 2013, 01:05:57 PM
Well, first off I suggest you go with json, as it is easier. Second off, you are putting htmlentities over your valid html data, it will kill it. And can you trace any php errors? maybe in the logs?
There are no PHP errors. What should I use instead of htmlentities() ? I cant print raw html in the XML file that the PHP code generates.
: Re: Code preview using jQuery not working
: Stackprotector July 04, 2013, 01:27:24 PM
There are no PHP errors. What should I use instead of htmlentities() ? I cant print raw html in the XML file that the PHP code generates.
Use json ? :D
: Re: Code preview using jQuery not working
: wookie July 04, 2013, 06:14:56 PM
If you want to go down the route of writing it yourself, that's fine, I'd probably do the same :D


But if you want something ready made that works, perhaps CodeMirror is what you want? [size=78%]http://codemirror.net/ (http://codemirror.net/)[/size]
: Re: Code preview using jQuery not working
: theifyppl July 05, 2013, 12:44:32 AM
There are a couple things wrong with it.

First off, you never included JQuery in your HTML file.  Do that with:

: (html)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Second, your selectors are wrong when you're getting the val() of the two textboxes.  You need to include the "#" like so:

: (javascript)
$("#pastecode").val();

Lastly, I took out the XML and htmlentities stuff from your PHP file.  That was screwing everything up.  That made everything work with my C++ example and what not.  Also, I can still print the raw html I put in the textarea, but there is no highlighting for it when it displays.  That's a separate problem on it's own though.  I also used the post() Jquery function instead of ajax(), but both would work.  I just use post() because it's easier in this case (it's the same thing as ajax() but simplified specifically for POSTs).  I went ahead and recreated the situation on my server, with all the changes made:

index.php

: (html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script type="text/javascript" src="preview.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>Test Code Preview</title>
 </head>
 <body>
 <textarea id="pastecode" rows="20" cols="50" name="pastecode"></textarea>
 <br /><input type="text" id="language" name="language"/>
 <br /><input type="button" onclick="process()" value="Preview"/>
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <div id="previewcode"><>
 </body>
 </html>

preview.js

: (javascript)
function process(){

pastecodeVal = $("#pastecode").val();
languageVal = $("#language").val();

$.post("preview.php", { pastecode: pastecodeVal, language: languageVal },
         function(data) {
           
            $("#previewcode").html(data);
         
      });

}

preview.php

: (php)

<?php
 
   
if(!empty($_POST['pastecode']) && !empty($_POST['language']))
   {
       
$code=$_POST['pastecode'];
       
$language=$_POST['language'];
       include(
"geshi/geshi.php");
       
$path     '';
       
$geshi    = new GeSHi($code$language$path);
       
$geshi->set_overall_style('background-color: #ffffee;'true);
       
$out $geshi->parse_code();
       echo 
$out;
   }
   else
   {
       echo 
"<p>Nothing to display</p>";
   }

?>


Works like a charm on my end.


(http://i43.tinypic.com/i3gnxj.png)
: Re: Code preview using jQuery not working
: The Alchemist July 05, 2013, 02:24:30 AM
There are a couple things wrong with it.

First off, you never included JQuery in your HTML file.  Do that with:

: (html)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Second, your selectors are wrong when you're getting the val() of the two textboxes.  You need to include the "#" like so:

: (javascript)
$("#pastecode").val();

Lastly, I took out the XML and htmlentities stuff from your PHP file.  That was screwing everything up.  That made everything work with my C++ example and what not.  Also, I can still print the raw html I put in the textarea, but there is no highlighting for it when it displays.  That's a separate problem on it's own though.  I also used the post() Jquery function instead of ajax(), but both would work.  I just use post() because it's easier in this case (it's the same thing as ajax() but simplified specifically for POSTs).  I went ahead and recreated the situation on my server, with all the changes made:

index.php

: (html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script type="text/javascript" src="preview.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>Test Code Preview</title>
 </head>
 <body>
 <textarea id="pastecode" rows="20" cols="50" name="pastecode"></textarea>
 <br /><input type="text" id="language" name="language"/>
 <br /><input type="button" onclick="process()" value="Preview"/>
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 <div id="previewcode"><>
 </body>
 </html>

preview.js

: (javascript)
function process(){

pastecodeVal = $("#pastecode").val();
languageVal = $("#language").val();

$.post("preview.php", { pastecode: pastecodeVal, language: languageVal },
         function(data) {
           
            $("#previewcode").html(data);
         
      });

}

preview.php

: (php)

<?php
 
   
if(!empty($_POST['pastecode']) && !empty($_POST['language']))
   {
       
$code=$_POST['pastecode'];
       
$language=$_POST['language'];
       include(
"geshi/geshi.php");
       
$path     '';
       
$geshi    = new GeSHi($code$language$path);
       
$geshi->set_overall_style('background-color: #ffffee;'true);
       
$out $geshi->parse_code();
       echo 
$out;
   }
   else
   {
       echo 
"<p>Nothing to display</p>";
   }

?>


Works like a charm on my end.


(http://i43.tinypic.com/i3gnxj.png)
Thank you sooo much!!! Its really appreciated.
: Re: Code preview using jQuery not working
: theifyppl July 06, 2013, 09:23:57 AM
Thank you sooo much!!! Its really appreciated.

Glad I could help!  Feel free to post any other web design questions you have here, I'll always try to get to them eventually.