html - Kan jeg reloade en side i en anden side? - Udvikleren.dk

Tags: html jquery

Bruger #17028 @ 18.04.12 14:21

Jeg er ved at lave en hjemmeside med en topmenu, hvor man kan navigere mellem 6 sider.

På alle siderne har jeg i højre kant en værktøjslinie, som indeholder en masse dokumenter fra en database, den tager ca. 5-10 sekunder at loade, og skal vises på alle siderne.

Jeg vil gerne gøre sådan at når man skifter mellem siderne, så loades hele siden undtagen topmenuen og værktøjslinien da de aldrig ændrer sig.

Jeg ved jeg kan loade dele af siden via Ajax kald og bruger det også flittigt til at sende små requests til serveren, men det er mig bekendt kun html kode i <body></body> sektionen der kan ændres på den måde - så selv om jeg loader en hel side i et div tag fx. så ændrer det ikke ved de stylesheets og de javascript libraries som er på siden.

Hvilket medfører at jeg skal måske skal slå nogle ret store javascript libraries sammen - hvilket jeg gerne vil undgå.

Er der nogle metoder til at reloade hele header sektionen på? eller kan i se nogle andre smarte løsninger på min problemstilling?

Venlig hilsen
Jacob

Indlæg senest redigeret d. 18.04.2012 14:23 af Bruger #17028

4 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #955 @ 18.04.12 15:16

1.624

Ved mange script filer, kan det være et plus at samle dem i en fil.

Hvorfor tager det 5-10 sekunder at loade den side? Det lyder som dér problemet er. Hvis ikke du kan optimere på det, så kunne en cachet side være værd at overveje?

Indlæg senest redigeret d. 18.04.2012 15:20 af Bruger #955

Bruger #3427 @ 18.04.12 15:35

1.520

du kan godt lave det med ajax, så kan evt lave et array på din php side som inddeler hvad type indhold det er

sådan når du modtager det i javascript, ved du om det er et script, stylesheet eller indhold på siden evt.

et bud, ikke testet. - er dog ikke perfekt, da du burde slette de scripts osv du indsætter når du indlæser en anden side, men bare for du får en ide om hvordan det kan gøres.

ajax.php

PHP kode

 $data = array(
   "success" => true,
   "css" => array(
     "file.css",
     "file2.css"
   ),
   "js" => array(
     "lib_a.js",
     "lib_b.js"
   ),
   "content" => array(
     "box_a" => "det her indhold kommer i box_a",
     "box_b" => "og det her kommer så i box_b"
   )
 );
 
 echo json_encode($data);

something.html

HTML kode

 <!DOCTYPE html>
 <html lang="en">
   <head>
     
   </head>
   <body>
 
    <div id="box_a"></div>
    <div id="box_b"></div>
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
     <script type="text/javascript">
        //script her
     </script>
       
   </body>
 </html>

script

JScript kode

 function addJS(url){
         $('head').append('<script src="'+url+'" type="text/javascript"' +' ><' + '/script>');
       }
       function addCSS(url){
         $('head').append('<link rel="stylesheet" href="'+ url +'" type="text/css" />');
       }
       function addContent(content, where){
         $('#'+where).html(content);
       }
     
       $(function(){
         $.ajax({
           url: "ajax.php",
           data: {
             //hvad du nu har lyst til at sende med af info.
           },
           dataType: 'json',
           cache: false,
           success: function(result){
             if(result.success){
               $.each(result.css, function(i, elm){
                 addCSS(elm);
               });
               $.each(result.js, function(i, elm){
                 addJS(elm);
               });
               $.each(result.content, function(key, content){
                 addContent(content, key);
               });
             }
           },
           error: function(){
             alert("øv :(");
           }
         });
       });

edit: så lige der var en midre fejl i php koden

Indlæg senest redigeret d. 18.04.2012 15:39 af Bruger #3427

Bruger #17028 @ 18.04.12 16:50

Hmm det kunne godt være en mulighed at loade headeren ind på den måde du beskriver - det er godt nok ikke PHP jeg sidder med, men kan sagtens forstå ideen i forslaget

Hvad er en cachet side som Stefan foreslår? Kan man cache sider for en enkelt bruger?

Grunden til de 5-10 sekunder er at det er ca. 2.000 dokumenter, som skal opstilles i en stifinder lignende træstruktur. Selve dataene er hentet på under 1 sekund, men visningen og behandlingen af de forskellige styles tager lidt tid.
Udfor hvert dokument skal der fx. vises et lille billede af et plus, samt der skal være events til at flytte dem over i en favorit liste, hvor man skal kunne fjerne dem igen.

For at gøre det sjovere er listen dynamisk genereret fra en database hvor brugerne kan tilføje elementer til listen, og det skulle helst afspejle sig med det samme på web. :-)

Bruger #3427 @ 20.04.12 15:42

1.520

Cachet side er at der gemmes en fil på serveren som bliver vist x antal gange eller i x antal tid før der laves en ny, sådan din server ikke skal generere det samme output pr request, men da dit output ikke er det samme hvergang, så er cache ikke oplagt for dig.

Kan jeg reloade en side i en anden side?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler