11 Replies - 1046 Views - Last Post: 26 February 2014 - 08:58 AM

#1 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Load html into div

Posted 25 February 2014 - 01:28 PM

Is this the correct way to load html into a div?


<!DOCTYPE HTML>
<html>
    <head>
        <title>   
        </title>
        <script src="//code.jquery.com/jquery-1.10.2.min.js" ></script>
        <script src="test.js" ></script>
        <link type="text/css" href="Css/index.css" rel="stylesheet" />

    </head>
    <body>
        <h1> Τest </h1>

        <nav>
            <div id="buttons">   
                <input type="button" id="regBtn" name="regBtn"   value="register" onclick="loadRegister();" />
                <input type="button" id="logBtn" name="loginBtn" value="login"    onclick="loadLogin();"    />
            </div>
        </nav>

        <span id="message"></span>

        <div id="mainPanel">    
        </div>
      
    </body>
</html>





JS

function loadLogin() {
   $('#mainPanel').load('login_form.html');
}

function loadRegister() {
    $('#mainPanel').load('register_form.html');
}






LOGIN FORM


<!DOCTYPE HTML>
<html>
    <head>
        <title>
        </title>
    </head>
    <body>
        <form id="panel">
            <label> Username </label>
            <input type="text" /> <br>
            <label>Password </label>
            <input type="password" />
            <input type="button" value="submit"/>  
        </form>
    </body>

</html>




REGISTER FORM

<!DOCTYPE HTML>
<html>

    <head>
        <title>
        </title>    
    </head>

    <body>
        <form id="regForm" method="POST">
            <label> username </label>
            <input type="text"  name="username"/> 
            <label> email </label>
            <input type="email"  name="email"/> 
            <label> pass1 </label>
            <input type="password"  name="pass1"/> 
            <label> pass2</label>
            <input type="password"  name="pass2"/> 
            <input type="submit"  value="Register"/>      
        </form>
    </body>
</html>



This post has been edited by ChrisNt: 25 February 2014 - 01:31 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Load html into div

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: Load html into div

Posted 25 February 2014 - 01:33 PM

Does it work? Are there errors in your browser's console?

This post has been edited by andrewsw: 25 February 2014 - 01:34 PM

Was This Post Helpful? 0
  • +
  • -

#3 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Re: Load html into div

Posted 25 February 2014 - 01:35 PM

View Postandrewsw, on 25 February 2014 - 11:33 PM, said:

Does it work? Are there errors in your browser's console?


It works ,im just wondering if its a good way ...
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: Load html into div

Posted 25 February 2014 - 01:39 PM

It is the simplest way but the HTML you are loading should be a fragment, not a complete HTML document: you are inserting into a div-element.

load() jQuery
Was This Post Helpful? 1
  • +
  • -

#5 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Re: Load html into div

Posted 25 February 2014 - 01:46 PM

By fragment you mean to load a page which only contains the div without any other tags? for example

<div id="panel">
 <form id="regForm" method="POST">
            <label> username </label>
            <input type="text"  name="username"/> 
            <label> email </label>
            <input type="email"  name="email"/> 
            <label> pass1 </label>
            <input type="password"  name="pass1"/> 
            <label> pass2</label>
            <input type="password"  name="pass2"/> 
            <input type="submit"  value="Register"/>      
        </form>
</div>

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,544
  • Joined: 12-December 12

Re: Load html into div

Posted 25 February 2014 - 02:13 PM

Yes.

You are loading content into a div, so you load into this div any element, or elements, that would be appropriate in a div. So.. no DOCTYPE, head, html, body, etc., tags.

I assume that you are just exploring though? as there is no particular reason to load this limited content when you could just hide and show it using css.
Was This Post Helpful? 1
  • +
  • -

#7 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Re: Load html into div

Posted 25 February 2014 - 02:22 PM

Im actually trying to make a rich web application which will provide an interface like desktop applications,so i dont want the page to refresh .Is it possible to do it just with css?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Load html into div

Posted 25 February 2014 - 02:25 PM

depends on what it is supposed to do. simple hide-and-show is no problem for CSS.
Was This Post Helpful? 0
  • +
  • -

#9 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Re: Load html into div

Posted 25 February 2014 - 02:40 PM

View PostDormilich, on 26 February 2014 - 12:25 AM, said:

depends on what it is supposed to do. simple hide-and-show is no problem for CSS.


First page will be register and login.After logging to the system there will be a navigation bar with different links and a main panel.When you click to a link the main panel will change.
But as I said i dont want the page to refresh/reload because i want to provide a user interface like desktop apps.

I tried a css source code i found online but i see that is refreshing the page.
Was This Post Helpful? 0
  • +
  • -

#10 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Re: Load html into div

Posted 25 February 2014 - 08:53 PM

After clicking the buttons multiple times i see that the brownser responds very slow and finally stucks because i have to load again jquery for the divs(containing forms) which i load to the div in index.php to submit them to another php.I can see that my idea is completely wrong.Any suggestions?

This post has been edited by ChrisNt: 25 February 2014 - 08:55 PM

Was This Post Helpful? 0
  • +
  • -

#11 ChrisNt  Icon User is offline

  • cute bug

Reputation: 225
  • View blog
  • Posts: 723
  • Joined: 31-July 13

Re: Load html into div

Posted 25 February 2014 - 09:52 PM

Solution found (at least i think)

i have 2 divs in my main page index.php

 <div id="mainPanel">
            <form id="register_form" method="POST" action="PHP/register.php">
                <label for="username"> username </label>
                <input type="text" id="username" name="username" /> <br>
                <label for="pass"> password </label>
                <input type="password" id="pass" name="pass"/><br>
                <label for="confpass"> rpassword </label>
                <input type="password" id="confpass"/><br>

                <input type="button" value="register" id="submitBtn"/>   
            </form> 
        </div>

        <div id="mainPanel2">
            <form id="login2" method="POST" action="#">
                <label for="username">username </label>
                <input type="text" id="username2"/><br>
                <label for="password">password </label>
                <input type="password" id="password"/><br>
                <input type="submit" value="log in"/>          
            </form>
        </div>


and my js file



$(document).ready(function() {
    
    $('#mainPanel').hide();
    
     $('#signup').click(function(){ 
      $('#mainPanel2').hide();
      $('#mainPanel').show();
  }); 
    
     $('#login').click(function(){ 
      $('#mainPanel').hide();
      $('#mainPanel2').show();
     
  });






So what i do is to hide one div and show the other when the appropriate button is pressed.

This post has been edited by ChrisNt: 25 February 2014 - 09:54 PM

Was This Post Helpful? 0
  • +
  • -

#12 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Load html into div

Posted 26 February 2014 - 08:58 AM

What you are trying to achieve actually looks like a typical JQuery Mobile web page. Have you thought about using that library instead? Or is this a project that you are doing to increase your skill set? Obviously if you are only needing a simple toggle, you wouldn't want to load an entire library just for that purpose. I hope I am not insulting your intelligence by suggesting something so simple. It's all in good faith.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1