Calling a PHP function without refresh

Question

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?

`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`** ? — Darren, Jul 28 '14 at 03:42
You can use javascript to convert. Try these [Convert BBcode jQuery](http://stackoverflow.com/questions/9210680/convert-bbcode-to-html-using-javascript-jquery) [BBCode to HTML](http://ufku.com/personal/bbc2html) — Arun Kumar, Jul 28 '14 at 03:46

score 0 · Answer 1 · answered Jul 28 '14 at 03:45

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

answered Jul 28 '14 at 03:45

Ajesh VC

635
5
13

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

You will be using Ajax.

Make the textarea post to where you want the other pages to load from (database or flat file).
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/

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 28 '14 at 03:46

Digits

2,634
2
14
23

FYI- I removed the personal commentary since it is not fitting for proper answers – charlietfl Jul 28 '14 at 03:57

score 0 · Answer 3 · edited May 23 '17 at 12:29

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.

score 0 · Answer 4 · edited Jul 28 '14 at 04:22

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.

Calling a PHP function without refresh

4 Answers4