Hi Sven,
I think that the solution (star-rating as ajax) might be something like that in
Javascript:
var $attrchange = $('div', '.star-rating-control');
$attrchange.attrchange({
trackValues: true,
callback: function (e) {
if ( $( this ).hasClass( "star-rating-on" ) ) {
$('input[name=radio1]').trigger('click');
}
}
});
The method #AjaxFormChoiceComponentUpdatingBehavior is now called correctly.
br Chris
> Am 18.04.2015 um 18:38 schrieb Chris <[email protected]>:
>
> Hi Sven,
>
> here is the URL: http://meetselva.github.io/attrchange/
> <http://meetselva.github.io/attrchange/>
>
> the attrchange plugin now basically works but I am still figuring out if it
> is possible to use this to detect changes in the star rating:
> The star rating plugin renders for each input field additional a div element
> and if the star is shown a certain value is added to the class attribute,
> e.g. star-rating-on.
>
> <div role="text" aria-label="" class="star-rating rater-0 star
> wicket__type17d9 star-rating-applied star-rating-live"
> id="tt1__field117e0"><a title="radio16">radio16</a></div>
>
> The plugin of the star rating can be found here:
> https://www.fyneworks.com/jquery/star-rating/
> <https://www.fyneworks.com/jquery/star-rating/>
>
> Chris
>
>
>> Am 18.04.2015 um 18:28 schrieb Sven Meier <[email protected]>:
>>
>> Hi,
>>
>> please give us the url of the plugin you're trying to use.
>>
>> Sven
>>
>> On 18.04.2015 16:44, Chris wrote:
>>> Hi Sven,
>>>
>>> there is the JS plugin to detect changes in attributes (this might help to
>>> detect changes in the star-rating.
>>> http://meetselva.github.io/attrchange/
>>> <http://meetselva.github.io/attrchange/>
>>> This works fine in a pure html-file, but in Wicket the JS function is not
>>> called (see below). I have created a quick start project:
>>> https://github.com/cat1000/AttrChange
>>> <https://github.com/cat1000/AttrChange>
>>>
>>> Would you mind to have a look at it?
>>>
>>> $attrchange.attrchange({
>>> trackValues: true,
>>> callback: function(e) {
>>>
>>> }
>>> });
>>>
>>> Thanks, Chris
>>>
>>>
>>>> Am 18.04.2015 um 14:41 schrieb Chris <[email protected]>:
>>>>
>>>> Hi Sven,
>>>>
>>>> I tried following function but that still does only work with JQuery
>>>> Rating JS disabled.
>>>> With JQuery Rating, the function is not called.
>>>>
>>>> $('input[name=field1_type]').change(function() {
>>>> trigger('click');
>>>> });
>>>>
>>>>
>>>> Below is the HTML code when Rating JS is enabled:
>>>>
>>>> <div class="rating" id="field1__type1482">
>>>> <span class="star-rating-control"><div
>>>> class="rating-cancel"><a title="Cancel Rating"></a></div>
>>>> <div role="text" aria-label=""
>>>> class="star-rating rater-0 star wicket-field1__type1482
>>>> star-rating-applied star-rating-live star-rating-on"
>>>> id="tt1__field11489"><a title="radio16">radio16</a></div><div role="text"
>>>> aria-label="" class="star-rating rater-0 star wicket-field1__type1482
>>>> star-rating-applied star-rating-live star-rating-on"
>>>> id="tt1__field2148a"><a title="radio17">radio17</a></div><div role="text"
>>>> aria-label="" class="star-rating rater-0 star wicket-field1__type1482
>>>> star-rating-applied star-rating-live star-rating-on"
>>>> id="tt1__field3148b"><a title="radio18">radio18</a></div><div role="text"
>>>> aria-label="" class="star-rating rater-0 star wicket-field1__type1482
>>>> star-rating-applied star-rating-live star-rating-on"
>>>> id="tt1__field4148c"><a title="radio19">radio19</a></div><div role="text"
>>>> aria-label="" class="star-rating rater-0 star wicket-field1__type1482
>>>> star-rating-applied star-rating-live" id="tt1__field5148d"><a
>>>> title="radio20">radio20</a></div></span><input name="field1_type"
>>>> type="radio" class="star wicket-field1__type1482 star-rating-applied"
>>>> id="tt1__field11489" value="radio16" style="display: none;">
>>>> <input name="field1_type" type="radio" class="star
>>>> wicket-field1__type1482 star-rating-applied" id="tt1__field2148a"
>>>> value="radio17" style="display: none;">
>>>> <input name="field1_type" type="radio" class="star
>>>> wicket-field1__type1482 star-rating-applied" id="tt1__field3148b"
>>>> value="radio18" style="display: none;">
>>>> <input name="field1_type" type="radio" class="star
>>>> wicket-field1__type1482 star-rating-applied" id="tt1__field4148c"
>>>> value="radio19" style="display: none;">
>>>> <input name="field1_type" type="radio" class="star
>>>> wicket-field1__type1482 star-rating-applied" id="tt1__field5148d"
>>>> value="radio20" style="display: none;">
>>>> </div>
>>>>
>>>>
>>>> br Chris
>>>>
>>>>
>>>>> Am 18.04.2015 um 13:46 schrieb Sven Meier <[email protected]>:
>>>>>
>>>>> Hi Chris,
>>>>>
>>>>> does the JS trigger click() on the radio when the user selects a rating?
>>>>> When not, check for a callback to trigger click() by yourself.
>>>>>
>>>>> Regards
>>>>> Sven
>>>>>
>>>>>
>>>>> On 18.04.2015 13:34, Chris wrote:
>>>>>> Hi Sven,
>>>>>>
>>>>>> thanks a lot for your help!
>>>>>> I am using the jquery star rating JS to replace the radio boxes through
>>>>>> stars - with that it does not work. Without it I just tried it and AJAX
>>>>>> works (thanks for your feedback!)
>>>>>> Why might there be a problem with the jQuery JS?
>>>>>>
>>>>>> br, Chris
>>>>>>
>>>>>>
>>>>>>> Am 18.04.2015 um 13:24 schrieb Sven Meier <[email protected]>:
>>>>>>>
>>>>>>> Looks good.
>>>>>>>
>>>>>>> I've just added an AjaxFormChoiceComponentUpdatingBehavior to
>>>>>>> wicket-examples' RadioGroupPage and it worked as expected.
>>>>>>>
>>>>>>> Which Wicket version? Can you create a quickstart?
>>>>>>>
>>>>>>> Have fun
>>>>>>> Sven
>>>>>>>
>>>>>>> On 18.04.2015 13:19, Chris wrote:
>>>>>>>> The html is as follows:
>>>>>>>>
>>>>>>>> <wicket:panel>
>>>>>>>> <form wicket:id="form" class="form">
>>>>>>>> <div class="rating" wicket:id="group">
>>>>>>>> <input wicket:id="radio1" type="radio"/>
>>>>>>>> <input wicket:id="radio2" type="radio"/>
>>>>>>>> ...
>>>>>>>> </div>
>>>>>>>> </form>
>>>>>>>> </wicket:panel>
>>>>>>>>
>>>>>>>> best regards, Chris
>>>>>>>>
>>>>>>>>
>>>>>>>>> Am 18.04.2015 um 13:14 schrieb Chris <[email protected]>:
>>>>>>>>>
>>>>>>>>> Hi Sven,
>>>>>>>>>
>>>>>>>>> the form is added to a panel.
>>>>>>>>>
>>>>>>>>> Chris
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>> Am 18.04.2015 um 11:26 schrieb Sven Meier <[email protected]>:
>>>>>>>>>>
>>>>>>>>>> Hi,
>>>>>>>>>>
>>>>>>>>>> is your RadioGroup is bound to <wicket:container> in your markup?
>>>>>>>>>>
>>>>>>>>>> Sven
>>>>>>>>>>
>>>>>>>>>> On 18.04.2015 07:00, Chris wrote:
>>>>>>>>>>> Hi all,
>>>>>>>>>>>
>>>>>>>>>>> I have a radio group with different radio choices and I would like
>>>>>>>>>>> to add ajax behavior to the group.
>>>>>>>>>>> With the method #AjaxFormChoiceComponentUpdatingBehavior, the
>>>>>>>>>>> #onUpdate is never called currently.
>>>>>>>>>>>
>>>>>>>>>>> How to fix this?
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> Form form = new Form("form");
>>>>>>>>>>> RadioGroup<RadioChoice> radioGroup = new
>>>>>>>>>>> RadioGroup<RadioChoice>("group", new Model<RadioChoice>() {...}
>>>>>>>>>>>
>>>>>>>>>>> Radio<RadioChoice> radio1 = new Radio<RadioChoice>("radio1", new
>>>>>>>>>>> Model<RadioChoice>(1));
>>>>>>>>>>> Radio<RadioChoice> radio2 = new Radio<RadioChoice>("radio2", new
>>>>>>>>>>> Model<RadioChoice>(2));
>>>>>>>>>>> radioGroup.add(radio1);
>>>>>>>>>>> radioGroupd.add(Radio2);
>>>>>>>>>>>
>>>>>>>>>>> form.add(radioGroup);
>>>>>>>>>>>
>>>>>>>>>>> radioGroup.add(new AjaxFormChoiceComponentUpdatingBehavior() {
>>>>>>>>>>> protected void onUpdate(AjaxRequestTarget target) {
>>>>>>>>>>> // Ajax actions here
>>>>>>>>>>> }
>>>>>>>>>>> });
>>>>>>>>>>>
>>>>>>>>>>> Thanks, Chris
>>>>>>>>>>> ---------------------------------------------------------------------
>>>>>>>>>>> To unsubscribe, e-mail: [email protected]
>>>>>>>>>>> For additional commands, e-mail: [email protected]
>>>>>>>>>>>
>>>>>>>>>> ---------------------------------------------------------------------
>>>>>>>>>> To unsubscribe, e-mail: [email protected]
>>>>>>>>>> For additional commands, e-mail: [email protected]
>>>>>>>>>>
>>>>>>>>> ---------------------------------------------------------------------
>>>>>>>>> To unsubscribe, e-mail: [email protected]
>>>>>>>>> For additional commands, e-mail: [email protected]
>>>>>>>>>
>>>>>>>> ---------------------------------------------------------------------
>>>>>>>> To unsubscribe, e-mail: [email protected]
>>>>>>>> For additional commands, e-mail: [email protected]
>>>>>>>>
>>>>>>> ---------------------------------------------------------------------
>>>>>>> To unsubscribe, e-mail: [email protected]
>>>>>>> For additional commands, e-mail: [email protected]
>>>>>>>
>>>>>> ---------------------------------------------------------------------
>>>>>> To unsubscribe, e-mail: [email protected]
>>>>>> For additional commands, e-mail: [email protected]
>>>>>>
>>>>>
>>>>> ---------------------------------------------------------------------
>>>>> To unsubscribe, e-mail: [email protected]
>>>>> For additional commands, e-mail: [email protected]
>>>>>
>>>
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [email protected]
>> For additional commands, e-mail: [email protected]
>>
>
