0

I need to freshen up my userprofile editpage for my website.

My users suggested adding a "presentation preview" so they can see how it will turn out.

I have this textarea used

<textarea name="presentation">This is my presentation [b]with BBCodes[/b]</textarea>

Above that I have #preview and I would like it to update as I change something in the textarea with the bbCodes which gets "converted" to HTML by this PHP-command "bbCode($x)"

Basically, I want to show what gets typed into the textarea "live" with the converted version above the actual textfield

How may I accomplish this?

Improve this question
4
  • 1
    Ajax -> send text -> php script converts bbcodes to html tags -> php script sends back to ajax -> ajax success response appends text to DOM element -> profit ? Commented Jul 28, 2014 at 3:42
  • 1
    Why can't you just use Javascript to do these conversions? Commented Jul 28, 2014 at 3:43
  • You can use javascript to convert. Try these Convert BBcode jQuery BBCode to HTML Commented Jul 28, 2014 at 3:46
  • Take a look at the XMLHTTPRequest object Commented Jul 28, 2014 at 3:49

4 Answers 4

Reset to default
0

You need to Use Ajax. i think this must help you to solve your issues.
Follow tutorial of ajax on

http://www.tutorialspoint.com/ajax

http://www.w3schools.com/ajax/default.ASP

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I'm going to disagree with the answers below. If you do an AJAX call it should be once and it should get you a definition list of what conversions to perform. The actual conversions should be done on the client side, otherwise you're going to end up sending a request to the server with every keypress!

Here's an example of how you could do it:

// The array of regex patterns to look for
$format_search =  [
    /\[b\](.*?)\[\/b\]/ig,
    /\[i\](.*?)\[\/i\]/ig,
    /\[u\](.*?)\[\/u\]/ig
]; // note: NO comma after the last entry

// The matching array of strings to replace matches with
$format_replace = [
    '<strong>$1</strong>',
    '<em>$1</em>',
    '<span style="text-decoration: underline;">$1</span>'
];

$('textarea').on('keyup', function() {
    var preview = $(this).val().trim();
    // Perform the actual conversion
    for (var i = 0; i < $format_search.length; i++) {
        preview = preview.replace($format_search[i], $format_replace[i]);
    }
    // show the preview in your div
    $('#preview').html(preview);

});

Here's a demo fiddle. The replacement code is used from this answer.

My suggestion is that if you're going to use AJAX, use it to get the definitions for $format_search and $format_replace from a datasource rather than using it to parse the replacements.

Improve this answer

Comments

0

You will be using Ajax.

  1. Make the textarea post to where you want the other pages to load from (database or flat file).

  2. Have the other pages run a javascript loop that waits a few seconds then loads the contents of the file via ajax then displays it in the area you want it.

    It's not too hard with jquery

http://api.jquery.com/load/

Improve this answer

1 Comment

FYI- I removed the personal commentary since it is not fitting for proper answers
0

Try this code:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function myFunction(x)
{
    var text = x.value;
    $('#preview').show();
    document.getElementById('preview').innerHTML=text;
}
</script>
</head>
<body>
<div id="preview" style="display:none"></div>
<textarea name="presentation" onkeyup="myFunction(this)"></textarea>

</body>
<style>
    #preview{
    width:200px;
    height:auto;
    border:1px solid black;
}
</style>

Hope this is the answer to your question.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.