Comment réaliser facilement des écrans / vues avec JavaScript / Jquery ?

Question

Comment réaliser facilement des écrans / vues avec JavaScript / Jquery ?

Demandé el 2 de Mai, 2012: Quand la question a-t-elle été
193 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis sûr que j'ai raté quelque chose d'assez fondamental, mais je viens de commencer à me mettre à la page en matière de programmation jQuery et Javascript. Auparavant, je faisais de la programmation côté serveur avec PHP. Je suis maintenant au milieu de la création d'un prototype de webapp HTML5, où je voudrais avoir différents écrans. Avec PHP, c'était assez facile, je pouvais simplement utiliser des modèles côté serveur comme Smarty et en finir.

Cependant, pour que mon application ressemble davantage à une application web, je voudrais passer dynamiquement d'un écran à l'autre sans avoir à recharger la fenêtre.

J'ai examiné plusieurs options qui pourraient répondre à ma question, mais je ne suis pas sûr d'être sur la bonne voie.

J'ai vérifié par exemple JsRender, JsViews ou même la pure commande jquery load. Mais ce dont je ne suis pas sûr, c'est que ces choses me permettraient d'avoir quelque chose comme ça :

HEADER_PART
MAIN_CONTENT
FOOTER_PART (contient également des liens vers des fichiers JS courants que j'utilise)

Je voudrais mettre à jour dynamiquement la partie MAIN_CONTENT. Actuellement, mon application ne comporte qu'une seule page, et toute ma logique personnalisée qui appartient à cette page se trouve dans un seul fichier JS. Dans ce fichier JS, j'utilise une simple $(function() { ... pour charger ma page, de sorte qu'à chaque fois qu'elle est chargée, certaines parties de ma page sont mises à jour de manière asynchrone. C'est très bien, car tous mes blocs dans cette certaine page devraient être chargés lorsque cette page est chargée.

Mais que se passe-t-il si j'ai un lien, comme main.html#autre écran, et que lorsque je clique sur cet écran, je souhaite modifier mon MAIN_CONTENT et également exécuter un autre JS spécifique au chargement de la page qui gère les blocs sur cet autre écran, et non sur la première page ?

Je sais que je pourrais toujours utiliser des modèles côté serveur et charger mes pages en utilisant des requêtes AJAX, mais là encore, je ne suis pas sûr que ce soit la bonne approche.

Pouvez-vous m'éclairer ? :)

Merci et meilleures salutations, Bence

Demandé el 2 de Mai, 2012 par Bence

Answer 1

2 Réponses

Answer 2

2voto

Jason Points 20255

Vérifiez jQuery.load() . En utilisant cette fonction, vous pouvez charger dynamiquement du contenu dans un div de la page, ce qui est, je pense, ce que vous voulez faire. Il suffit de trouver la fonction div sur la page dans laquelle vous voulez charger du contenu et appelez

$('#mydiv').load(url, data, function(response){
    //do something once it's done.
});

Selon vos commentaires...

C'est en fait très facile. .load() devrait remplacer le contenu du div (je pense. Si ce n'est pas le cas, il suffit d'appeler .empty() premier). Bien sûr, vous pouvez être plus fantaisiste et ajouter des effets, tels que

function changePages(url) {
    $('#mydiv').fadeOut('fast', function() { 
        $(this).load(url, function(response){
            $('#mydiv').fadeIn('fast');
        });
    });
}

Pour gérer des éléments tels que le hachage dans l'URL, dans votre événement de clic, vous devez vous assurer que vous appelez d'abord e.preventDefault() :

$('#mylink').click(function(e){ 
    e.preventDefault(); //e is a jquery event object
    var link = $(this);
    var hash = link.attr('href'); // get the hashtag if the href is '#something'
    changePages(someUrl + hash);
});

Répondu el 2 de Mai, 2012 par Jason (20255 Points )

Answer 3

1voto

Cosmin Pârvulescu Points 342

Pour un chargement dynamique des données dans la page sans modifier votre en-tête et votre pied de page, vous devez utiliser la fonction AJAX de jQuery. Elle vous permet d'envoyer des requêtes au serveur et de recevoir des données en retour sans recharger la page. Un exemple simple serait quelque chose comme :

<html>
    <head>
        <title>Example</title>
        <!-- Assuming jQuery is already referenced -->
        <script type="text/javascript">
            $('span.buttonish').click(function(){
                $.ajax({
                    // The URL can be a file or a PHP script of your choosing
                    // it can also be pure HTML without the <html> tags as they
                    // are already in your file
                    url: 'path/to/the/file/that/return/data',
                    success: function(receivedData) {
                        // The received data is the content of the file or the return
                        // data of the script and you can use it as you would with any data
                        $('#content').html(receivedData);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="header">
        <!-- Something -->
        </div>
        <div id="content">
            <span class="buttonish">Click me to change the text... </span>
        </div>
        </div id="footer">
        <!-- Something -->
        </div>
    </body>
<html>

Répondu el 2 de Mai, 2012 par Cosmin Pârvulescu (342 Points )

Comment réaliser facilement des écrans / vues avec JavaScript / Jquery ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment réaliser facilement des écrans / vues avec JavaScript / Jquery ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: