Wappler 2.7.1 Windows 10
I have some inputs which are part of a search mechanism.
One input is a select, which determines what to search for. It then dmx-shows one of 10 other inputs to allow the user to choose the value they want to search by - name, gender, age range, etc.
So far so good, it has been working well.
Then…
I decided I wanted the user to be able to add more search terms, so I have placed that structure in a repeat block.
Now the behaviour has gone really strange whereby the inputs keep de-selecting themselves and changing values are you type into them in an unexpected way.
I have pasted the code below, and sent a pm to @Teodor with details of the design to take a look at and steps to see the behaviour.
Best wishes,
Antony.
Here is the code.
search_terms_contact is a Data Store…
<div dmx-repeat:rg_search_terms_contact="search_terms_contact.data">
<div class="row m-3">
<div class="col">
<p class="debug_blue">Search By: ({{search_terms_contact.data.count()}})</p>
<p class="debug_blue">index:{{$index}}, id: {{$id}}</p>
<p class="debug_blue">combiner: {{combiner}}</p>
<p class="debug_blue">search_by: {{search_by}}</p>
<p class="debug_blue">search_for_text: {{search_for_text}}</p>
<p class="debug_blue">search_for_number: {{search_for_number}}</p>
<p class="debug_red">selected: {{i_contact_search_by.value}}</p>
<p class="debug_red">name: {{i_contact_search_name.value}}</p>
<p class="debug_red">gender: {{i_contact_search_gender.value}}</p>
<p dmx-on:click="search_terms_contact.insert({combiner: 'and', search_by: 'name', search_for_text: 'none', search_for_number: 0})" class="action_left m-0">Add another search term</p>
<p dmx-on:click="search_terms_contact.delete({$id: $id})" class="action_left m-0" dmx-show="$index>0">Remove this search term</p>
</div>
<div class="col_content_search col align-self-center" id="c_contact_search_options">
<!-- selection of what to search for -->
<select id="i_contact_search_by" class="select_search_type" name="contact_search_by" dmx-on:changed="search_terms_contact.update({$id: $id},{search_by: i_contact_search_by.value});notification.info('Value Changed!')">
<option value="name">Name</option>
<option value="activity">Activity</option>
<option value="activity_type">Activity Type</option>
<option value="activity_tag">Activity Tag</option>
<option value="contact_tag">Contact Tag</option>
<option value="region">Region</option>
<option value="age_range">Age Range</option>
<option value="gender">Gender</option>
<option value="brand">Brand</option>
</select>
<!-- value inputs - selected from above -->
<input novalidate id="i_contact_search_name" name="contact_search_name" type="text" class="input_search" placeholder="Contact name..." dmx-show="i_contact_search_by.value=='name'"
dmx-on:changed="search_terms_contact.update({$id: $id},{search_for_text: i_contact_search_name.value})">
<select id="i_contact_search_contact_tag" class="select_search" name="contact_search_contact_tag"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 10, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" dmx-on:click="" dmx-show="i_contact_search_by.value=='contact_tag'"
dmx-on:changed="search_terms_contact.update({$id: $id},{search_for_number: i_contact_search_contact_tag.value})">
<option value="0">Select Contact Tag...</option>
</select><select id="i_contact_search_region" class="select_search" name="contact_search_region"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 11, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" dmx-on:click="" dmx-show="i_contact_search_by.value=='region'">
<option value="0">Select Region...</option>
</select><select id="i_contact_search_activity_type" class="select_search" name="contact_search_activity_type"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 2, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='activity_type'">
<option value="0">Select Activity Type...</option>
</select><select id="i_contact_search_activity_tag" class="select_search " name="contact_search_activity_tag"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 1, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='activity_tag'">
<option value="1">Select Activity Tag...</option>
</select> <select id="i_contact_search_activity" class="select_search" name="contact_search_activity"
dmx-bind:options="events.data.activities.where(`is_a_demo`, show_demo_data.value, "==").where(`is_deleted`, 0, "==")" optiontext="title_internal" optionvalue="id"
dmx-show="i_contact_search_by.value=='activity'">
<option value="1">Select Activity...</option>
</select>
<select id="i_contact_search_gender" class="select_search" name="contact_search_gender"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 12, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='gender'" dmx-on:changed="search_terms_contact.update({$id: $id},{search_for_number: i_contact_search_gender.value})">
<option value="1">Select gender...</option>
</select>
<select id="i_contact_search_age_range" class="select_search" name="contact_search_age_range"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 13, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" dmx-show="i_contact_search_by.value=='age_range'">
<option value="1">Select age range...</option>
</select>
<select id="i_contact_search_brand" class="select_search" name="contact_search_brand" dmx-bind:options="brands.data.brands" optiontext="brand_name_internal" optionvalue="id" dmx-show="i_contact_search_by.value=='brand'">
<option value="1">Select brand...</option>
</select>
</div>
</div>
</div>
Community Page
Last updated:
Last updated: