php - How to break up HTML document to implement modularity? -


i'm creating web-site , use html build page layout. have 1 big html document index.html. there header, middle section , footer. many scripts used form checks, animations, slider , etc. slider has several background images , different content each slide. index.html has lot of stuff in , when user loads first time quite bit of traffic used.
when user fills login form, client side jquery script checks form , data posted php script server side checks performed , session started. after successful response server want index.html reload different header. came 2 solutions this:
*

  • i can load different document using ajax header container.
  • i can redirect html document(for example index2.html has exact same code exception header container part changed.

i don't both of solutions. using ajax can avoid forcing user reload traffic. seems not elegant me reloading header make white square appear in section break user's design experience , looks clunky. while it's asynchronous action there way show user in header area while document loading?
second solution bad cause tons's of code repetitions traffic reload , etc.


if used php building project broke document modules (header.php, midsection.php, footer.php , etc.) index.php file consist of includes , had onloginheader.php file created , include changed on page reload.
there way similar in html document?

i cannot understand but, may you.

    $('#header > #loading').show();      $.ajax({         type: "post",         data: "email=email@example.com&password=password"         url: url,         datatype: 'json'     }).done(function(data) {         if(data) {             if(data.status == 'success')                 $('#header > #memberarea').html(data.memberareacode);             else                 $('#header > #loginerror').show();              $('#header > #loading').hide();         }     }); 

loading represents div container, may opacity:0.8 , has loading indicator in it. shown on header section , default css value display:none;

when send login request, first of should show loading screen user cannot understand changes on header part. after that, if login success, may make changes come serverside, or can set username via jquery. , rest of all, hide loading screen again. , thats all.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -