Нужна помощь в отладке асинхронного вызова AJAX из формы в элементе div, чтобы обновить тот же div с обработанными результатами, основанными на данных формы - PullRequest
0 голосов
/ 06 июля 2011

Я использую сайт на базе Mediawiki.Сайт http://www.DragonFallRPG.com Видимый вопрос - это «Коробка с кубиками Ориона» в левой колонке сайта.

Не уверен, имеет ли это какое-либо отношение к этому, но здесь речь пойдет.У меня есть пользовательский div с именем «dice» и div с содержимым, который называется «result».Ниже div «result» находится форма для выбора количества игральных костей и количества сторон для этих игральных костей.Существует сценарий обработки, который проверяется на работоспособность для обеспечения рандомизированного результата, как если бы эти кости были брошены.Я думаю, проблема в вызове одной или нескольких функций.Я нашел метод AJAX для получения пользовательского ввода через 'get' где-то в сети и больше не представляю, откуда он взялся.Я включу файлы ниже.

dice_header.php  (include file for <head> portion of webpage)

<style>
<!--[if IE] -- long buttons / button width in IE fix>
<style>.button{width:1;}</style>
<![endif]-->
</style>

<?php $javafile = dirname(__FILE__).'/ajax_engine.js'; ?>

<script type="text/javascript" src= "<?php echo $javafile ?>" ></script>

<script type="text/javascript">
function submit_dice() {
    // Get form values
    var no_of_dice = document.getElementById('dice').value;
    var no_of_sides = document.getElementById('sides').value;

    // Construct URL
    <?php $handlerfile = dirname(__FILE__).'/handler.php' ?>
    url = '<?php echo $handlerfile; ?>' + '?no_of_dice=' + escape(no_of_dice) + '&no_of_sides=' + escape(no_of_sides);

var xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
    alert('Handlerfile URL = ' + url + '\r\n\r\n Escape URL = ' + escape(url) + '\r\n\r\n # of dice = ' + no_of_dice + '\r\n # of Sides = ' + no_of_sides);

    alert('url for ajax_get = ' + url);
    ajax_get (url, 'result');
}
</script>

Приведенный выше код является включением в заголовок index.php. Вызов функции для ajax_get, по-видимому, происходит там, где происходит сбой в процессе в приведенном выше коде.Я не знаю, требует ли http часть URL или нет.Я не знаю, требуется ли escape-URL или нет.Я не решаюсь продолжать работу со сценарием без руководства.

Следующий код - это блок div для виджета, который я пытаюсь создать

dice.php  (include file for my widget / div block)

<div id="result" style="text-align:center;
  word-wrap: break-word;
  width:100px;
        font-weight:bold; 
        font-size:large;
        border:1px blue solid; 
        margin:0;">

  <?php

  //$filename = dirname(__FILE__).'/ajax_engine.js';
  //$handlerfile = dirname(__FILE__).'/handler.php';

  if (file_exists($handlerfile)) {
      echo "Handler file path OK";
        echo 'alert(\'Handler file path = "' . $handlerfile . '"\');';
        die();
  } else {
      echo "BAD handler file path!";
  }
  ?>
</div>

<table border="0" cellspacing="0" cellpadding="0" style="margin:0; padding:0px;" >
<tr>
<td><select name="dice" id="dice" size="1" style="margin:0px;">
      <?php
        for ($i = 1; ; $i++) {
           if ($i > 20) {
               break;
           }
           if ($i == 1) {
               echo "<option value=$i selected>$i</option>\n";
           } else {
               echo "<option value=$i>$i</option>\n";
           }
        }
      ?>
    </select></td>
<td><select name="sides" id="sides" size="1" style="margin:0px;">
       <option value="4">d4</option>
       <option value="6">d6</option>
       <option value="8">d8</option>
       <option value="10">d10</option>
       <option value="12">d12</option>
       <option value="20" selected>d20</option>
       <option value="100">d100</option>
</select>
</td>
</tr><tr>
<td colspan="2"> 
<input type="button" onclick="submit_dice();" value="Roll Dice" style="width:100px;" />
</td></tr>
</table>

