Home of the Squeezebox™ & Transporter® network music players.
Results 1 to 7 of 7
  1. #1
    Senior Member
    Join Date
    Jul 2010
    Location
    Oz
    Posts
    495

    Updating Template Toolkit generated HTML content without page reload?

    Hi.

    I have an html page that includes content generated with the Template Toolkit. Here's an example:
    Code:
    <select name="genreselect" id="genreselect">
    	[% FOREACH genre = librarygenres %]
    		<option value="[% genre.id %]" [% IF genre.id == genreselect %]selected='selected' [% END %]>[% genre.name %]</option>
    	[% END %]
    </select>
    I need to update this content if a JS script changes a param/pref value (because the genrelist (librarygenres) changes).
    Right now I just reload the page - which works but it's not 'nice'.

    Can this be done without a page reload?
    I didn't find anything in the Template Toolkit docs.
    So more specifically: does LMS offer anything in this regard or do know you whether it's already used in LMS or some plugin?

    Thank you.
    For bug reports, FAQ (if available) and more detailed information about my plugins, please see the GitHub page or the first post in the support thread for a plugin. Please post bug reports for my plugins only on GitHub. Thank you.

  2. #2
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,775

    Updating Template Toolkit generated HTML contentwithout page reload?

    > Can this be done *without* a page *reload?*

    Of course: JS can modify anything on that page.

    > I didn't find anything in the Template Toolkit docs.


    TT is server side. If you want to manipulate the page without a full
    page reload, you'll have to handle this in the browser, using JS.

    > So more specifically: does LMS offer anything in this regard or do know
    > you whether it's already used in LMS or some plugin?


    LMS uses this all over the place. Eg. the status section top right is
    all dynamically updated.

    From your question I understand you're not familiar with "AJAX" etc.?
    Even less so with the framework we're using, ExtJS?...

    It would probably be easiest to look into your existing JS code, the one
    which triggers the pref change. I could probably point you at examples
    of similar code in other places.

  3. #3
    Senior Member
    Join Date
    Jul 2010
    Location
    Oz
    Posts
    495
    Quote Originally Posted by mherger View Post
    From your question I understand you're not familiar with "AJAX" etc.?
    Even less so with the framework we're using, ExtJS?...

    It would probably be easiest to look into your existing JS code, the one
    which triggers the pref change. I could probably point you at examples
    of similar code in other places.
    I've used ajax before but not ExtJS I think.
    The html page (with the JS code) is here. If you select a different virtual library at the top, it'll set the pref value to the VL id (needed for the SQLite queries) and reload the page to update the genre + decade list - which is what I'd like to change, if possible.
    For bug reports, FAQ (if available) and more detailed information about my plugins, please see the GitHub page or the first post in the support thread for a plugin. Please post bug reports for my plugins only on GitHub. Thank you.

  4. #4
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,775

    Updating Template Toolkit generated HTML contentwithout page reload?

    > The html page (with the JS code) is 'here'
    > (https://github.com/AF-1/lms-visualst...html/list.html).
    > If you select a different virtual library at the top, it'll set the pref
    > value to the VL id (needed for the SQLite queries) and -reload- the page
    > to -update the genre + decade list- - which is what I'd like to change,
    > if possible.


    Ok, I guess that you need to replace the window.location.href
    instrucation around line 1122 with the code to update your page. What
    element on that page did you want to update?

  5. #5
    Senior Member
    Join Date
    Jul 2010
    Location
    Oz
    Posts
    495
    Quote Originally Posted by mherger View Post
    > The html page (with the JS code) is 'here'
    > (https://github.com/AF-1/lms-visualst...html/list.html).
    > If you select a different virtual library at the top, it'll set the pref
    > value to the VL id (needed for the SQLite queries) and -reload- the page
    > to -update the genre + decade list- - which is what I'd like to change,
    > if possible.


    Ok, I guess that you need to replace the window.location.href
    instrucation around line 1122 with the code to update your page. What
    element on that page did you want to update?
    I'd have to get the updated genre list (line 917) and decade list (line 924) from the server for these 2 select elements.
    For bug reports, FAQ (if available) and more detailed information about my plugins, please see the GitHub page or the first post in the support thread for a plugin. Please post bug reports for my plugins only on GitHub. Thank you.

  6. #6
    Babelfish's Best Boy mherger's Avatar
    Join Date
    Apr 2005
    Location
    Switzerland
    Posts
    20,775

    Updating Template Toolkit generated HTML contentwithout page reload?

    > I'd have to get the updated genre list (line 917) and decade list (line
    > 924) from the server for these 2 select elements.


    You'd have to come up with a CLI query to get those values, then update
    the select box, see eg.
    https://www.javascripttutorial.net/j...emove-options/

  7. #7
    Senior Member
    Join Date
    Jul 2010
    Location
    Oz
    Posts
    495
    For some reason I can't remember now I had it in my head that the template toolkit should be involved, hence the reload. Pure JS is much smoother/nicer. Still needs some testing but it seems to be working just the way I intended. Thank you.
    For bug reports, FAQ (if available) and more detailed information about my plugins, please see the GitHub page or the first post in the support thread for a plugin. Please post bug reports for my plugins only on GitHub. Thank you.

Posting Permissions

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