km-text span in Button prevents data-click

9 posts, 0 answers
  1. Gilles
    Gilles avatar
    3 posts
    Member since:
    Feb 2013

    Posted 01 Mar 2013 Link to this post

    Hi Support

    I have this very annoying issue using the following Button:
    <a id="btb1" data-role="button" style="background-color: green; width:90%;" data-click="action" data-name="Stuff & Stuff" data-id="1" data-unit="Unit" data-unitid="1" class="km-button">
     <span class="km-text">DONT CLICK ME</span>
    </a>
    When clicking on the text in the Button, the Button changes to its hover-style but the action is not happening. Clicking on the outside of the text fires the click-event properly. The span around the text is generated automaticly.

    I'm now trying to find a workaround, but this needs a fix asap - for sure.
    Thanks
  2. Gilles
    Gilles avatar
    3 posts
    Member since:
    Feb 2013

    Posted 01 Mar 2013 Link to this post

    Me again,

    I've managed to get rid of the issue by removing the <span class="km-text"></span> which is surrounding the text of the button with the "unwrap" jquery function. Triggering it in combination with a callback to be sure that the DOM is already created.
    $("ul.km-listgroupinset span.km-text").contents().unwrap();
    I'm not really happy with this solution, maybe there's a way to ignore this button when kendoui is wrapping the unnecessary <span> around my button text? Glad that this fixed the issue, but this is dirty and didn't solved the actual problem.

    Regards
    Gilles
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Mar 2013 Link to this post

    Hi Giles,

    I am not sure that I understand your case. I recreated a simple example in this jsbin, and the callback is executed reliably in Google Chrome and on an iOS device. What am I missing? 

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Klaus
    Klaus avatar
    5 posts
    Member since:
    Mar 2013

    Posted 31 Mar 2013 Link to this post

    Hi,

    I'm currently on the trial for your software, but I have the same issue as Gilles in this thread.

    This simple HTML:

    <a data-role="button" onclick="alert('test');">button test</a>

    Turns into this, when I "view source" in my browser:
    <a data-role="button" onclick="alert('test');" class="km-button"><span class="km-text">button test</span></a>

    It works fine in my browser, but once I put it on the iPhone (simulator), the "onclick" breaks, probably because of the span inside the a's?  If you click juuuust outside of the button, so you actually hit the "<a..." part, before "<span>" begins, then the alert will work. But if you hit the button as usual, no alert will come.  Like I said, I think the span inside the a must break onclick somehow, once it gets onto the iPhone?


    Edit: Actually, after having tried the "dirty trick" posted above, I don't think the inside span are at fault. The dirty trick was using this:
    $("ul.km-listgroupinset span.km-text").contents().unwrap();

    .. which makes the HTML end up like this:
    <a data-role="button" onclick="alert('test');" class="km-button">button test</a>

    But the alert will still not work on iPhone, unless you manage to click the just before the button design. 

    So I currently have no idea how I can make a data-role="button" have an onclick attached, so it can call functions. 
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Apr 2013 Link to this post

    Hi Klaus,

    Using the onclick DOM event is not recommended. Please refer to the snippets below (and to our documentation) for the proper widget click event binding. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Klaus
    Klaus avatar
    5 posts
    Member since:
    Mar 2013

    Posted 01 Apr 2013 Link to this post

    Hi Petyo,

    Thanks for your reply, but I think you forgot to include the snippet :)
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 03 Apr 2013 Link to this post

    Hello Klaus,

    I was referring to the code snippets in the first post in this thread. You may also check this demo

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Klaus
    Klaus avatar
    5 posts
    Member since:
    Mar 2013

    Posted 03 Apr 2013 Link to this post

    Hi Petyo,

    Thanks for that last demo. It does make a bit of sense to me now.

    So basically, since you can't pass parameters through data-click, like:

    data-click="logClick('button123')"  

    You would instead need to have a lot of "case" or "if...then" in the logClick function, to do whatever action you want to do, depending on the button clicked, is that correct?

    Thanks again!
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 04 Apr 2013 Link to this post

    Hi Klaus,

    Instead of heavy "if ... then" logic, you can use custom data attributes. Please check this forum post.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready