Forums Développement Multimédia

Aller au contenu

comment charger une page php via ajax sans la fonction load() ?

Ajax CODE Ajax JQuery EaseJs

30 réponses à ce sujet

#1 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 25 July 2013 - 11:37 AM

Bonjour tout le monde,

Durant mon stage suis confronté à un petit probleme .
J'ai à inserrer un contenu php dans une div via ajax ,le probleme est que la fonction load() à du mal à marcher coté serveur web .

je ne peux pas vous transmettre tout le fichier jquery c'est énorme ; de ce fait je vous envoie quelques extraits de ce fichier



voici la structure du doc:

html = '<div id="swipebox-overlay">\
<div id="swipebox-slider"></div>\
<div id="swipebox-caption"></div>\
<div id="swipebox-action">\
<a id="swipebox-close"></a>\
<a id="swipebox-prev"></a>\
<a id="swipebox-next"></a>\
</div>\
</div>';

autrement dit :

<div id="swipebox-overlay">\
<div id="swipebox-caption"></div>\

<div id="swipebox-slider"></div>\



<div id="swipebox-action">\


<a id="swipebox-close"></a>\ <a id="swipebox-prev"></a>\ <a id="swipebox-next"></a>\

Je dois mettre ma page php dans la div <div id="swipebox-caption"></div>\

Merci de votre aide

#2 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 25 July 2013 - 18:53 PM

Hello

Citation

Je dois mettre ma page php dans la div <div id="swipebox-caption"></div>\

Euh... Comme ça ?

<div id="swipebox-caption">
   <?php
            echo "mon code php";
    ?>
</div>
 


#3 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 26 July 2013 - 09:27 AM

Non echo sert à afficher un message ou le contenu d'une variable en php ce n'est de l'ajax !

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2531 messages

Posté 30 July 2013 - 22:17 PM

Salut et bienvenue sur Mediabox,

Tu dis "le probleme est que la fonction load() à du mal à marcher coté serveur web"

Tu pourrais nous en dire plus sur le ou les dysfonctionnements ?

Sinon, comme ça ?

$('#swipebox-caption').load('service/swipebox.php');
 

et dans le script swipebox.php, quelque chose dans ce goût là


<?php
    echo "<p>c'est bon !</p>";
?>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 31 July 2013 - 09:27 AM

ton code est exacte mais ça ne marche pas je l'ai déjà essayé avant .

Ça ne charge même pas le contenu de la page .A savoir je travaille avec filezilla .

De ce fait je fait $('#swipebox-caption').load( $_SERVER['DOCUMENT_ROOT'].'service/swipebox.php');

sans succés

#6 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 31 July 2013 - 09:42 AM

A titre voici le code jquery qui affiche un message sur cette div

setTitle : function (index, isFirst){
var title = null;

$('#swipebox-caption').empty();

if( elements[index] !== undefined )
title = elements[index].title;

if(title){

$('#swipebox-caption').append(title);

/* append rajoute le titre dans la div #swipebox-caption
de ce fait je mit mon code ici j'ai remplacé $('#swipebox-caption').append(title) par $('#swipebox-caption').load( $_SERVER['DOCUMENT_ROOT'].'service/swipebox.php'); sans succés

*/


}
},

#7 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 31 July 2013 - 16:42 PM

Hello !

Je suis un débutant total en php/mysql/ajax mais il se trouve que je fais un site html/php/ajax en ce moment...
Je ne sais pas ce qu'est

$('#swipebox-caption')
 

