trends4media

Affichage des articles dont le libellé est Ajax. Afficher tous les articles

Probleme formulaire contact en ajax sujet

mardi 8 avril 2014

Bonjour a tous,
j'ai fait un formulaire en php avec de l'ajax et quand je ne mais pas l'ajax il m'envoie bien dans la bdd et par mail et quand je mais l'ajax sa ne marche pas. Voci le code :
(javascript avec ajax)
$(document).ready(function(){
$('#success').hide();
$('#load').hide();

$('#form').submit(function(){

valid = true;
if($('#nom').val()=='')
{
$('#nom').prev('.error').fadeIn(1000).text('Indiquez votre nom');
valid = false;
}
else
{
$('#nom').prev('.error').slideUp();
}

if(!$('#email').val().match('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i'))
{
$('#email').prev('.error').fadeIn(1000).text('Indiquez un email valide');
valid = false;
}
else
{
$('#email').prev('.error').slideUp();
}
if($('#message').val()=='')
{
$('#message').prev('.error').fadeIn(1000).text('Indiquez votre message');
valid = false;
}
else
{
$('#message').prev('.error').slideUp();
}

if(valid==true)
{
var nom = $('#nom').val();
var email = $('#email').val();
var message = $('#message').val();
var dataString = 'nom='+nom+'&email'+email+'&message'+message;

$.ajax({

type: 'POST',
url: 'contact2.php',
data: dataString,

beforeSend: function()
{
$('#load').fadeIn();
},

success: function()
{
$('#load').fadeOut();
$('#form').slideUp();
$('#success').slideDown();
$('#success').text('Formulaire envoyé');
}

});
}

return false;
});
});

(formulaire php)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Caveau du Terroir</title>
<link type="text/css" media="screen" rel="stylesheet" href="css/index.css" >
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900italic,700italic,500italic,400italic,300italic,100italic,300,100,500,700,900' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>

</head>
<body>

<header>
<div id="content">
<img src="img/1.jpg" alt="Image de backgroud" id="wallpaper">
<table id="menu">
<tr>
<td>
<a href="index.php">Tableau</a>
</td>
<td>
<a href="graphique.php">Graphique</a>
</td>
<td>
<a href="contact.php">Contact</a>
</td>
</tr>
</table>
</div>

</header>

<div id="content2">
<p><center>Contact</center></p>
<br>
</div>

<div id="content3">
<div id="success"></div>
<form id="form" action="contact2.php" method="post">
<label for="nom">Nom :</label>
<span class="error"></span>
<input type="text" name="nom" id="nom"/>

<label for="text">Email :</label>
<span class="error"></span>
<input type="email" name="email" id="email"/>

<label for="message">Votre message :</label>
<span class="error"></span>
<textarea name="message" id="message"/></textarea>

<input type="submit" id="submit" class="submit" value="Envoyer"/>
</form>

<div id="load"></div>
</div>

<br>
<br>

</body>

<footer>
<div id="content4">
<table id="menu2">
<tr>
<td>
<a href="rates.php">Mentions Légales</a>
</td>
</tr>
</table>
</div>
</footer>

</html>

(bdd PDO connection )
<?php

if(!empty($_POST) && !empty($_POST['nom']) && !empty($_POST['email']) &&
filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) && !empty($_POST['message']))

{
extract($_POST);
$nom = strip_tags($nom);
$email = strip_tags($email);
$message = strip_tags($message);

try
{
$bdd = new PDO('mysql:host=127.0.0.1;dbname=caveau', 'cave', 'cave') or die (print_r($bdd->errorInfo()));
$bdd->exec('SET NAMES utf8');
}

catch(Exeption $e)
{
die('Erreur:'.$e->getMessage());
}

$req = $bdd->prepare('INSERT INTO Contact (nom,email,message) VALUES (:nom,:email,:message)');
$req->execute(array(':nom'=>$nom, ':email'=>$email, ':message'=>$message));
$req->closeCursor();

$to = 'retropixeljura@gmail.com';
$subject = $nom.' vous envoi un message';
$message = nl2br($message);

$headers = 'From:'.$email."\r\n";
$headers.= 'MIME-version: 1.0'."\r\n";
$headers.= 'Content-Type: text/html; charset=utf-8'."\r\n";
mail($to,$subject,$message,$headers);
header('Location: contact.php');
}

else
{
extract($_POST);
if(empty($nom)) {echo 'Indiquez votre nom<br />';}
if(empty($email) ||!filter_var($email,FILTER_VALIDATE_EMAIL)) {echo 'Indiquez un email valide<br />';}
if(empty($message)) {echo 'Indiquez votre message<br />';}
}

?>

Merci de pouvoir m'aider

Créer un tableau en ajax sujet

Bonjour,

J'utilise plusieurs listes déroulante (listes liées en ajax) et après ma dernière liste je voudrais afficher un tableau avec les données de toutes mes listes.

Pour mes listes liées, je génère du code xml avec XMLHttpRequest et je me demandais quel serait le format de fichier le plus adapté pour faire mon tableau en ajax (texte, XML, HTML,Json).

ps: je ne connais pas vraiment JSON.

Merci pour vos réponse.

ScrollTop vers ancre après un chargement de contenu en Ajax sujet

vendredi 28 mars 2014

Bonjour,

Je voudrais pouvoir utiliser un scrollTop après un chargement de contenu en ajax.
Le problème est que la page se charge bien mais le scrollTop ne s'effectue pas...

Voila mon code :

Code:

