How to change a HUBL variable value dynamically depending on the user input through Jquery

[Mohesh_Borah]

Hi All,

I am trying to set/update the hubl variable through jquery inside the module while end-user will provide a value into the input field.

But inside {% require_js %} I am able to print the variable and user input but UNABLE to append the user input dynamically with the hubl variable.

Hence could anyone of you please confirm whether this is feasible or not.

If feasible please help me out that how to achieve it.

PFB details of my code-

<div class="modal-fade bw-water-quality-cheks-result">
{% set queryParams = "" %}
{% for row in hubdb_table_rows(2899227, queryParams) %}
<h2>Postcode ::: {{ row.postcode }}</h2>
<h2>Treatment Summery ::: {{ row.treatment_summary }}</h2>
<h2> {{ row.wsz }} </h2>
<h2> {{ row.area_of_supply }} </h2>
<h2> {{ row.hardness }} </h2>
<p> {{row.sourcesupply_description}} </p>
{% endfor %}
</div>

{% require_js %}
<script>
$(document).ready(function() {
$("#bw-wq-search-button").click(function(){
//show Modal
var searchInput = $("#bw_wq_search_input").val();
console.log(searchInput)//gives as the user input => 'GL7'
{% set queryParams = "postcode__contains=" +searchInput %}//gives => 'postcode__contains=null'
console.log("{{ queryParams }}")
});
});
</script>
{% end_require_js %}

Thanks in advance,

Mohesh Borah

[Mohesh_Borah]

Thank you all for your valuable feedback 😊.

As this can't acheived as I was trying I have started to achieve this requirement with the help of serverless function.

[alyssamwilie]

@Mohesh_Borah You can't use Javascript variables within HubL because HubL is a server-side language that runs before the Javascript does.

[Kevin-C]

Hey @Mohesh_Borah 

This is not possible as HubL isn't client side and is executed before JS.

Meaning you can pass data from HubL to JS but not from JS to HubL.

I'm referencing the Hubspot Academy Video titled "Fundamentals of HubL".

You can build the URL with JS and redirect the page with the appended parameters with jQuery:

<script>
    $(document).ready(function () {
      $("#bw-wq-search-button").click(function (e) {
        e.preventDefault();
        //show Modal
        var searchInput = $("#bw_wq_search_input").val();
        console.log(searchInput) //gives as the user input => 'GL7'
        if (searchInput){
          window.location.href = window.location.href + '?' + searchInput;
        }
      });
    });
  </script>

Then use HubL to read that parameter from the URL  with HubL using request.query


[dennisedson]

Hey @Mohesh_Borah 

Thanks for the question,

Perhaps @alyssamwilie  or @dbeau79  could help here 😀