<!-- 
Psuedo vs. True Random Numbers
http://www.phpfive.net/pseudo-random_php_functions_and_truly_random_number_generators_article2.htm
-->

Далее следует JavaScriptдвижок, который я использую для запуска функциональности AJAX ... Mediawiki имеет свой собственный встроенный AJAX - но я не знаком с ним и попытался найти менее сложную рабочую версию, где я мог бы ее настроить, что привело к этой головной боли.Несколько всплывающих вызовов с предупреждениями были сделаны, чтобы помочь с отладкой, но я потерян, и ни одно из этих предупреждений на самом деле не вызывается ... Я не могу сказать, почему.

// JavaScript Document  "javascript_engine.js"
// Get base url
url = document.location.href;
var base_url = "http://";
alert('base_url = ' + base_url);

xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);

var ajax_get_error = false;

alert('ajax_engine.js called');

function ajax_do (url) {
// Does URL begin with http?
alert('url.substring(0, 4) = ' + url);
if (url.substring(0, 4) != 'http') {
    url = base_url + url;
}

// Create new JS element
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url;

// Append JS element (therefore executing the 'AJAX' call)
document.body.appendChild (jsel);

return true;
}

function ajax_get (url, el) {
// Has element been passed as object or id-string?
if (typeof(el) == 'string') {
    el = document.getElementById(el);
}

// Valid el?
if (el == null) { return false; }
alert(url.substring(0, 4));
// Does URL begin with http?
if (url.substring(0, 4) != 'http') {
    url = base_url + url;
}

// Create getfile URL
getfile_url = base_url + 'getfile.php?url=' + escape(url) + '&el=' + escape(el.id);

// Do Ajax
ajax_do (getfile_url);

return true;
}

Ниже приводится getfile.php

<?php           //getfile.php  --  used for addressing visual part of code

// Get URL and div
if (!isset($_GET['url'])) { die(); } else { $url = $_GET['url']; }
if (!isset($_GET['el'])) { die(); } else { $el = $_GET['el']; }

// echo 'alert(\'URL in getfile.php = \'); $url';

// Make sure url starts with http

if (substr($url, 0, 4) != 'http') {
    // Set error
    echo 'alert(\'Security error; incorrect URL!\');';
    die();
}

// Try and get contents
$data = @file_get_contents($url);

if ($data === false) {
    // Set error
    echo 'alert(\'Unable to retrieve "' . $url . '"\');';
    die();
}

// Escape data
$data = str_replace("'", "\'", $data);
$data = str_replace('"', "'+String.fromCharCode(34)+'", $data);
$data = str_replace ("\r\n", '\n', $data);
$data = str_replace ("\r", '\n', $data);
$data = str_replace ("\n", '\n', $data);
?>
el = document.getElementById('<?php echo $el; ?>');
el.innerHTML = '<?php echo $data; ?>';

Ниже приведен процессор форм, который генерирует результат случайных чисел для вывода / обновления AJAX.

<?php               // handler.php
/////////////////////////////////////////////////////////////////
//           Random Dice Value Generator v1.0                  //
//             http://www.dragonfallrpg.com                    //
//             Orion Johnson Copyright 2007                    //
//                                                             //
//     This script is used to create a random number based     //
//             values from the user's input                    //
/////////////////////////////////////////////////////////////////

/* double rolldice(int, int)
 * - generates a random value based on the numbers passed as an argument
 * - maximum iterations = 20 (can be changed in the user form)
 * - maximum number of sides per function call = 4, 6, 8, 10, 12, 20, or 100 (can be changed)
 *
 * Usage:  To generate a random total value as if one had thrown that many dice:
 * Note:   Future revisions may include the ability to add additional lines to the user form
 *         to mix types of simulated dice being thrown.
 *
 *   array $no_of_dice(x-1); array value "x" taken from user form
 *   var   $no_of_sides;     value taken from user form
 *   var   $total_value;     sum of values from entire array
 *   echo  $total_value;
 */

// Check variables
if (empty($_GET['no_of_dice'])) {
die ('<span style="color:red;">Number of dice value invalid!</span>');
}

if (empty($_GET['no_of_sides'])) {
die ('<span style="color:red;">Number of sides value invalid!</span>');
}

