0

I have data returned from an Ajax call, but need to pass variables into or out of the Ajax onSuccess function to insert the results into my page. I'm pretty sure this is a scope problem.

I posted a complicated question here yesterday, mostly about the Ajax part of this, and that part is now working - I'm getting the results back correctly. I could insert it into my page code in two ways, but one involves getting a variable value out of the onSuccess function; the other needs to get a variable value into it! I can't make either of them work. Here's a stripped-down version of the code:

var base = 'http://10.0.1.2:90/~dvds/';

// initialization routines
document.observe ('dom:loaded', function() {
    // set up handler for variable numbers of selects
    var addselects = $$('.addselect');
    for (var i = 0; i < addselects.length; i++) {
        var addselect = addselects[i];
        addselect.onchange = newSelect;
    }
});

// handler for adding new field to array
function newSelect() {
    var thisid = this.id;
    var newhtml;

    var url = base + 'ajaxtest';
    // send request to do the business
    var myAjax = new Ajax.Request (url, {
        method: 'post',
        onSuccess: function (req) {
            var xml = req.responseXML;
            var id = xml.getElementsByTagName('id')[0].firstChild.nodeValue;

            if (id) {
                newhtml = '\t\t<li>\r\t\t\t<select class="addselect" name="newlist" id="newlist" />\r\t\t\t\t<option value="" selected="selected"></option>\r';
                // loop
                var newid, newname;
                var ids = xml.getElementsByTagName('id');
                var names = xml.getElementsByTagName('name');
                for (var i = 0; i < ids.length; i++) {
                    newid = ids[i].firstChild.nodeValue;
                    newname = names[i].firstChild.nodeValue;
                    newhtml += '\t\t\t\t<option value="' + newid + '">' + newname + '</option>\r';
                }
                newhtml += '\t\t\t</select>\r\t\t</li>\r';
// alert (thisid);
                $('thisid').up('ul').insert (newhtml);
            }
            else {
                alert (’ng');
                newhtml = '<li>No good.</li>';
            }
        },
        onFailure: function() {
            alert ('Script failure.');
            newhtml = '<li>No good.</li>';
        }
    });

// alert (newhtml);
//  if (newhtml) {
//      this.up('ul').insert (newhtml);
//  }
}

Having established the variable thisid as this.id, I don't understand why $('thisid') doesn't work in the line $('thisid').up('ul').insert (newhtml); - especially as the value of thisid does show up correctly in the alert I've put in for testing (commented out). Why is this? If I put newhtml into that alert instead it's also correct.

And given that that seems not to work, I tried the alternative of passing the value of newhtml out (having declared it at the top) and inserting it in the page in the last block of code that's commented out - but that doesn’t work either.

Where am I going wrong?

csansom
  • 1
  • 2
  • Uh, the `thisid` variable that you are alerting and the `'thisid'` string that you pass to `$` are totally different things? – Bergi Jun 24 '19 at 19:25
  • No, surely either way it's a string containing the id of the element that was changed to trigger the event - or so it seems to me! I only create it at the top because 'this' itself is indeed something totally different inside the onSuccess function. But this probably shows up some fundamental misunderstanding on my part, does it? – csansom Jun 24 '19 at 21:46
  • No, `'thisid'` is a string containing the value "thisid", not the id of your element. You'll need to use `$(thisid)` in the callback instead. Or probably, better don't go by the id at all, just store the element in a variable - `var el = this;` … `el.up('ul').insert(…)`. Or just use an arrow function, or [any other way to solve that problem](https://stackoverflow.com/q/20279484/1048572). – Bergi Jun 24 '19 at 21:55
  • Jeeze, I knew it would be something obvious - of course, you're quite right. All I had to do was remove the quotes! $(thisid).up... – csansom Jun 24 '19 at 22:18
  • Damn - hit return too fast, before I added: thank you so much! – csansom Jun 24 '19 at 22:18

0 Answers0