Author Topic: Code preview using jQuery not working (Read 1556 times)

The Alchemist · « **on:** 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 :

Code: (html) [Select]

<!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 :

Code: (javascript) [Select]

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 :

Code: (php) [Select]

<?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.

Stackprotector · « **Reply #1 on:** July 04, 2013, 10:03:01 am »

Quote from: The Alchemist on 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 :
Code: (html) [Select]
<!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 :
Code: (javascript) [Select]
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 :

Code: (php) [Select]
<?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?

The Alchemist · « **Reply #2 on:** July 04, 2013, 01:05:57 pm »

Quote from: Factionwars on July 04, 2013, 10:03:01 am

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.

Stackprotector · « **Reply #3 on:** July 04, 2013, 01:27:24 pm »

Quote from: The Alchemist on July 04, 2013, 01:05:57 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 ?

wookie · « **Reply #4 on:** 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

But if you want something ready made that works, perhaps CodeMirror is what you want? [size=78%]http://codemirror.net/[/size]

theifyppl · « **Reply #5 on:** 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:

Code: (html) [Select]

<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:

Code: (javascript) [Select]

$("#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

Code: (html) [Select]

<!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

Code: (javascript) [Select]

function process(){

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

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

}

preview.php

Code: (php) [Select]


<?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.

The Alchemist · « **Reply #6 on:** July 05, 2013, 02:24:30 am »

Quote from: theifyppl on 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:

Code: (html) [Select]
<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:

Code: (javascript) [Select]
$("#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

Code: (html) [Select]
<!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

Code: (javascript) [Select]
function process(){ pastecodeVal = $("#pastecode").val(); languageVal = $("#language").val(); $.post("preview.php", { pastecode: pastecodeVal, language: languageVal }, function(data) { $("#previewcode").html(data); }); }
preview.php

Code: (php) [Select]
<?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.

Thank you sooo much!!! Its really appreciated.

theifyppl · « **Reply #7 on:** July 06, 2013, 09:23:57 am »

Quote from: The Alchemist on July 05, 2013, 02:24:30 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.

EvilZone

News:

Author Topic: Code preview using jQuery not working (Read 1556 times)

The Alchemist

Code preview using jQuery not working

Stackprotector

Re: Code preview using jQuery not working

The Alchemist

Re: Code preview using jQuery not working

Stackprotector

Re: Code preview using jQuery not working

wookie

Re: Code preview using jQuery not working

theifyppl

Re: Code preview using jQuery not working

The Alchemist

Re: Code preview using jQuery not working

theifyppl

Re: Code preview using jQuery not working