Mais par contre, je sais que ça marche très bien en utilisant l'objet xmlHttpRequest, pourquoi ne pas l'utiliser ?
(il me semblait d'ailleurs que faire de l'ajax sous entendait l'utilisation de cet objet, mais peut être pas (?) )

#8 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 31 July 2013 - 18:00 PM

Merci ka même tlecoz mais tu m'aide pas trop ,si ça se voit que t'es débutant en jquery mais c pas grave

#9 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 31 July 2013 - 18:02 PM

alors qui peut m'aider ? :roll:

#10 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 31 July 2013 - 18:11 PM

je vous transmet le lien http://brutaldesign....ub.io/swipebox/

voir le rubrique

try it

plus bas il y a un fichier à télécharger si vous cherchez vous trouverez le fichier jquery.swipebox.js dedans il ya tout principallement mon div
swipebox-caption

#11 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 31 July 2013 - 18:12 PM

:oops:

#12 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 31 July 2013 - 19:25 PM

Hello !

Je n'y connais rien en jquery mais en fait je ne pense pas que ce soit au niveau de jquery que se trouve ton problème.
Tu utilises un module tout fait, je suppose qu'il marche...

Et donc, si j'ai bien compris, tu veux passer du contenu depuis une page php et le transmettre à ce module, sans recharger la page.
On est donc d'accord que ce qui pose problème, c'est le coté ajax de la force ?

Si oui, je persiste et signe, c'est du coté de XmlHttpRequest que ça se passe ; cet objet permet d'appeler une page php depuis un script javascript et de récupérer la réponse php depuis ce même script. Bref c'est ce que tu veux faire non ?

#13 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2531 messages

Posté 31 July 2013 - 21:11 PM

Voir le messagetlecoz, le 31 July 2013 - 16:42 PM, dit :

Je ne sais pas ce qu'est

$('#swipebox-caption')
 

Cette syntaxe permet simplement de récupérer l'élément du DOM qui porte l'id swipebox-caption

C'est la même chose que faire

querySelector('#swipebox-caption');
// ou
document.getElementById('swipebox-caption');
 

Pour revenir à notre problème, la méthode load( ) est une syntaxe raccourci d'un appel ajax

Pour savoir si le souci vient bien de là, il suffit d'afficher les outils pour développeurs du navigateur que tu utilises et de regarder :

1- si l'appel ajax est bien appelé et si l'URL est bonne
2- ce que l'appel retourne

Par exemple, si tu vas à cette adresse après avoir affiché les outils pour développeurs et que tu cliques sur "last posts"
http://dcz-lab.fr/me.../structurer_js/

Tu verras l'appel Ajax (cf. image jointe)
Fichier joint  ajax.png   191.26 Ko   4 téléchargement(s)

PS : lorsque tu postes du code, place le entre les balises prévues à cet effet en utilisant le bouton <>
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#14 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 31 July 2013 - 21:55 PM

Citation

Pour revenir à notre problème, la méthode load( ) est une syntaxe raccourci d'un appel ajax

Merci de m'avoir corriger :eusa_doh:
Et merci pour les explications ;-)

#15 Goabonga

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2724 messages

Posté 31 July 2013 - 23:04 PM

branham es débutant en php il a oublié de faire un echo ...

<?php echo $_SERVER['DOCUMENT_ROOT']; ?> ......
 


#16 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 09:39 AM

lol

#17 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 09:43 AM

en fait j'ai pensé à le mettre comme ceci

$('#swipebox-caption').load( <?php echo $_SERVER['DOCUMENT_ROOT'].'service/swipebox.php' ; ?>);

mais ...

sinon
dcz.switcher je vais voir un peu ton truc et je te tiens au courant

#18 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 10:32 AM

dcz.switcher en fait j'ai princisement votre image que vous avez postée au final !

en fait le probleme n'est pas au niveau navigateur car je fais bien le chargement de pages avec ajax comme ceci:

en local

$.ajax({
type: "GET",
url: "recherche.php?type_demande="+req,
dataType : "html",
//affichage de l'erreur en cas de problème
error:function(msg, string){
alert( "Error !: " + string );
},
success:function(data){


$("#zone_de_rechargement").append(data);

}
});


ca marche tres bien mais pas au niveau serveur web en fait

#19 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 10:33 AM

je met le contenu de la page recherche.php dans une div zone_de_rechargement

#20 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 10:34 AM

voila ce que fait ce bout de code

#21 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 10:35 AM

au serveur ca me renvoie le message d'error c'est à dire que ca ne marche pas en fait

#22 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 01 August 2013 - 10:43 AM

peut etre il ne retrouve pas mon fichier recherche.php du coup je fais
...


url:<?php echo $_SERVER['DOCUMENT_ROOT'].'recherche.php' ;?> mais toujours pas

#23 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2531 messages

Posté 01 August 2013 - 20:55 PM

Le plus simple serait que tu publies ta page sur le net pour qu'on puisse voir ce que ça donne.

