8
Zawartość zmienia się w zależności od wybranej opcji .Konwersja kodu z wielu elementów div w celu użycia Ajax zamiast
Zamiast zestawu <div>, chciałbym użyć ajax. Niestety, nie jestem zbyt dobry w ajax, ale chcę nauczyć się go używać. Gdyby ktoś mógł wskazać mi właściwy kierunek, byłoby wspaniale.
Chciałbym utworzyć ogólną klasę Ajax, więc mogę jej używać w dowolnym miejscu w mojej strukturze. Następnie, jeśli to konieczne, rozszerz kolejną klasę.
możesz zobaczyć moje PHP na moim poprzednim SO pytanie: Change div according to dropdown boxes selected
HTML
<form action="" method="post" name="create" target="_top">
<fieldset>
<ul class="create">
<li>
<label class="label" for="character_name">Character Name:</label>
<input class="text" type="text" name="character_name" id="character_name" />
</li>
<li>
<label class="label" for="character_gender">Gender:</label>
<select class="character_gender select" name="character_gender" id="character_gender">
<option class="option" value="1">Female</option>
<option class="option" value="2">Male</option>
</select>
</li>
<li>
<label class="label" for="character_race">Character Race:</label>
<select class="character_race select" name="character_race" id="character_race">
<option class="option" value="1">Goblin</option>
<option class="option" value="2">Human</option>
<option class="option" value="3">Undead</option>
</select>
</li>
<li>
<label class="label" for="character_class">Character Class:</label>
<select class="character_class select" name="character_class" id="character_class">
<option class="option" value="1">Warrior</option>
<option class="option" value="2">Wizard</option>
</select>
</li>
<li>
<input class="submit-create-character" type="submit" name="create_character" value="Create" />
</li>
</ul>
</fieldset>
</form>
<div class="class-info female-goblin-warrior">
<div class="avatar-box">
<img src="Female.Goblin.Warrior.gif" alt="Female Goblin Warrior" />
</div>
Goblin description.<br />
Warrior Description
</div>
<div class="class-info male-goblin-warrior">
<div class="avatar-box">
<img src="Male.Goblin.Warrior.gif" alt="Male Goblin Warrior" />
</div>
Goblin description.<br />
Warrior Description
</div>
<div class="class-info female-human-warrior">
<div class="avatar-box">
<img src="Female.Human.Warrior.gif" alt="Female Human Warrior" />
</div>
Human description.<br />
Warrior Description
</div>
<div class="class-info male-human-warrior">
<div class="avatar-box">
<img src="Male.Human.Warrior.gif" alt="Male Human Warrior" />
</div>
Human description.<br />
Warrior Description
</div>
<div class="class-info female-undead-warrior">
<div class="avatar-box">
<img src="Female.Undead.Warrior.gif" alt="Female Undead Warrior" />
</div>
Undead description.<br />
Warrior Description
</div>
<div class="class-info male-undead-warrior">
<div class="avatar-box">
<img src="Male.Undead.Warrior.gif" alt="Male Undead Warrior" />
</div>
Undead description.<br />
Warrior Description
</div>
<div class="class-info female-goblin-wizard">
<div class="avatar-box">
<img src="Female.Goblin.Wizard.gif" alt="Female Goblin Wizard" />
</div>
Goblin description.<br />
Wizard Description
</div>
<div class="class-info male-goblin-wizard">
<div class="avatar-box">
<img src="Male.Goblin.Warrior.gif" alt="Male Goblin Wizard" />
</div>
Goblin description.<br />
Wizard Description
</div>
<div class="class-info female-human-wizard">
<div class="avatar-box">
<img src="Female.Human.Wizard.gif" alt="Female Human Wizard" />
</div>
Human description.<br />
Wizard Description
</div>
<div class="class-info male-human-wizard">
<div class="avatar-box">
<img src="Male.Human.Wizard.gif" alt="Male Human Wizard" />
</div>
Human description.<br />
Wizard Description
</div>
<div class="class-info female-undead-wizard">
<div class="avatar-box">
<img src="Female.Undead.Wizard.gif" alt="Female Undead Wizard" />
</div>
Undead description.<br />
Wizard Description
</div>
<div class="class-info male-undead-wizard">
<div class="avatar-box">
<img src="Male.Undead.Wizard.gif" alt="Male Undead Wizard" />
</div>
Undead description.<br />
Wizard Description
</div>
CSS
.class-info {
display: none
}
JavaScript
var buildCharacter = function() {
var character = {
properties: {
gender: '',
race: '',
class: ''
},
getCss: function() {
return (this.properties.gender + '-' + this.properties.race + '-' + this.properties.class).toLowerCase();
}
};
for (var prop in character.properties) {
character.properties[prop] = $('#character_' + prop + ' :selected').text();
}
$('.class-info').hide();
$('.' + character.getCss()).show();
};
buildCharacter();
$('.select').on('change', buildCharacter);
zacząłem tworzyć ogólną klasę Ajax, ale w rzeczywistości nie myśleć, że to zadziała za to, co chcę.
Ajax.php
<?php /* /application/modules/Ajax/Ajax.php */
/**
* Ajax
*
* The Ajax Class is used to get data from a Class and return the data.
*
*/
class Ajax
{
private $class;
private $method;
private $params;
/**
* __construct
*
* @access public
*/
public function __construct()
{
$this->params=$_POST; # Call params
$call=explode('->', $this->params['call']);
if(method_exists($call[0], $call[1]))
{
$this->class=new $call[0]; # e.g. controller->method
$this->method=$call[1];
unset($this->params['call']);
$this->parse();
}
else
{
throw new Exception('Method does not exist', E_RECOVERABLE_ERROR);
}
}
public function parse()
{
$param=array();
# Params in any order...
$ref_method=new ReflectionMethod($this->class, $this->method);
foreach($ref_method->getParameters() as $p)
{
$param[$p->name]=$this->params[$p->name];
}
$this->params=$param;
$result_data=call_user_func_array(array($this->class, $this->method), $this->params);
return $result_data;
}
} # End Ajax class.
Dzięki, ale to nie jest moje pytanie. – Draven