// seed with microseconds
function make_seed()
{
list($usec, $sec) = explode(' ', microtime());
return (float) $sec + ((float) $usec * 1000003);
}

function rolldice()
{
$total_value   = 0;  /* sum of values from entire array */
srand(make_seed());  /* seed random number generator  // 1,000,003 is a prime number */

/* start loop structure from 0 to $no_of_dice */
for($i = 0; $i < $_GET['no_of_dice']; $i++)
    {
$randnum = rand(1, $_GET['no_of_sides']);
$total_value = $total_value + $randnum;
    }
/* end loop */

/* print/return results to the screen */
// echo 'Total value for dice:  ' + rolldice();
return $total_value;
}

// Taken from http://www.sebflipper.com/?page=code&file=password.php
// for array iteration see also: http://www.php-scripts.com/php_diary/122799.php3

?>

Если существует более простой способ выполнить обновление div со случайным результатомна основе ввода формы, я все уши.Это было головной болью слишком долго для меня.Я не разбираюсь в кодах, просто знаю достаточно, чтобы повозиться и заставить некоторые вещи работать и понять большинство вещей, когда объяснено.

1 Ответ

1 голос
/ 11 июля 2011

Я не прочитал весь код, но начиная с MediaWiki 1.17.0 есть функция под названием ResourceLoader (если у вас более старая версия, вы должны обновить), которую вы можете используйте для этой цели.

Вы можете превратить весь код в расширение, чтобы организовать его в каталоге (скажем, extensions/DiceBox). Файл DiceBox.php в этой папке будет выглядеть следующим образом:

<?php

if( !defined( 'MEDIAWIKI' ) ) {
    die();
}

$wgExtensionFunctions[] = 'DiceBoxInit';
$wgHooks['SkinTemplateToolboxEnd'][] = 'DiceBoxOnSkinTemplateToolboxEnd';

$wgResourceModules['ext.DiceBox'] = array(
    'localBasePath' => dirname( __FILE__ ),
    'remoteExtPath' => 'DiceBox',
    'scripts' => 'ext.DiceBox.js',
    'dependencies' => 'jquery'
);

function DiceBoxInit() {
    global $wgOut;
    $wgOut->addModules( 'ext.DiceBox' );
}

?>

<?php

function DiceBoxOnSkinTemplateToolboxEnd() {
    $sides = array( 4, 6, 8, 10, 12, 20, 100 );

?>
        </ul>
    </div>
</div>
<div class="portlet" id="p-dicebox">
<h5>Orion's Dice Box</h5>
<div class="pBody">
    <div id="dice-result" style="display: none;"></div>

    <form id="dice-form">
        <select name="no_of_dice">
<?php
    for( $i = 1; $i <= 20; $i++ ) {
        echo '<option value="', $i, '">', $i, '</option>';
    }
?>
        </select>
        <select name="no_of_sides">
<?php
    foreach( $sides as $n ) {
        echo '<option value="', $n, '">d', $n, '</option>';
    }
?>
        </select>
        <input type="button" value="Roll Dice" id="dice-roll" />
        </form>

<?php

    return true;
}

Этот код выводит кодовое поле HTML на боковой панели и регистрирует следующий файл JavaScript (ext.DiceBox.js), который будет доступен на странице:

jQuery( document ).ready( function( $ ) {
    $( '#dice-roll' ).click( function() {
        $.get( mw.config.get( 'wgExtensionAssetsPath' ) + '/DiceBox/handler.php',
            $( '#dice-form' ).serialize(), function( data )
            {
                $( '#dice-result' ).html( data ).append( '<hr />' ).show();
            } );
    } );
} );

Этот код просто использует jQuery (который входит в комплект MediaWiki начиная с версии 1.16.0) для отправки запроса на сервер при нажатии кнопки и отображения результата в поле.

В файле handler.php нет места, куда выводится случайное число, поэтому вам нужно добавить echo rolldice(); перед ?>.

Наконец, чтобы расширения полностью работали, добавьте require_once $IP . '/extensions/DiceBox/DiceBox.php'; в конец LocalSettings.php.

...