Tu as le moyen de le faire ?
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#24 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1746 messages

Posté 01 August 2013 - 23:19 PM

il ne manque pas des guillemets ?


$('#swipebox-caption').load( <?php echo '"'.$_SERVER['DOCUMENT_ROOT'].'service/swipebox.php"' ; ?>);
 


#25 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 02 August 2013 - 09:40 AM

dcz.switcher je t'envoie le lien du site en question il faudra cliquer sur les photos pour voir la gallerie si t'as firefox tu peux bien voir la partie droite ou je vais mettre ma page


https://fr.actuphoto.../5271-in-solite

j'en ai vraiment besoin ca un peu longtemps que je suis là dessus et mon maitre de stage commence à me déranger !

#26 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 02 August 2013 - 09:42 AM

svp

#27 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 02 August 2013 - 09:54 AM

je t'envoie aussi mon fichier "js" la partie en rouge c'est là ou je vais mettre ma page


;(function (window, document, $, undefined) {
       
        $.swipebox = function(elem, options) {

                var defaults = {
                        useCSS : true,
                        hideBarsDelay : 3000,
                        videoMaxWidth : 1140,
                        vimeoColor : 'CCCCCC',
                        beforeOpen: null,
                 afterClose: null
                },
               
                plugin = this,
                elements = [],
                elem = elem,
                selector = elem.selector,
                $selector = $(selector),
                isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints,
                supportSVG = !!(window.SVGSVGElement),
                winWidth = window.innerWidth ? window.innerWidth : $(window).width(),
                winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
                html = '<div id="swipebox-overlay">\<br />                                 <div id="swipebox-slider"></div>\<br />                                 <div id="swipebox-caption"></div>\<br />                                 <div id="swipebox-action">\<br />                                         <a id="swipebox-close"></a>\<br />                                         <a id="swipebox-prev"></a>\<br />                                         <a id="swipebox-next"></a>\<br />                                 </div>\<br />                 </div>';


                plugin.settings = {}

                plugin.init = function(){

                        plugin.settings = $.extend({}, defaults, options);

                        if ($.isArray(elem)) {

                                elements = elem;
                                ui.target = $(window);
                                ui.init(0);

                        }else{


$selector.click(function(e){
                                        elements = [];
                                        var index , relType, relVal;

                                        if (!relVal) {
                                                relType = 'rel';
                                                relVal  = $(this).attr(relType);
                                        }

                                        if (relVal && relVal !== '' && relVal !== 'nofollow') {
                                                $elem = $selector.filter('[' + relType + '="' + relVal + '"]');
                                        }else{
                                                $elem = $(selector);
                                        }

                                        $elem.each(function(){

                                                var title = null, href = null;
                                               
                                                if( $(this).attr('title') )
                                                        title = $(this).attr('title');

                                                if( $(this).attr('href') )
                                                        href = $(this).attr('href');
                                                                                                                                         
                                                elements.push({

href: href,
                                                        title: title
                                                });
                                        });
                                       
                                        index = $elem.index($(this));
                                        e.preventDefault();
                                        e.stopPropagation();
                                        ui.target = $(e.target);
                                        ui.init(index);
                                });
                        }
                }

                plugin.refresh = function() {
                        if (!$.isArray(elem)) {
                                ui.destroy();
                                $elem = $(selector);
                                ui.actions();
                        }
                }

var ui = {

                        init : function(index){
                                if (plugin.settings.beforeOpen)
                                        plugin.settings.beforeOpen();
                                this.target.trigger('swipebox-start');
                                $.swipebox.isOpen = true;
                                this.build();
                                this.openSlide(index);
                                this.openMedia(index);
                                this.preloadMedia(index+1);
                                this.preloadMedia(index-1);
                        },

                        build : function(){
                                var $this = this;

                                $('body').append(html);

if($this.doCssTrans()){
                                        $('#swipebox-slider').css({
                                                '-webkit-transition' : 'left 0.4s ease',
                                                '-moz-transition' : 'left 0.4s ease',
                                                '-o-transition' : 'left 0.4s ease',
                                                '-khtml-transition' : 'left 0.4s ease',
                                                'transition' : 'left 0.4s ease'
                                        });
                                        $('#swipebox-overlay').css({
                                                '-webkit-transition' : 'opacity 1s ease',
                                                '-moz-transition' : 'opacity 1s ease',
                                                '-o-transition' : 'opacity 1s ease',
                                                '-khtml-transition' : 'opacity 1s ease',
                                                'transition' : 'opacity 1s ease'
                                        });
                                        $('#swipebox-action, #swipebox-caption').css({
                                                '-webkit-transition' : '0.5s',
                                                '-moz-transition' : '0.5s',
                                                '-o-transition' : '0.5s',
                                                '-khtml-transition' : '0.5s',
                                                'transition' : '0.5s'
                                        });
                                }

if(supportSVG){
                                        var bg = $('#swipebox-action #swipebox-close').css('background-image');
                                        bg = bg.replace('png', 'svg');
                                        $('#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close').css({
                                                'background-image' : bg
                                        });
                                }
                               
                                $.each( elements,  function(){
                                        $('#swipebox-slider').append('<div class="slide"></div>');
                                });

                                $this.setDim();
                                $this.actions();
                                $this.keyboard();
                                $this.gesture();
                                $this.animBars();
                                $this.resize();
                               
                        },
setDim : function(){

                                var width, height, sliderCss = {};
                               
                                if( "onorientationchange" in window ){

                                        window.addEventListener("orientationchange", function() {
                                                if( window.orientation == 0 ){
                                                        width = winWidth;
                                                        height = winHeight;
                                                }else if( window.orientation == 90 || window.orientation == -90 ){
                                                        width = winHeight;
                                                        height = winWidth;
                                                }
                                        }, false);
                                       
                               
                                }else{

                                        width = window.innerWidth ? window.innerWidth : $(window).width();
                                        height = window.innerHeight ? window.innerHeight : $(window).height();
                                }

                                sliderCss = {
                                        width : width,
                                        height : height
                                }


                                $('#swipebox-overlay').css(sliderCss);

                        },

                        resize : function (){
                                var $this = this;
                               
                                $(window).resize(function() {
                                        $this.setDim();
                                }).resize();
                        },

                        supportTransition : function() {
                                var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split(' ');
                                for(var i = 0; i < prefixes.length; i++) {
                                        if(document.createElement('div').style[prefixes[i]] !== undefined) {
                                                return prefixes[i];
                                        }
                                }
                                return false;
                        },

                        doCssTrans : function(){
                                if(plugin.settings.useCSS && this.supportTransition() ){
                                        return true;
                                }

gesture : function(){
                                if ( isTouch ){
                                        var $this = this,
                                        distance = null,
                                        swipMinDistance = 10,
                                        startCoords = {},
                                        endCoords = {};
                                        var bars = $('#swipebox-caption, #swipebox-action');

                                        bars.addClass('visible-bars');
                                        $this.setTimeout();

                                        $('body').bind('touchstart', function(e){

                                                $(this).addClass('touching');

                                                  endCoords = e.originalEvent.targetTouches[0];
                                                        startCoords.pageX = e.originalEvent.targetTouches[0].pageX;

                                                $('.touching').bind('touchmove',function(e){
                                                        e.preventDefault();
                                                        e.stopPropagation();
                                                                endCoords = e.originalEvent.targetTouches[0];

                                                });
                                                               
                                                                return false;

                                                }).bind('touchend',function(e){
                                                        e.preventDefault();
                                        e.stopPropagation();
                                  distance = endCoords.pageX - startCoords.pageX;
                                               
                                                if( distance >= swipMinDistance ){
                                                       
                                                        // swipeLeft
                                                        $this.getPrev();
                                               
                                                }else if( distance <= - swipMinDistance ){
                                                       
                                                        // swipeRight
                                                        $this.getNext();
                                               
                                                }else{
                                                        // tap
                                                        if(!bars.hasClass('visible-bars')){
                                                        $this.showBars();
                                                        $this.setTimeout();
                                                }else{
                                                        $this.clearTimeout();
                                                        $this.hideBars();
                                                }

                                                }  

        $('.touching').off('touchmove').removeClass('touching');
                                               
                                        });

                                                   }
                        },

                        setTimeout: function(){
                                if(plugin.settings.hideBarsDelay > 0){
                                        var $this = this;
                                        $this.clearTimeout();
                                        $this.timeout = window.setTimeout( function(){
                                                $this.hideBars() },
                                                plugin.settings.hideBarsDelay
                                        );
                                }
                        },
                       
                        clearTimeout: function(){      
                                window.clearTimeout(this.timeout);
                                this.timeout = null;
                        },

                        showBars : function(){
                                var bars = $('#swipebox-caption, #swipebox-action');
                                if(this.doCssTrans()){
                                        bars.addClass('visible-bars');

}else{
                                        $('#swipebox-caption').animate({ top : 0 }, 500);
                                        $('#swipebox-action').animate({ bottom : 0 }, 500);
                                        setTimeout(function(){
                                                bars.addClass('visible-bars');
                                        }, 1000);
                                }
                        },

                        hideBars : function(){
                                var bars = $('#swipebox-caption, #swipebox-action');
                                if(this.doCssTrans()){
                                        bars.removeClass('visible-bars');
                                }else{
                                        $('#swipebox-caption').animate({ top : '-50px' }, 500);
                                        $('#swipebox-action').animate({ bottom : '-50px' }, 500);
                                        setTimeout(function(){
                                                bars.removeClass('visible-bars');
                                        }, 1000);
                                }
                        },

animBars : function(){
                                var $this = this;
                                var bars = $('#swipebox-caption, #swipebox-action');
                                       
                                bars.addClass('visible-bars');
                                $this.setTimeout();
                               
                                $('#swipebox-slider').click(function(e){
                                        if(!bars.hasClass('visible-bars')){
                                                $this.showBars();
                                                $this.setTimeout();
                                        }
                                });

                                $('#swipebox-action').hover(function() {
                                                  $this.showBars();
                                                bars.addClass('force-visible-bars');
                                                $this.clearTimeout();
                                       
                                        },function() {
                                                bars.removeClass('force-visible-bars');
                                                $this.setTimeout();

                                });
                        },

keyboard : function(){
                                var $this = this;
                                $(window).bind('keyup', function(e){
                                        e.preventDefault();
                                        e.stopPropagation();
                                        if (e.keyCode == 37){
                                                $this.getPrev();
                                        }
                                        else if (e.keyCode==39){
                                                $this.getNext();
                                        }
                                        else if (e.keyCode == 27) {
                                                $this.closeSlide();
                                        }
                                });
                        },

                        actions : function(){
                                var $this = this;
                               
                                if( elements.length < 2 ){
                                        $('#swipebox-prev, #swipebox-next').hide();
                                }else{
                                        $('#swipebox-prev').bind('click touchend', function(e){
                                                e.preventDefault();
                                                e.stopPropagation();
$this.getPrev();
                                                $this.setTimeout();
                                        });
                                       
                                        $('#swipebox-next').bind('click touchend', function(e){
                                                e.preventDefault();
                                                e.stopPropagation();
                                                $this.getNext();
                                                $this.setTimeout();
                                        });
                                }

                                $('#swipebox-close').bind('click touchend', function(e){
                                        $this.closeSlide();
                                });
                        },
                       
                        setSlide : function (index, isFirst){
                                isFirst = isFirst || false;
                               
                                var slider = $('#swipebox-slider');
                               
                                if(this.doCssTrans()){
                                        slider.css({ left : (-index*100)+'%' });
                                }else{
                                        slider.animate({ left : (-index*100)+'%' });
                                }
                               
                                $('#swipebox-slider .slide').removeClass('current');
                                $('#swipebox-slider .slide').eq(index).addClass('current');
                                this.setTitle(index);

                                if( isFirst ){
                                        slider.fadeIn();
                                }

$('#swipebox-prev, #swipebox-next').removeClass('disabled');
                                if(index == 0){
                                        $('#swipebox-prev').addClass('disabled');
                                }else if( index == elements.length - 1 ){
                                        $('#swipebox-next').addClass('disabled');
                                }
                        },
               
                        openSlide : function (index){
                                $('html').addClass('swipebox');
                                $(window).trigger('resize'); // fix scroll bar visibility on desktop
                                this.setSlide(index, true);
                        },
               
                        preloadMedia : function (index){
                                var $this = this, src = null;

                                if( elements[index] !== undefined )
                                        src = elements[index].href;

                                if( !$this.isVideo(src) ){
                                        setTimeout(function(){
                                                $this.openMedia(index);
                                        }, 1000);
                                }else{
                                        $this.openMedia(index);

        }
                        },
                       
                        openMedia : function (index){
                                var $this = this, src = null;

                                if( elements[index] !== undefined )
                                        src = elements[index].href;

                                if(index < 0 || index >= elements.length){
                                        return false;
                                }

                                if( !$this.isVideo(src) ){
                                        $this.loadMedia(src, function(){
                                                $('#swipebox-slider .slide').eq(index).html(this);
                                        });
                                }else{
                                        $('#swipebox-slider .slide').eq(index).html($this.getVideo(src));
                                }
                               
                        },

setTitle : function (index, isFirst){
                                var title = null;

                                $('#swipebox-caption').empty();

                                if( elements[index] !== undefined )
                                        title = elements[index].title;
                               
                           [color=#ff0000] if(title){[/color]

 
                                  [color=#ff0000]  $('#swipebox-caption').append(title);[/color]  // je vais mettre ma page ici
 
.....

merci de votre aide

#28 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 02 August 2013 - 10:20 AM

tiens je te transmet aussi hote, mon identifiant et mot de passe de mon espace de travail à maitre sur filezilla et les noms de fichiers pour ce travail

hote: *
identifiant: *
mot de passe: *

le nom de fichier : photos_big.php pour le fichier à mettre sur la section swipebox-caption tu peux te creer un fichier php juste pour voir si ca charge

#29 branham

    Ceinture Jaune

  • Members
  • PipPip
  • 23 messages

Posté 02 August 2013 - 10:24 AM

et le lien de teste pour voir tes modifications

https://fr.actuphoto...tos_big.php?p=1

#30 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2531 messages

Posté 03 August 2013 - 08:56 AM

Bon, je pense avoir compris ce que tu cherches à obtenir : tu veux charger du contenu dans la DIV '#swipebox-caption' par un appel ajax

Je te propose d'y aller par étape, il ne s'agit que je te donne la solution mais plutôt la démarche pour trouver.

Pour commencer, il faut que tu t'assures que la div en question est bien accessible avant d'y charger quoi que ce soit

En effet, lorsque tu cliques sur un lien qui contient la classe '.swipebox', le plugin va créer un conteneur : div#swipebox-overlay

Tant que tu n'as pas cliqué le lien, la div n'existe pas et lorsque tu fermes swipebox, la div est supprimée !

Il faut donc appeler le chargement uniquement lorsque la DIV est créée.

Je dois y aller, regarde ça, je reprend le fil tout à l'heure

note : j'ai supprimé tes identifiants FTP du forum, ça n'est pas une bonne idée de les mettre ici.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#31 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2531 messages

Posté 03 August 2013 - 20:50 PM

... donc, me re voilà

J'ai regardé de plus près le plugin que tu utilises, pourquoi ne pas mettre les données que tu veux afficher dans l'attribut "title" du lien ?

exemple[size=4]
[/size]
<a href="img/big_1353005429.jpg" title="<ul><li>ligne 1</li><li>ligne 2</li></ul>" class="swipebox">
   <img src="img/small_1353005429.jpg" >
  </a>
 

et tu peux très bien charger le contenu de cet attribut en ajax

edit : une autre solution est simplement de modifier le plugin pour qu'au lieu de charger le contenu du l'attribut title, tu lances un appel ajax

exemple, charge le script non compressé du plugin et regarde ligne 470

setTitle : function (index, isFirst){
        console.log('tu appelles ton ajax ici !');
        var title = null;
        $('#swipebox-caption').empty();
        if( elements[index] !== undefined )
         title = elements[index].title;
 
        if(title){
         $('#swipebox-caption').append(title);
        }
   },
 

Tu affiches en titre un message du genre : "chargement ..." et lorsque l'appel ajax revient, tu affiches son contenu et l'enregistre en faisant par exemple
elements[index].ajaxData = data;

pour les prochains appels, il suffira de tester si ajaxData est renseigné et si oui, tu l'affiches sans faire d'appel ajax

... mais bon, le plus simple serait sans doute de charger ton contenu dans l'attribut title du lien ... mais c'est toi qui vois
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP