Forum Discussion

iftomkins's avatar
iftomkins
Maven
10 years ago

How to dynamically output mobile search input "t:formdata" value

Hi!

 

Our mobile community site search broke last night. The reason is that the t:formdata value in the mobile search component below was hardcoded. Hardcoding it was the only way we could make the mobile search work for us.

 

Does anyone know how to make this value dynamic, or to output the mobile search component in a way that's friendly for custom designs?

 

Here is the code from our mobile search custom component:


<form enctype="multipart/form-data" class="lia-form lia-form-inline lia-js-search-form-wrapper lia-component-search-form" action="/t5/custom/page.mobileheader.simplesearchform.form.form.form" method="post" id="form" name="form" style="display: block;"><div class="t-invisible"><input value="page-id/mobile-home" name="t:ac" type="hidden"><input value="mobile/contributions/contributionpage" name="t:cp" type="hidden"><input value="rO0ABXNyADRsaXRoaXVtLnRhcGVzdHJ5LmRhdGEucGFyYW1ldGVyLkVudmlyb25tZW50UGFyYW1ldGVys1QW1EpyAN8CAAFMAA1lbnZQYXJhbWV0ZXJzdAAPTGphdmEvdXRpbC9NYXA7eHBzcgAlamF2YS51dGlsLkNvbGxlY3Rpb25zJFVubW9kaWZpYWJsZU1hcPGlqP509QdCAgABTAABbXEAfgABeHBzcgARamF2YS51dGlsLkhhc2hNYXAFB9rBwxZg0QMAAkYACmxvYWRGYWN0b3JJAAl0aHJlc2hvbGR4cD9AAAAAAAAMdwgAAAAQAAAAAnQAC2NvbXBvbmVudElkdAAbbW9iaWxlLndpZGdldC5tb2JpbGUtaGVhZGVydAAEbW9kZX5yACBsaXRoaXVtLndlYi5xdWlsdC5Db21wb25lbnRNb2RlcwAAAAAAAAAAEgAAeHIADmphdmEubGFuZy5FbnVtAAAAAAAAAAASAAB4cHQAB0RFRkFVTFR4" name="lia-form-context" type="hidden"><input value="mobile-home:page-id/mobile-home:mobileheader.simplesearchform.form.form:" name="liaFormContentKey" type="hidden"><input value="M9CO3Jbr8yGd54r47Im1A+EBdNc=:H4sIAAAAAAAAANVVPWgUQRSenAiRw7+AsU0RJSlu95K7E4mKxCMxyJFEFxNS6DG7++5udGZnMjOXuyBaWVjY2wmCncbWTsQUksZGsRXBVhAVGxWcvb3gpREXbiQ2O8ybt9/73vfN8B5/RHtbF9EC4z6h4AY80pL4TU14pNxyz24R12EqyWoADkE6ijBBQQGWQaPGJXM6H8q5qOaVRA6XdQcLHDTA0ViA0nK95ARcAiW+WZngEURaORXzx+jkZ1EbPz/86GwGobbYDYwKz8duzxW+biBLjCZW0S00YAl3T/9xC6kVLOUWtt6OoxtblhRMz2hi5cPGl9rT1w8sMppPxeiSOTdHnsYaZiVnXrwLy5SYlCVMm5C79+LNHTTyM4MGKigb/D7QaKhyDa9hl+Ko7nqGcFQ/1RYaDWJKl7kMVWsFLfetPyG5AKnXISSGoulzihLdIE3mtMCf7O2LEmexmzzTSR71QDfFTLRGJI+YyblwOLP6ruDmOj0NbiPH93ZfW8RLtjWGjvuUB9fdXqhzcURtF1adlg2T0h8V97ECZ9o3QRzoWQI0TPgcu7yZfX/k5Y+usLEknM5jBl0evUKmYTOdlo3BDEApr+kzopSxZPNJWKx9u/8quaRWTTz99yaWKeBoh41s6dnNkbmj33fN8y5aHiLpGZ3IH/p08urDu2dsDpFhC+PSEm7R0tArJkOviq70DVfF71F3lxgO2lrFZQ5otD+JlpOo9bJx1SFLotky+d+ZcXCHGdX8/23HL9Ke1PWRCwAA" name="t:formdata" type="hidden"></div>


