www.webdeveloper.com
Results 1 to 5 of 5

Thread: Refresh a div content after login

  1. #1
    Join Date
    Jun 2013
    Location
    Bangalore
    Posts
    8

    Refresh a div content after login

    I am currently working on Ajax-Jquery,
    - When user signin using Lightbox , after signin verification it will lead to the previous page without any refresh.
    - Now my problem is after successful signin , I want to refresh the content of div in header portion without refreshing the whole page.
    - Like Welcome User , my Account etc...
    - Now i am able to retain in the previous page(but the header portion is able to refresh).
    - the reference link below http://stackoverflow.com/questions/2...ogged-div?rq=1
    - My try is ,
    Code:
    Code:
    <script>
        $(document).ready(function(){
            $("#signin").submit(function(e){
                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");
                $.ajax({
                    url : formURL,
                    type: "POST",
                    data : postData,
                    success:function(data) {
                        $(".message").html(data); // header portion with welcome message will appear here , i want to replace the link from (login,Register-> Welcome user , Myaccount)
                    },
                    error: function(errorThrown) {
                        $("#overlaypage").html(errorThrown);
                    }
                });
                e.preventDefault();    //STOP default action
                e.unbind();
            });
        });
    </script>

  2. #2
    Join Date
    Apr 2014
    Posts
    4
    You have a couple of options here:

    Options 1: Return correct markup

    When a user successfully logs in, you can use your Server Side technology to return the correct markup and then simply replace the header div with the new div which is returned.

    Code:
    <script>
        $(document).ready(function(){
            $("#signin").submit(function(e){
                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");
                $.ajax({
                    url : formURL,
                    type: "POST",
                    data : postData,
                    success:function(data) {
                        $("#header").replaceWith(data);  // You can use .replaceWith or .html depending on the markup you return
                    },
                    error: function(errorThrown) {
                        $("#overlaypage").html(errorThrown);
                    }
                });
                e.preventDefault();    //STOP default action
                e.unbind();
            });
        });
    Option 2: Building the markup/templating

    You can simply build the markup in your Javascript using the data returned from your successful login. This would involve you returning the necessary data in JSON when a User logs in successfully, then using that to build an HTML string. Alternatively, you can use a templating system like Handlebars to build the HTML string.

    Options 3: Use AJAX to load page fragments

    Note: This will only work if you already have a non-AJAX implementation of the logged in header

    Now that you are logged in, assuming all the correct cookies/session data is set so that next time you reload the page, the correct header will be in place, you can use AJAX to request the new Header Div:

    Code:
    $( "#header_div" ).load( "homepage.php #header_div" );
    This would, as the code suggests, make an AJAX request to homepage.php, extract the contents of #header_div and replace the "#header_div" on your page with it.

    Hopefully some of these helped!

  3. #3
    If you want to reload only div without refreshing the whole page then try with code like this.
    <script type="text/javascript">
    window.onload = function(){


    var auto_refresh = setInterval(
    function ()
    {
    $('.View').html('');
    $('.View').load('abc.php').fadeIn("slow");
    }, 15000); // refresh every 15000 milliseconds

    }
    </script>

  4. #4
    Join Date
    Jun 2013
    Location
    Bangalore
    Posts
    8
    Thanks for your reply ,
    But i Want to update only when the user "Signin" or "Signout" .
    I will have user info in the $_SESSION , by which i want to update the header as follows
    If(isset($_SESSION['user']))
    {
    echo "welcome".$_SESSION[''user];
    echo "Logout";
    }
    else
    {
    echo "Signin";
    }

    So , after signin i just want to refresh the header to update the "welcome" .

  5. #5
    Join Date
    Jun 2013
    Location
    Bangalore
    Posts
    8
    Thanks for your detailed response,
    I have tried with your
    Option 1(.replaceWith)
    - It works fine in the same page (after signin) , But the after moving to next page header retain as non login user.
    Option 3(.load)
    - Its repeating the header portion two times, because i already included the header file in the beginning of every file.
    $( "#header_div" ).load( "header.php");
    - My header file code follows,

    If(isset($_SESSION['user']))
    {
    echo "welcome".$_SESSION[''user];
    echo "Logout";
    }
    else
    {
    echo "Signin";
    }

    So I dont want to fetch new data from external file, Instead i just want to refresh the header content.
    Now I just hard core the "Welcome note" in the signin verification file and filling that in the header portion.

    $("#header").empty().html(data);

    Whether i am doing correct way ,, please give any suggestion.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles