Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Problemen met ckeditor

briella15 - 02/03/2016 12:11 (laatste wijziging 02/03/2016 17:30)

Nieuw lid

Voor het control panel van mijn website heb ik gekozen voor de opmaak van mijn teksten gekozen voor CKeditor http://ckeditor.com/air classic bw. Echter sinds ik de editor in de pagina heb staan submit het formulier pas na de tweede button klik. Wat ik ook probeer bij de eerste button klik gebeurt er niets. Ik heb ckeditor in de head sectie van de pagina:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<script type="text/javascript" src="/../js/ckeditor/ckeditor.js"></script>

<script type="text/javascript" src="/../js/ckeditor/ckeditor.js"></script>

Formulier:

php code - Bekijk de code zonder highlighting - Klap code in

<section id="content">
  <form action="/admin/pagina/update_pagina_content" method="post" name="wijzig_content_form" id="wijzig_content_form">
    <input name="pagina_naam" id="pagina_naam" type="hidden" value="<?php echo $pagina_content['pagina_naam']; ?>">
    <h2><?php echo $heading; ?></h2>
    <p>Gebruik het onderstaande formulier om de content voor de pagina <strong><?php echo $pagina_content['pagina_naam']; ?></strong> te wijzigen.</p>
    <br>
    <fieldset>
      <label>Pagina titel</label>
      <input name="pagina_titel" type="text" class="textfield" id="pagina_titel" value="<?php echo $pagina_content['pagina_titel']; ?>" tabindex="1" required>
    </fieldset> 
    <fieldset>
      <label>Pagina content</label>
      <textarea name="pagina_content" id="pagina_content">
        <?php echo $pagina_content['pagina_content']; ?>
      </textarea> 
    </fieldset>
    <br><br>
    <fieldset>
      <input name="update_button" type="submit" class="form_button" value="Wijzigingen opslaan">
    </fieldset>    
  </form> 
</section>
<script>
$(document).ready(function () {  
    CKEDITOR.replace( 'pagina_content' );
}); 
</script>

<section id="content">
  <form action="/admin/pagina/update_pagina_content" method="post" name="wijzig_content_form" id="wijzig_content_form">
    <input name="pagina_naam" id="pagina_naam" type="hidden" value="<?php echo $pagina_content['pagina_naam']; ?>">
    <h2><?php echo $heading; ?></h2>
    <p>Gebruik het onderstaande formulier om de content voor de pagina <strong><?php echo $pagina_content['pagina_naam']; ?></strong> te wijzigen.</p>
    <br>
    <fieldset>
      <label>Pagina titel</label>
      <input name="pagina_titel" type="text" class="textfield" id="pagina_titel" value="<?php echo $pagina_content['pagina_titel']; ?>" tabindex="1" required>
    </fieldset> 
    <fieldset>
      <label>Pagina content</label>
      <textarea name="pagina_content" id="pagina_content">
        <?php echo $pagina_content['pagina_content']; ?>
      </textarea> 
    </fieldset>
    <br><br>
    <fieldset>
      <input name="update_button" type="submit" class="form_button" value="Wijzigingen opslaan">
    </fieldset>    
  </form> 
</section>
<script>
$(document).ready(function () {  
    CKEDITOR.replace( 'pagina_content' );
}); 
</script>

Javascript

javascript code - Bekijk de code zonder highlighting - Klap code in

                $("#wijzig_content_form").on("submit", function(e) {
	e.preventDefault();
	var pagina_naam      = $("#pagina_naam").val(),
	    pagina_titel     = $("#pagina_titel").val(),	
	    pagina_content   = $("#pagina_content").val();
		
	var dataString       = 'pagina_naam=' + pagina_naam + '&pagina_titel=' + pagina_titel + '&pagina_content=' + pagina_content;
	
	$.ajax({
		url    : "/admin/pagina/update_pagina_content",
		type   : "post",
		data   : dataString,
		success: function(data){

		}
	});
});
            
$("#wijzig_content_form").on("submit", function(e) {
	e.preventDefault();
	var pagina_naam      = $("#pagina_naam").val(),
	    pagina_titel     = $("#pagina_titel").val(),	
	    pagina_content   = $("#pagina_content").val();
 
	var dataString       = 'pagina_naam=' + pagina_naam + '&pagina_titel=' + pagina_titel + '&pagina_content=' + pagina_content;
 
	$.ajax({
		url    : "/admin/pagina/update_pagina_content",
		type   : "post",
		data   : dataString,
		success: function(data){
 
		}
	});
});
 

PHP Controller

php code - Bekijk de code zonder highlighting - Klap code in

<?php
public function update_pagina_contentAction()
{
    $pagina_titel   = filter_input(INPUT_POST, 'pagina_titel', FILTER_SANITIZE_STRING);
    $pagina_content = filter_input(INPUT_POST, 'pagina_content', FILTER_UNSAFE_RAW);
    $pagina_naam    = filter_input(INPUT_POST, 'pagina_naam', FILTER_SANITIZE_STRING);
        
    $update = $this->page->update_pagina_content($pagina_titel,$pagina_content,$pagina_naam);
         
    $content_succes = new View('/admin/pagina_content_succes.php', compact('pagina_naam'));
    echo $content_succes->render();     
}
?>

<?php
public function update_pagina_contentAction()
{
    $pagina_titel   = filter_input(INPUT_POST, 'pagina_titel', FILTER_SANITIZE_STRING);
    $pagina_content = filter_input(INPUT_POST, 'pagina_content', FILTER_UNSAFE_RAW);
    $pagina_naam    = filter_input(INPUT_POST, 'pagina_naam', FILTER_SANITIZE_STRING);
 
    $update = $this->page->update_pagina_content($pagina_titel,$pagina_content,$pagina_naam);
 
    $content_succes = new View('/admin/pagina_content_succes.php', compact('pagina_naam'));
    echo $content_succes->render();     
}
?>

Volgens mij is dit gewoon allemaal goed, maar zoals gezegd submit het formulier pas na de tweede button klik. Alleen als ik het Ajax gedeelte oversla dus rechtstreeks via het formulier naar de Controller ga werkt het goed. Wat kan hiervan de reden zijn?

mod edit: codetags

2 antwoorden

Gesponsorde links

Rens - 02/03/2016 12:19
Crew algemeen		Graag even je code in code-tags plaatsen i.v.m. leesbaarheid. Kun je meteen de regelnr's weghalen, die komen er dan automatisch voor.

Thomas - 02/03/2016 17:38 (laatste wijziging 02/03/2016 17:38)
Moderator		Het hele idee van AJAX is toch dat je op dezelfde pagina blijft? On a side note: zijn pagina_naam, pagina_titel en pagina_content wel urlencoded? Waarom gebruik je niet $('#wijzig_content_form').serialize() voor je data-attribuut? Dit vraagstuk komt mij bekend voor. TinyMCE heeft waarschijnlijk zijn eigen routine voor het afhandelen van formulier submits. Dit proces wordt nu mogelijk "gekaapt" door jQuery. Waarschijnlijk is jouw javascript-snippet niet compatibel met de manier waarop TinyMCE werkt. Bedenk eerst wat je precies wilt en welke "flow" daarbij hoort. Google dan eens op TinyMCE/jQuery compatibiliteit en probeer het e.e.a. uit. Maak je gebruik van een developer console? Zie je je AJAX-posts voorbij komen in je netwerktab? Krijg je wellicht na de eerste keer JavaScript foutmeldingen waardoor JavaScript breekt en je formulier vervolgens "normaal" gesubmit kan worden?

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten