Issue in adding custom attributes to objects

Forums Help and How To Issue in adding custom attributes to objects

This topic contains 8 replies, has 6 voices, and was last updated by  GKG 4 months, 2 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • Bijuvi
    Member

    Hi,

    I am trying to add cutom attributes like onclick or onkeyup to my form elements but even though they are saved on attributes panel, the attributes do not reflect to HTML code.

    I make sure its saved by clicking APPLY, hitting Enter and saving the document.
    Am I doing something wrong?

    enter image description here

    • This topic was modified 3 years, 1 month ago by  Bijuvi.
    • This topic was modified 3 years, 1 month ago by  Bijuvi.
    • This topic was modified 3 years, 1 month ago by  Bijuvi.
    • This topic was modified 3 years, 1 month ago by  Bijuvi. Reason: typo
    Saj
    Member
    Valued

    The onclick I believe is actually there it’s just not visible in the HTML widget. If you were to preview your site, and viewed the source I’m sure you’d see it there.

    However, I think it’s now considered not to be semantic coding by putting onclick and the such directly on an element.

    It’s considered semantic to have that behavior in the script it’s self. Such as: (using JQuery)

    $("#lp-form-button").on("click", function(){
    // what to do when clicked
    alert("I was clicked!");
    });
    

    I’m currently using this for searching a table.

    $("#searchUserInput").on("keyup",function() {
        var filterThis = $(this).val().toLowerCase();
        $('.listUserContent').each(function () { //my rows have this class on it
            var filterObj = $(this).data("searchusertitle").toLowerCase(); //my rows have this data-serachusertitle
            (filterObj.indexOf(filterThis) >= 0) ? $(this).removeClass("disable") : 
                                                   $(this).addClass("disable"); //my CSS has a class for disable to set display to none
        });
    });
    

    If the element your using is something that changes due to DOM manipulation, you would then reference document or body for bubbling purposes.

    For example your click would then look more like:

    $(document).on("click","#lp-form-button", function(){
    // what to do when clicked
    });
    

    or

    $("body").on("click","#lp-form-button", function(){
    // what to do when clicked
    });
    

    Hope this helps 🙂

    Saj

    Bijuvi
    Member

    Thank you saj but unfortunately this does not help my case.

    1. The problem is not only onclick, any custom attribute does not work.
    2. I need to use onclick, onkeyup and onkeydown for my form to work since I am using an outer JS source that I cannot alter. Also I dont have any JS coding skills 😀
    3. The attributes are saved in the application but does not reflect to the html. I tried previewing and exporting. The code was not there.
    • This reply was modified 3 years, 1 month ago by  Bijuvi.
    Saj
    Member
    Valued

    Well it does appear that adding an attribute of onclick=”blah” doesn’t appear in the code at all, I could’ve swore that it had at one point because I had tried it weeks ago but I could be wrong.

    Even with trying to add that, I was still able to add an additional data-text=”test” to my button after I added the onclick using the app just now. If you’re not able to do that then you have some bug happening, not sure if it matters but I’m using v2.2.2 on win8.1.

    I believe you should still be able to use my JQuery example though to fire your function you are specifying in your screenshot.

    You’d just be telling JQuery to handle the onclicking and when clicked fire this function that is handled by the other JS your using.

    $(function(){ // this is your "$(document).ready" or "window.onload = function()" function
    // and it should include all your JQuery triggering/functions within it.
    
        $("#lp-form-button").on("click", function(event){
            goTofields();
        });
    
        $("#lp-form-button").on("keyup", function(event){
            goTofields();
        });
    
        $("#lp-form-button").on("keydown", function(event){
            goTofields();
        });
    
        $("#lp-form-button").on("mouseenter", function(event){
            goTofields();
        });
    
        $("#lp-form-button").on("mouseleave", function(event){
            goTofields();
        });
    
        $("<!-- id or class of element -->").on("<!-- trigger -->", function(event){
            <!-- name of function etc... -->
        });
    
    });
    

    You can add event.preventDefault(); to stop the normal function of the element so it doesn’t interfere with the JS function firing if you need that.

    The app allows you to create your own custom JS file(s) for your project that would allow you to create and use these functions.

    Even with all this, in the end, I was able to right click my button in the app Overview and select “Convert to HTML” then I could edit the button as Custom Code and I was then able to manually add the onclick=”goTofields();” and it is there on my preview.

    Saj

    Bijuvi
    Member

    Saj,

    I tried adding data-text attribte and it worked. but onkeyup, onkeydown and onclick still does not.

    Thank you verymuch for the JS codes, I’ll try them asap.

    And as for the convert option, I want to create a fully functional template and use it in my projects so I’d prefer it staying a component, but until the issue is fixed,’I can use the convert feature. Thanks

    Martin Angelov
    Bootstrap Studio Developer

    Thank you for staring this thread, bijuvi!

    on* attributes aren’t supported for security purposes and they are ignored in the application (and as you’ve seen, they are stripped from the preview and export code as well). Event attributes are considered a bad practice anyway and it is preferable to use event handlers in your JS files. @saj has provided a great overview on how this works in his reply.

    randynwalsh
    Member

    I wanted to be able to use all the normal event attributes (ie, onclick, onblur, …),
    so I added my own custom “doevent” attributes (ie, doclick, doblur, …)
    and used jQuery to change them.

    var events = [“change”, “click”, “mouseover”, “mouseout”, “keydown”, “load”,
    “keyup”, “blur”, “select”, “dblclick”, “focus”, “hover”, “keypress”]
    // See full list of events here: https://api.jquery.com/category/events/

    // Cycle through list, and find “do” attributes
    for (var i = 0; i < events.length; i++) {
    var eventName = events[i]

    $( "[do"+ eventName + "]" ).each(function() {
        var $t = $(this);
        var code = $t.attr("do" + eventName)
        $t.on(eventName, function () { eval( code ) } )
    });
    

    }

    CaptainBli
    Member

    What security purpose? There should be no reason to exclude these from export. We want to be able to call something like onblur=”this.checkValidity();” Now we have to resort to writing a bunch of code by hand to deal with this.

    GKG
    Member

    Yeah, this “security” feature bit me, too … I’d really like to know what security reason is the reason for this … I’ve tried to find any reports on the web about “onblur” and “security”, but couldn’t find anything … it’s sort of bad when a tool disallows features officially and fully supported by any current browser, and even worse when it just ignores it without any sort of warning …

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.