#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3

    Reload / Refresh div content in pure Javascript


    Dear all,

    Is there a pure (raw) javascript command / code to re-load / rrefresh a div in html?

    I've tried using Jquery but throws an error, I am not fan of Jquery. Is there any similar thing in pure javascript?

    Code:
    $( "#table_id" ).load(window.location.href + "#table_id" );
    But this just takes the entire page and dumps in to the ''#table_id' and also gives error on console.log.

    error:
    Code:
    SyntaxError: redeclaration of let Assets
    assets:1:1
    
    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    The synchronous thing is a jQuery issue. If it's not fixed in the most recent version then I'm sure they'll fix it eventually.

    Putting #table_id on the end of a URL is only about telling the browser where to move to when it loads the page. It will load all the content regardless so you don't want that.

    The proper "raw" solution involves a fair amount of code. Are you sure you don't want to use a Javascript framework? It doesn't have to be jQuery.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Originally Posted by requinix
    The synchronous thing is a jQuery issue. If it's not fixed in the most recent version then I'm sure they'll fix it eventually.

    Putting #table_id on the end of a URL is only about telling the browser where to move to when it loads the page. It will load all the content regardless so you don't want that.

    The proper "raw" solution involves a fair amount of code. Are you sure you don't want to use a Javascript framework? It doesn't have to be jQuery.
    Thank you Mr requinix for your reply. Yes thats the problem I am having, instead of refrefreshing just the div so that new content is loaded from the database, I get garbage get loaded.
    Isnt't there any function in javascript like
    Code:
    document.querySelector('#table_id).load / reload? so that it only targets that particular DIV?
    I havent actually advanced that far to get in to any frame work. First trying to learn few basics from raw modern javascript. Not much on the web
    about reloading page or web element using javascript.
  6. #4
  7. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    No, there is no such thing.

    If you're not too familiar with Javascript yet then I suggest setting aside this approach for now and trying something a little simpler:

    Make a way for that page to output just the table you want. No <html> or <body> or anything else that's on the page except for that one table. You can use a query string to tell the page to use that behavior, such as ?ajax=table, which you would work into your Javascript as
    Code:
    $( "#table_id" ).load(window.location.href + "?ajax=table");
    The Assets error should go away. The synchronous AJAX warning will remain but you can ignore it.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Originally Posted by requinix
    No, there is no such thing.

    If you're not too familiar with Javascript yet then I suggest setting aside this approach for now and trying something a little simpler:

    Make a way for that page to output just the table you want. No <html> or <body> or anything else that's on the page except for that one table. You can use a query string to tell the page to use that behavior, such as ?ajax=table, which you would work into your Javascript as
    Code:
    $( "#table_id" ).load(window.location.href + "?ajax=table");
    The Assets error should go away. The synchronous AJAX warning will remain but you can ignore it.
    Well the table is a HTML table. Constructed using bootstrap 4. So the div I was talking about is the DIV table residing in. You can see this has PHP data coming in.
    What my initial thinking was, once the form is submitted then only refresh the particular div to fetch and refresh the table with new data.

    The form I am using is the bootstrap 4 modal which I have prevented from refreshing the page after submit.

    Code:
    <div class="container-fluid"  id="table_id">
    <div class="row">
    <div class="card col-xl-10 col-lg-10 offset-1">
    <table class="table table-hover table-sm" id="asset-table">
    <thead>
        <tr>
          <th>Asset Number</th>
          <th>Description</th>
        </tr>
      </thead>
          <tbody id="tbody">
         <?php foreach($data['assets_data'] as $assets) : ?>
         
        <tr>   
          <td><?php echo $assets->asset_num; ?></td>
          <td><?php echo $assets->descriptions; ?></td>
        </tr>
        <?php endforeach; ?>
        </tbody>
        </table>
        </div>
      </div>
    </div>
    Last edited by Brume007; March 8th, 2018 at 09:14 AM.
  10. #6
  11. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    Sure but "only refresh the particular div" is not a thing in HTML or Javascript.

    Either you retrieve the entire page in AJAX and extract only the table (this is the complicated version) or you make the page capable of only outputting the table.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Originally Posted by requinix
    Sure but "only refresh the particular div" is not a thing in HTML or Javascript.

    Either you retrieve the entire page in AJAX and extract only the table (this is the complicated version) or you make the page capable of only outputting the table.
    I thought I take your suggestion and dive in to AJAX, I've read quite a bit not as scary as I initially thought. But I am using vanila javascript ajax. I've managed to work something out
    but a small problem draging me down.

    When php custom message is sent to ajax, JSON.parse throws an error. I can jason_encode mysql result, and send to javascript JSON.parse without any issue. But if anything else comes from the php
    pages, like error messages , it does not like it.

    Here is what it does:

    when I 'console.log'

    Code:
    {"msg":"File uploaded Successfully"}
    [{"asset_id":"132","part_num":"TEST12345","serial_num":"LOT123","asset_num":"ASET123","descriptions":"This is a test message.","category_id":"6","loc_id":"6","operator_id":"2","file_name":"3659012_090318.JPG","date_created":"2018-03-09","flag":"0","stock_area":"3","stock_container":"Shelf A2"}]
    JSON parsing error
    Code:
    SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 37 of the JSON data
    I've tried to turn the php message in to php json format. But I dont think I am doing it right.

    PHP Code:
                $this->err = ['msg' => 'File uploaded Successfully'];
                echo 
    json_encode($this->err); 
    Any suggestions how to resolve this?
    Last edited by Brume007; March 9th, 2018 at 12:10 PM.
  14. #8
  15. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,916
    Rep Power
    9646
    The entire output must be one complete JSON thing. You can't do both an error message and the data as two separate values.

    Instead put both into one object, such as
    PHP Code:
    echo json_encode([
        
    'result' => true,
        
    'msg' => 'File uploaded Successfully',
        
    'data' => ...
    ]); 
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    [QUOTE=requinix;2983922]The entire output must be one complete JSON thing. You can't do both an error message and the data as two separate values.
    Thanks for the suggestion. I've now got it working. Thanks a lot.
    Last edited by Brume007; March 9th, 2018 at 04:47 PM.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2016
    Posts
    109
    Rep Power
    3
    Thank you Mr requinix for all the help. I've now realise the potential of Javascript working with DOM. Now I am able to code in Javascript and get the page to re-load with out any hasle. All the trouble I had in the begining of this post
    seems to have gone to minimal level. Thanks again.

IMN logo majestic logo threadwatch logo seochat tools logo