<div class="lia-inline-ajax-feedback">
<div class="AjaxFeedback" id="feedback"></div>

</div>
<div class="lia-inline-ajax-feedback">
<div class="AjaxFeedback" id="feedback"></div>

</div>

<input value="ECMCu2TgHac2_309" name="ticket" type="hidden">
<input value="form" id="form_UID" name="form_UID" type="hidden">
<input value="" id="form_instance_key" name="form_instance_key" type="hidden">

<div class="lia-quilt-row lia-quilt-row-standard lia-quilt-row-first lia-quilt-row-last">
<div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single">
<div class="lia-quilt-column-alley lia-quilt-column-alley-single">
<div class="lia-form-row lia-form-all-words-entry">
<div class="lia-quilt-row lia-quilt-row-standard">
<div class="lia-quilt-column lia-quilt-column-24 lia-quilt-column-single">
<div class="lia-quilt-column-alley lia-quilt-column-alley-single">
<div class="lia-form-input-wrapper">
<input class="lia-form-all-words-input lia-form-type-text lia-form-input-vertical" id="lia-allWords" name="allWords" type="search" placeholder="${text.format('search.field.title')}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="lia-form-footer">
<div class="lia-form-submit lia-button-group">
<span class="lia-button-wrapper lia-button-wrapper-primary lia-button-wrapper-Submit-action"><input value="Submit" name="submitContextX" type="hidden"><input title="" class="lia-button lia-button-primary lia-button-Submit-action" value="&gt;" id="submitContext" name="submitContext" type="submit"></span>
<span class="lia-button-wrapper lia-button-wrapper-primary lia-button-wrapper-advancedSearch-action"><input value="advancedSearch" name="submitContext_0X" type="hidden"><input title="" class="lia-button lia-button-primary lia-button-advancedSearch-action" value="Advanced Search" id="submitContext_0" name="submitContext_0" type="submit"></span>
</div>

</div>

</form>

4 Replies

Sort By
  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    10 years ago

    Hi 

     

    not sure what is the background and what you are trying to accomplish, however I don't think that the t:formdata value is a customization contract point. That is, we do not support customizations that rely on using that value directly.

     

    What I suggest is to get in contact with Support and try to determine what is the real reason for your issue, which seems to be that your mobile search feature does not work.

     

    Thanks,

  • iftomkins's avatar
    iftomkins
    Maven
    10 years ago

    PaoloT , this is the issue that forced me to use the static code for the search input: 

     

    http://community.lithium.com/t5/Developers-Discussion/Search-appearing-as-quot-Go-quot-on-iPhone-How-to-change-the/m-p/134387

     

    In short, the input type is incorrect on the mobile search component. It should be type = "search". Can this issue be fixed on the Lithium side? If so, then I can look into using the default mobile component. If not, perhaps you have a workaround so that the changing T-value doesn't break our current code?

     

    - Alan

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    10 years ago

    Hi iftomkins 

     

    my assessment is that it sounds a bit overkill to replace completely the search component for what seems to be a cosmetic issue (i.e. "Go" vs "Search" wording on the iPhone). 

     

    If this is an issue that needs resolving, then my assessment is the same as the last time, that is to build a custom search component. If this is done, it should be achieved via our standard customization points (that is, REST APIs and in particular I would suggest to leverage LiQL which has been added since I wrote my original reply there). 

     

    Playing with t:formdata directly unfortunately is not supported.

     

    I hope this gives you some pointers on how to proceed!

     

    Thanks,

  • nathan's avatar
    nathan
    Executive
    10 years ago

    Instead of trying to directly trying to change the 'type' attribute via jQuery, have you tried replacing the input element alltogether (with jQuery)?

     

    I had a quick experiment, and this seems to work for me:

     

    $('.lia-component-search-widget-simple-search-form div.lia-form-input-wrapper').innerHTML = '<input class="lia-form-all-words-input lia-form-type-text lia-form-input-vertical" id="lia-allWords_0" name="allWords" type="search">'

     You also need to create some CSS rules for the input[type=search] that replicate the input[type=text] rules.