• Resolved phil2030

    (@phil2030)


    I’m aiming to present a view of PDF research papers, displaying the icons and you can click and view the papers (see “Research Publications” tab on home page of https://www.ukrise.org – not the Publications link on the top menu which I’m aiming to replace since it’s quite a manual process). I’ve got the basics for this done, but now want to add a search function so that the view of papers can be filtered.

    Here is my MLA code that populates the tabbed view.

    [mla_gallery s="{+template:({+request:search-string+})+}" post_mime_type=application/pdf post_parent=all link=file columns=5 mla_markup=ul mla_target=”_blank” orderby=title order=asc attachment_tag=pubs posts_per_page=10 mla_rollover_text='{+title+}' mla_page_parameter='academic']

    [mla_gallery post_mime_type=application/pdf post_parent=all columns=5 mla_markup=ul attachment_tag=pubs posts_per_page=10 mla_output="paginate_links,prev_next" mla_link_href='{+site_url+}/?page_id=#tab-174582' mla_page_parameter='academic']

    [code_snippet id=7]

    The [code_snippet id=7] calls the form code, since the WP Tabs Pro plugin I’m using for the tabs feature limits what you can insert directly.

    <form id="mla-search-form" action="." method="post">
    <input id="mla-search-box" name="search-string" type="text" value="" />&nbsp;<input id="submit" name="submit" type="submit" value="Search" />
    </form>

    I use the page_id and mla_page_parameter to get the page to re-load the same tab view when clicking on a navigation link.

    I want to improve the search result to do the following;

    1. When I click the search button, it also adds the page_id and mla_page_parameter so that the page reloads like when clicking on the paginated links.
    2. When the search page returns, the applied search term is shown in search input field, highlighting the filter used.

    Hoping these are things that can be added with some simple modifications to the above code? Your help would be appreciated.

    • This topic was modified 7 months, 1 week ago by phil2030.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thanks for your question and for your patience in awaiting my response. Thanks as well for posting the complete text of your shortcodes and HTML form, with a link to your site; very helpful.

    I was able to modify your shortcodes and form to get the results you seek, adding one of MLA’s Example Plugins to make the search text “sticky”. First, some comments on your current shortcodes and form.

    You wrote “I use the page_id and mla_page_parameter to get the page to re-load the same tab view when clicking on a navigation link.” The #tab-174582 value is an HTML “anchor link”, which is appended to a hyperlink to navigate to a specific part of the page. The page_id= is not needed nor used. You can see this if you look at the pagination links you have now, e.g. https://www.ukrise.org/?page_id=&academic=2#tab-174582. You can see that the anchor has been moved to the end of the link and the page_id argument is empty.

    In your current shortcodes, the pagination controls generated by the second [mla_gallery] shortcode do not reflect the keyword search filter. The data selection parameters of both shortcodes must be identical, i.e., you must add s="{+template:({+request:search-string+})+}" to the current pagination shortcode.

    Moving on to your two desired improvements, the first improvement can be accomplished by a slight modification to the HTML form. Simply change the action="." attribute to action=".#tab-174582". The mla_page_parameter is not needed in the form, only in the shortcodes. When you add or change the search text the pagination values will change and the gallery display should start at the first page of the new results.

    Your second improvement, making the search text “sticky”, requires the addition of an MLA Example Plugin. To install the example plugin, navigate to the Settings/Media library Assistant Documentation tab and click the “Example Plugins” button. Type “user” in the text box and click “Search Plugins” to filter the table.

    You are looking for the “MLA UI Elements Example” plugin. Find that plugin and hover over the title in the left-most column. Click the “Install” rollover action, then go to the WordPress Plugins/Installed Plugins submenu and activate the example plugin as you would any other plugin. Once the example plugin is active you can modify your shortcodes and form to implement the second improvement. You can find more information about the UI elements in the Settings/MLA UI Elements Documentation tab.

    Here, then, are the shortcodes and form that should give you the results you seek. I have made some remarks about the changes below them.

    [mla_gallery add_filters_to="any" post_mime_type=application/pdf post_parent=all attachment_tag=pubs posts_per_page=10 link=file columns=5 mla_markup=ul mla_target=”_blank” orderby=title order=asc mla_rollover_text='{+title+}' mla_page_parameter='academic']

    [mla_gallery add_filters_to="any" post_mime_type=application/pdf post_parent=all attachment_tag=pubs posts_per_page=10 mla_output="paginate_links,prev_next" mla_link_href='{+page_url+}/{+query_string+}#tab-174582' mla_page_parameter='academic']

    <form id="mla-search-form" action=".#tab-174582" method="post">
    [muie_keyword_search]&nbsp;<input id="submit" name="submit" type="submit" value="Search" />
    </form>

    In the form, I have modified the action=".#tab-174582" argument as discussed above. I have also replaced the search text input text box with the [muie_keyword_search] shortcode that generates a “Sticky” text box and passes the search text on to the two [mla_gallery] shortcodes.

    In both shortcodes I have replaced the s="{+template:({+request:search-string+})+}" parameter with add_filters_to="any". This signals the example plugin to add the search text from the [muie_keyword_search] shortcode to the gallery and pagination filters.

    Finally, in the pagination shortcode I have modified the mla_link_href parameter. The {+page_url+} parameter is like your {+site_url+} parameter but will work for any page in the site. The {+query_string+} parameter adds the search text value to the pagination links so the filter is maintained when moving to a new gallery “page”. The #tab-174582 value at the end of the link ensures that the proper tab is active when the page refreshes. I have also removed some parameters not used in pagination controls (columns and mla_markup).

    I hope that works for your application. I am marking this topic resolved, but please update it if you have any problems or further questions regarding the above suggestions. Thanks for an interesting question and for your interest in the plugin.

    Thread Starter phil2030

    (@phil2030)

    Thanks for taking the time to look at this and providing the code improvements. I’ve installed/enabled the referenced plugin and replaced the short codes and form content.

    Initially the search entry field was not showing, rather it was interpreted as just a text string “[muie_keyword_search]” but then I spotted there were options in the snippet to enable the interpreting of shortcodes, so I amended the code snippet call to [code_snippet id=7 shortcodes] and it now shows up properly.

    I do have one remaining issue with the pagination links not re-loading with the correct tab view. I’ve set the updates on the live site so you can have a look. If you go to https://www.ukrise.org/#tab-174582 and then click on a paginated link, it comes back showing the first tab, rather than #tab-174582 view?

    • This reply was modified 7 months ago by phil2030.
    Plugin Author David Lingren

    (@dglingren)

    Thanks for updating your application and providing a link to the current results. I have identified two problems with the pagination links.

    First, there is an extra slash in the URL (my fault). You should change your parameter to mla_link_href='{+page_url+}{+query_string+}#tab-174582', removing the slash between the URL and the query string.

    Second, you have encountered a defect in the current MLA version. The ampersand between the query arguments has been escaped, i.e., academic=2#038;muie_per_page=10 instead of academic=2&muie_per_page=10.

    I have uploaded a new MLA Development Version dated 20240813 that corrects the problem. You can find step-by-step instructions for using the Development Version in this earlier topic:

    How to download & install the current development version of MLA

    Once the Development Version is installed you can retest the handling of pagination links in your application.

    The fix will be part of my next MLA version, but in the interim it would be great if you could install the Development Version and let me know if it works for you. Thanks for alerting me to this MLA defect.

    Thread Starter phil2030

    (@phil2030)

    I’ve updated the link to remove the extra slash and installed the development version of MLA and it all seems to be working as expected now.

    Thanks for all the help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding Search Form’ is closed to new replies.