0

Caja stripping out onclick for for input paramater

I have a form with an input parameter, when a user clicks the button an onclick javascript function is called. however, when viewing my app code using firebug i notice that the onclick property is removed from the <input> tag.

Is this due to Caja?

Sample code can be found at:

http://www.experienceproject.com/platform_..._test_input.php

by
1 Reply
  • Yes, caja will strip out a lot of those onclick properties, mostly with the client side sanitizer (when innerHTML type functions are called to replace content). What I'm guessing you're doing is that you're running an AJAX request (or using a <yml:a> tag) and then replacing content on the page with the returned html, in this case the form contents. This functionality is currently being looked at on our side. In the meantime, if you follow these steps you should be able to get the functionality set up:

    1. Add an id to your input field (e.g. <input id='myID'>)

    2. When the HTML is rendered on the page (i.e. after you have inserted it using innerHTML) you can assign a click handler like so:
    CODE
    var myInput = document.getElementById('myID');
    if (myInput.addEventListener) {
    myInput.addEventListener('click', clickCallback, false);
    } else if (myInput.attachEvent) {
    myInput.attachEvent('click', clickCallback);
    }


    3. When the input is now clicked, it will call the function "clickCallback" with the object that was clicked as the parameter, so you need to define it as such:
    CODE
    function clickCallback(sender){
    //DO SOMETHING
    }


    4. If you want to define the function in #3 to get the DOM element that was clicked, you'd use something like this:
    CODE
    function clickCallback(sender){
    var target;

    if (window.event) {
    target = window.event.srcElement;
    } else if (sender) {
    target = sender.target;
    } else { return; }}

    //DO SOMETHING WITH TARGET
    }


    I hope that helps.

    Jonathan LeBlanc
    Senior Software Engineer
    Yahoo! Developer Network

    QUOTE (DolamiteM @ Feb 9 2009, 08:55 PM) <{POST_SNAPBACK}>
    I have a form with an input parameter, when a user clicks the button an onclick javascript function is called. however, when viewing my app code using firebug i notice that the onclick property is removed from the <input> tag.

    Is this due to Caja?

    Sample code can be found at:

    http://www.experienceproject.com/platform_..._test_input.php
    0
  • Jon,

    I appreciate the suggestions. However, I am trying your method and for some reason I am not able to attach an event listner. my code is able to grab the ui element using myButton = document.getElementById(elementName); but if(myButton.addEventListner) and else if(myButton.attachEvent) are both returning false.

    Below is the code I'm using. The flow of the code is that initCanvas is called which then makes an AJAX call to get some data from our server and then populate innerHTML for one of the view elements. Then, as you suggested I am trying to add an event listner to some of the ui elements so that when a user clicks on a button there will be processing that happens.

    i have the code up at sample code

    thanks for all your help so far.


    CODE
    <script>
    var pets; //contains array of pets, on canvas

    function handlePetChoice(data) {
    var debug = 'congrats! inside handlePetChoice! Pet Choice is selected<br/>';
    document.getElementById('debug').innerHTML = debug;
    }

    function initCanvas() {

    //first, let's get the pets
    var params = {};
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
    var url = "http://www.experienceproject.com/opensocial/get_pets_list.php?type=cats";
    //gadgets.io.makeRequest(url, handlePetsList, params);
    try {
    gadgets.io.makeRequest(url, handlePetsList, params);
    } catch(e){
    html += e.name + ' ' + e.message;
    }

    document.getElementById('pet_choices').innerHTML = html;
    }

    function handlePetsList(obj) {

    // we should have the pets now - let's create the options
    pets = obj.data;
    var html = '<div>';

    for (var petindex in pets) {

    html += '<div>';
    html += '<span>' + pets[petindex].name + '</span>';
    //CAJA WORKAROUND: due to Caja need to split up the src attribute..or else Caja throws error, and don't use onclick prop to handle button click
    html += '<br/><img sr'+ 'c="http://img.experienceproject.com/images/trivia/photos_cats/' + pets[petindex].img + '" />';
    html += '<br/><input type="button" class="mp_submit_button" name="choose'+petindex+'" id="choose'+petindex+'" value="I Choose This One">';
    html += '</div>';
    }

    html += '</div>';
    document.getElementById('pet_choices').innerHTML = html;

    //CAJA WORKAROUND: once html is rendered assign click handlers
    document.getElementById('debug').innerHTML += '<div>about to set click event handler</div>';

    for(var petindex in pets) {
    var myButton = document.getElementById('choose'+petindex);

    if(myButton) {
    document.getElementById('debug').innerHTML += '<div>successfully grabbed an obj with id: '+myButton.name+', now try to add event listner</div>';
    if(myButton.addEventListner) {
    document.getElementById('debug').innerHTML += '<div>about to add click event handler using addEventListner</div>';
    myButton.addEventListner('click', handlePetChoice, false);
    document.getElementById('debug').innerHTML += '<div>added event handler: '+myButton.name+'!!</div>';
    } else if (myButton.attachEvent){
    document.getElementById('debug').innerHTML += '<div>about to add click event handler using attachEvent</div>';
    myButton.attachEvent('click', handlePetChoice);
    document.getElementById('debug').innerHTML += '<div>added event handler for '+myButton.name+'!!</div>';
    }
    else{document.getElementById('debug').innerHTML += '<div>no click event handler set! attachEvent nor addEventListner could not be found!</div>';}
    } else{document.getElementById('debug').innerHTML += '<div>Error: ui element could NOT be grabbed!! Try again.</div>';}
    }
    }

    gadgets.util.registerOnLoadHandler(initCanvas);

    </script>
    <!-- VIEW Content -->
    <div style="text-align:left;margin: 0px 10px 10px 5px; padding: 4px; font-size: 12px;">
    <p style="font-size: 10pt;">Millions of cats and kittens are abandoned to shelters. These innocent pets are hungry, overcrowded, and often given only a few months to live before being euthanized.
    We've set up a quick and easy way for you to help them.
    </p>
    <p>
    Simply add one of the pictures of the beautiful shelter cats below to your profile, and then <b>click on them whenever you have a few minutes</b>.
    You'll be taken to a <a href="http://www.experienceproject.com/savecats/" target="_blank">fun trivia game</a> where <b>every right answer feeds a shelter cat one kibble of food</b>. By putting it on your profile, you're raising awareness about these
    cats and encouraging your friends to help feed them too!
    </p>
    <p>
    To find more pet lovers, please visit <a href="http://www.experienceproject.com" target="_blank">Experience Project</a>.
    </p>
    </div>
    <div id="pet_chosen"></div>
    <div id="debug"></div>
    <div style="text-align:center;">
    <form id="pet_form" name="pet_form">
    <div id="pet_choices"></div>
    </form>
    </div>
    0
  • I haven't yet found out the why of the issue, but I believe I have a solution. I added an id to the overall container (petContainer), then instead of getting individual elements, I capture all input boxes within that container and apply the click handlers there. Here's the code revision I have:

    CODE
    <style>
    body {
    font-family: verdana, helvetica, arial, sans-serif;
    background-color: #FFF;
    font-size: 73%;
    margin: 0;
    padding: 0;
    }

    a {
    color:#003399;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 1px 1px 2px 1px;
    }
    a:hover {
    color: #FFF;
    text-decoration: none;
    background-color: #6699CC;
    padding:1px;
    }
    a.nostyling, a:link.nostyling {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0px 0px 0px 0px;
    border: none;
    }

    a:active.nostyling, a:hover.nostyling {
    outline:none;
    }
    input { border: 1px solid #BDC7D8; color: #454545; font-size: 12px; background: #DEE3EB }
    input.usubmit { color: #fff; background: rgb(255,158,79); border: 1px solid #BDC7D8; font-size: 12px; font-weight: bold; width: 70px; height: 25px; margin-left: 175px; margin-top:0; margin-right:0; margin-bottom: 0px; padding: 0; }
    input.defaultSubmit {border:3px double #003C74;background: #DEE3EB;color:#000;font-size:12px;font-weight:bold;font-family:arial,helvetica,verdana;}
    input.reset { color: #000; background: #DEE3EB; border: 1px solid #BDC7D8; font-size: 11px; font-weight: normal; width: 50px; height: 20px; margin-top:0; margin-right:0; margin-bottom: 1px; margin-left:0; padding: 0; }
    input.radio {background : transparent; color: #000000; border: 1px solid #BDC7D8;}
    input.checkbox {background : transparent; color: #000000; border: 1px solid #BDC7D8;}
    .mp_submit_button {text-decoration:none;background-color:#003366;color:#fff;cursor:pointer;border-bottom:solid 2px #000;border-right:solid 2px #000;border-top:solid 1px #336699;border-left:solid 1px #336699;background-color:#002255;color:#fff;font-size:105%;padding:.4em;font-weight:bold;margin:5px;}
    .mp_cancel_button {text-decoration:none;background-color:#fff;color:#003366;padding:.4em;cursor:pointer;border:1px solid #666;margin:5px;}


    </style>
    <script>
    var pets; //contains array of pets, on canvas

    function handlePetChoice(data) {
    var debug = 'congrats! inside handlePetChoice! Pet Choice is selected<br/>';
    document.getElementById('debug').innerHTML = debug;
    }

    function initCanvas() {

    //first, let's get the pets
    var params = {};
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
    var url = "http://www.experienceproject.com/opensocial/get_pets_list.php?type=cats";
    //gadgets.io.makeRequest(url, handlePetsList, params);
    try {
    gadgets.io.makeRequest(url, handlePetsList, params);
    } catch(e){
    html += e.name + ' ' + e.message;
    }

    document.getElementById('pet_choices').innerHTML = html;
    }

    function handlePetsList(obj) {

    // we should have the pets now - let's create the options
    pets = obj.data;
    var html = '<div id="petContainer">';

    for (var petindex in pets) {

    html += '<div>';
    html += '<span>' + pets[petindex].name + '</span>';
    //CAJA WORKAROUND: due to Caja need to split up the src attribute..or else Caja throws error, and don't use onclick prop to handle button click
    html += '<br/><img sr'+ 'c="http://img.experienceproject.com/images/trivia/photos_cats/' + pets[petindex].img + '" />';
    html += '<br/><input type="button" class="mp_submit_button" name="choose'+petindex+'" id="choose'+petindex+'" value="I Choose This One">';
    html += '</div>';
    }

    html += '</div>';
    document.getElementById('pet_choices').innerHTML = html;

    //CAJA WORKAROUND: once html is rendered assign click handlers
    document.getElementById('debug').innerHTML += '<div>about to set click event handler</div>';

    var myChoices = document.getElementById('petContainer').getElementsByTagName('input');
    for (var i = 0; i < myChoices.length; i++){
    if (myChoices[i].addEventListener) {
    document.getElementById('debug').innerHTML += '<div>about to add click event handler using addEventListner</div>';
    myChoices[i].addEventListener('click', handlePetChoice, false);
    } else if (myChoices[i].attachEvent) {
    document.getElementById('debug').innerHTML += '<div>about to add click event handler using attachEvent</div>';
    myChoices[i].attachEvent('click', handlePetChoice);
    }
    }

    /*for(var petindex in pets) {
    var myButton = document.getElementById('choose'+petindex);

    if(myButton) {
    document.getElementById('debug').innerHTML += '<div>successfully grabbed an obj with id: '+myButton.id+', now try to add event listner: '+myButton.onclick+'</div>';

    if(myButton.addEventListner) {
    document.getElementById('debug').innerHTML += '<div>about to add click event handler using addEventListner</div>';
    myButton.addEventListner('click', handlePetChoice, false);
    document.getElementById('debug').innerHTML += '<div>added event handler: '+myButton.name+'!!</div>';
    } else if (myButton.attachEvent){
    document.getElementById('debug').innerHTML += '<div>about to add click event handler using attachEvent</div>';
    myButton.attachEvent('click', handlePetChoice);
    document.getElementById('debug').innerHTML += '<div>added event handler for '+myButton.name+'!!</div>';
    } else {
    document.getElementById('debug').innerHTML += '<div>no click event handler set! attachEvent nor addEventListner could not be found!</div>';
    }
    } else{document.getElementById('debug').innerHTML += '<div>Error: ui element could NOT be grabbed!! Try again.</div>';}
    } */
    }

    gadgets.util.registerOnLoadHandler(initCanvas);

    </script>
    <!-- VIEW Content -->
    <div style="text-align:left;margin: 0px 10px 10px 5px; padding: 4px; font-size: 12px;">
    <p style="font-size: 10pt;">Millions of cats and kittens are abandoned to shelters. These innocent pets are hungry, overcrowded, and often given only a few months to live before being euthanized.
    We've set up a quick and easy way for you to help them.
    </p>
    <p>
    Simply add one of the pictures of the beautiful shelter cats below to your profile, and then <b>click on them whenever you have a few minutes</b>.
    You'll be taken to a <a href="http://www.experienceproject.com/savecats/" target="_blank">fun trivia game</a> where <b>every right answer feeds a shelter cat one kibble of food</b>. By putting it on your profile, you're raising awareness about these
    cats and encouraging your friends to help feed them too!
    </p>

    <p>
    To find more pet lovers, please visit <a href="http://www.experienceproject.com" target="_blank">Experience Project</a>.
    </p>
    </div>
    <div id="pet_chosen"></div>
    <div id="debug"></div>
    <div style="text-align:center;">
    <form id="pet_form" name="pet_form">
    <div id="pet_choices"></div>
    </form>

    </div>


    Hopefully that will work.

    Jonathan LeBlanc
    Senior Software Engineer
    Yahoo! Developer Network
    0
  • I'll set up a test case and take a look over this to try to find the issue. Can you attach an example JSON data dump of what's returned from the ajax request as well please? This will allow me to bypass some of the setup.

    Thanks.
    - Jon
    0
  • Actually nm, I snatched it from the ajax - I'll post back when I have something
    0

Recent Posts

in YAP