1
2
3
4
5
6
7
8
9
10
<nav>
   <ul>
      <li><a href="mentions_legales.html" data-type="lien">Mentions Légales</a></li>
      <li><a href="#qui_sommes_nous" data-type="ancre">Qui sommes nous ?</a></li>
   </ul>
</nav>
<section id="main>
	CONTENU
	<div id="qui_somme_nous">CONTENU</div>
</section>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('a').on('click', function(){
	if($(this).data('type') == 'ancre'){
		ancre = $(this).attr("href");
		page = association_ancre_page[ancre];
		//verifie si l'ancre est appelé dans la page courante grace a un tableau associatif (une ancre correspond à une page)
		if(current_page != page){
			$.ajax({
				url:page,
				cache: false,
				success: function(html){
					$("#ajax").empty();
					$("#ajax").append(data);
					$("#ajax").fadeIn(900);
					if(typeof(ancre) != 'undefined'){
						$('html, body').animate({scrollTop: $(ancre).offset().top)}, 'slow');
					}
				}
			})
		}
		
	}
}

Voila donc comme je l'expliquais, le scrollTop ne veux pas se faire pour une raison inconnu...

Ps : Je précise que mon scrollTop fonctionne quand je suis dans l'ancre est dans la page actuelle.

Remplir dynamiquement un champ select avec ajax sujet

mercredi 29 janvier 2014

Bonjour,

Je débute avec Symfony2 et j'utilise la libraire FOSUserBundle pour la gestion de mon espace membre.

J'ai modifié mon formulaire d'inscription en ajoutant deux champs de type select ( pays et région). Je voudrais qu'en sélectionnant le pays que la liste région soit celle du pays sélectionné.

J'utilise ajax pour remplir ma liste de régions, cependant quand je sélectionne un pays et que j'affiche sa valeur, elle est indéfinie.

Quelqu'un pourrait-il m'aider à résoudre ce problème. Ci-dessous mes différents codes.

Le formulaire twig:

Code:

{% block javascripts %}
    <script src="{{ asset('bootstrap-3.0.3/userbundle/js/fillRegistration.js') }}"  type="application/javascript"></script>
{% endblock %}
 
<form  "action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register
form-horizontal" role="form">
 
 
 
        <div class="col-md-3 white-background"></div>
       <div class="col-md-6">
        <div class="row">
                      <div class="form-group">
                <label class="col-sm-5 control-label">{{ form_label(form.country) }}</label>
                <div class="col-sm-7">
                {{ form_widget(form.country, {'attr': { 'class': 'form-control', 'onChange': 'fillRegion();', 'id': 'country'}}) }}
                </div>
              </div>
                  <div class="form-group">
                <label class="col-sm-5 control-label">{{ form_label(form.region) }}</label>
                <div class="col-sm-7">
                {{ form_widget(form.region, {'attr': {'class': 'form-control'}}) }}
                </div>
              </div>               
        </div>
             <div class="form-group">
        <div class=" col-sm-12 align-center-button">
            <button type="submit" id="_submit" name="_submit" class="btn btn-btn btn-primary">{{ 'registration.submit'|trans({},          'FOSUserBundle') }}</button>
        </div>
    </div>
       </div>
    <div class="col-md-3 white-background"></div>

Le code javascript:

Code:

function fillRegion()
{
        var id_country = "";
    alert(' avant ===> '+id_country);
    id_country = $("select.country option:selected").val();
    alert(' après ===> '+id_country);
    $.ajax({
      url: "{{ path('pme_registration_fill_region }}",
      type: 'POST',
      data: {'id': id_country},
      dataType: 'json',
      success: function(json){
     $('#region').html('');
     $.each(json, function(index, value) {
    $('#region').append('<option value="'+ value.regCode +'">'+ value.regName +'</option>');
      });
    }
  });
}

Le code du controller:

Code:

public function fillRegionAction()
    {
      $request = $this->getRequest();
      $em = $this->getDoctrine()->getEntityManager();
      if($request->isXmlHttpRequest()) // pour vérifier la présence d'une requete Ajax
      {
        $id = '';
        $id = $request->get('id');
        if ($id != '')
        {
          $tesObjets = $em->getRepository('PmeUserBundle:Countries')
                  ->find($id); // qui retourne une collection d'objet je présume
          $tabObjet = array();
          $i = 0;
          foreach($tesObjets as $tonObjet) // pour transformer la réponse à ta requete en tableau qui replira le select2
          {
        $tabObjet[$i]['regCode'] = $tonObjet->getAlpha2();
        $tabObjet[$i]['regName'] = $tonObjet->getLangFr();
          }
          $response = new Response();
          $data = json_encode($tabObjet); // c'est pour formater la réponse de la requete en format que jquery va comprendre
          $response->headers->set('Content-Type', 'application/json');
          $response->setContent($data);
          return $response;
        }
      }
      return new Response('Erreur');
    }
 }

la route vers l'appel ajax:

Code:

pme_registration_fill_region:
    pattern: /fillRegion
    defaults: { _controller: PmeUserBundle:UserBundle:fillRegion}
    requirements:
        _method: POST

Merci d'avance pour votre aide

trends4media

Pages

Probleme formulaire contact en ajax sujet

mardi 8 avril 2014

Créer un tableau en ajax sujet

document.write(ultimaFecha);

ScrollTop vers ancre après un chargement de contenu en Ajax sujet

vendredi 28 mars 2014

Remplir dynamiquement un champ select avec ajax sujet

mercredi 29 janvier 2014