Help required if possible?
As you will see from below, I have a page which I need to generate multiple buttons based on the returned rows from an MS SQL query.
If the amount button data returned from the query is for example 6 buttons, then I need to show six buttons with the ‘value’ and ‘name’ set from the database query? If there was only 5 buttons, then I should only show 5.
As I am trying to perform all actions via Wappler, any help would be much appreciated.
Thanks,
Ray.
You firstly need a repeat region based on the server connection to generate 1 column per result then set the text of the buttons via the dynamic attributes => Inner Text (or Inner HTML) to the values of the monetary values returned by each row
Hi @Hyperbytes, thanks for the reply. I did what I think you suggested, a repeat on the column.
<div class="col" dmx-repeat:test="data_view1.items">
<button class="btn btn-primary w-100 h-100 btn-lg posbutton" dmx-bind:data-value="data_view1.data[0].mmValue" dmx-bind:data-name="data_view1.data[0].strName">{{data_view1.data[0].strName}}</button>
</div>
So, OK I now have a column created for all the returned rows in the data view, however, now I have two new problems to overcome or maybe I just implemented what you suggested incorrectly?
As you can see for the screenshot all the columns are repeated to the right, where I wanted rows of 3, and secondly, each button is being populated with the values of the first row.
Thanks in advance for your help.
Ray.
Problem One: Give your column a width of 4. This will create three buttons across.
Problem Two: Bind the value from within your repeat NOT from the server connect.
Hi @brad. Thanks for your input.
So I have now sorted both of these problems as per your instructions and its working perfectly.
But as always with anything I do, I now have a new problem.
If I look at the generated HTML for a button, say the 1.75 one,
It looks perfect with the value populated as aspected.
However, when I add some JS which is supposed to fire the value, nothing happens.
<script type="text/javascript">
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
</script>
If I create a static button with the same values, it works fine.
If you can help me out that would be great thanks.
Ray.
Hi @raymantle,
Please try not to use any custom javascript when it is not needed and you don’t fully understand what it does.
You can do all the click actions with the app connect dynamic events. Choosing the action you want - there is absolutely no reason for custom scripting here.
Glad your first two issues are solved, Ray. Unfortunately I am not a javascript code guru so not much help to you there.
Hi @George,
I know the example JS doesn’t actually do much other than fire up a message of that value, but I was using it to validate an issue I am having with some JS I was planning(though I would need) to sum the value from the button each time they were pressed and inserting it into the total input field.
Believe me, if I knew how to perform the same intended action via Wappler alone I would.
I’ll see if I can figure out how to create a running total from each of the buttons clicks as per your information on the “click actions with the app connect dynamic events”, but if you know how to do it easily, then I would be grateful.
Thanks, Ray.
As I said you don’t need js for this.
Just do something like:
You might lookup some old topics from @norcoscia building a whole pizza recipe calculator this way but running totals is just as easy
@George, I will look into it and I do agree that JS should not be used.
Thanks,
Ray.