jquery dialog + ajax
bonjour,
j'essaie d'ouvrir un modal avec dialog qui apelle une page an ajax mais ça fonctionne pas
le lien qui est censé m'ouvrir la box:
<A id="ref_soumettre" href="#" title="Soumettre votre site">Soumettre un site</A>mon javascript qui est juste en dessous du lien:
<script>
$( function() {
$( "#soumettre" ).dialog({
width: 1000,
height: 500,
resizable: false,
closeText: 'Fermer',
modal: true,
autoOpen: false
});
} );
$("body").on('click', '#ref_soumettre',function(event) {
$.ajax({
url: '/soumettre.php',
success: function (reponse)
{
$('#soumettre').html(reponse);
$('#soumettre').dialog();
}
});
});
</script>j'apelle jquery dan le head je sais pas si ça change quelque chose ou si je devrais le mettre avant la fin de mon body
<head>
<meta charset="UTF-8">
<title><?= $title ?></title>
<meta name="description" content="Place your description here">
<meta name="keywords" content="put, your, keyword, here">
<meta name="author" content="Templates.com - website templates provider">
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/gif" href="/animated_favicon1.gif" />
<script type="text/javascript" src="/js/maxheight.js"></script>
<script src="/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/js/utils.js"></script>
</head>
5 réponses
salut,
Que met tu dans le dialog ??
moi j'vois rien :D
pour le chargement des données, il faut mettre le htlm sans le head body et tout et tout ;)
le strict html du dialog et surtout pas recharger jquery et consort ;)
@plus
Pierre
Bonsoir.
Je suppose que lorsque tu cliques sur le lien, que la page se recharge.
Rien d'étonnant à ça si tu ne bloque pas le comportement par défaut du navigateur.
Après avoir capturé l'évènement du click sur le lien, il te faut ajouter event.preventDefault();.
Par contre, ce serait bien que tu arrêtes de mettre en majuscule le a dans tes balises de liens.
effectivement j'avais oublié event.preventDefault();.
j'ai modifié et voici le code de la page ou je suis "annu.php"
<?php
$title = 'Web-Soluces - Annuaire';
include '/include/mysql_connect.php';
include '/include/header.php';
?>
<div class="colorbox">
<div class="title_box"><h2>Annuaire</h2></div>
<div class="content_box">
<TABLE width="100%" align="center" cellpadding="0" cellspacing="0">
<TR><TD><BR /></TD></TR>
<TR><TD class="menu3">
<TABLE width="300" align="center" cellpadding="0" cellspacing="0">
<?php
if (empty($_GET['page']))
{
include "annu_liste.php";
}
if (isset($_GET['page']) && $_GET['page']=='news')
{
include "annu_news.php";
}
if (isset($_GET['page']) && $_GET['page']=='TopSites')
{
include "TopSites.php";
}
if (isset($_GET['page']) && $_GET['page']=='TopHits')
{
include "TopHits.php";
}
if (isset($_GET['page']) && $_GET['page']=='recherche')
{
include "result.php";
}
?>
</TABLE>
</TD></TR>
</TABLE>
</div>
</div>
<script>
$( function() {
$( "#soumettre" ).dialog({
width: 1000,
height: 500,
resizable: false,
closeText: 'Fermer',
modal: true,
autoOpen: false
});
} );
$("#ref_soumettre").on('click'function(event) {
event.preventDefault();
$.ajax({
url: '/soumettre.php',
success: function (reponse)
{
$('#soumettre').html(reponse);
$('#soumettre').dialog();
}
});
})
<div id="soumettre" title="Enregister un nouveau site"></div>
</script>
<?php
include '/include/footer.php';
?>mais quand je clique sur mon lien la page se recharge
la page soumettre contient pour le moment que du texte pour mes testes
j'ai aussi essayé un simple jquery load mais c'est pareil la page se recharge
euh...
si je met mon div dans le script ça va pas aller:
j'ai donc mis mon div avant mon script
j'ai modifié cette ligne en rajoutant open:
$('#soumettre').dialog("open");et aussi mon head:
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/gif" href="/animated_favicon1.gif" />
<script type="text/javascript" src="/js/maxheight.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">du coup ça fonctionne parfaitement
par contre pierre petite question, j'ai vu que tu a un systeme similaire avec dialog et que tes fenetres sont décalé par rapport aux précédentes, est ce que c'est toi qui les as décalé ou bien est il possible de les apeller décalè par rapport à celle précédement ouverte ?