One of the best ways to work this out is to build a cut-down example, in one
page, that tries to do what you're after here. If you can get that to fail,
post it as a Gist or similar. From your description, you're going about things
the right way.
One other piece of advice. Rather than using a numerical index to get the first
of some collection, try making your method iterate over the found results and
operate conditionally. This will give you another place to put console.log
statements to further refine exactly what is going on inside:
> var newhtml = xml.getElementsByTagName('newhtml')[0].firstChild.nodeValue;
When you say that the correct code to insert is there in the Ajax response,
that cuts that part of the problem out, and your example page can just do
something dumb like this:
var data_to_insert = $('some_example_element').remove().innerHTML.toString();
...where you have a DOM element like <div id="some_example_element"><select ...
your element here ...></div>
I have found over the years that when you have the correct element (legally
possible to insert into a given container), then Prototype (and the browser)
just does what you'd expect. But if what you are getting back from the server
doesn't make any sense in terms of your DOCTYPE (say you are trying to insert
raw text into a <ul>, rather than trying to insert a <li>, then the browser
will just ignore you. It's not a Prototype error, in other words, just the
browser being pedantic when being called in a JS update mode.
Finally, see if you can get your server to return the HTML of the picker, fully
rendered. Then you should be able to do this:
new Ajax.updater('parent_element_id', '/server/url', {
parameters: { foo: 'bar', ...}, // optional, pass to your server some
parameters
insertion: 'bottom' // this lets you put the rendered element at the bottom
of the existing children of the parent
});
If #parent_element_id is a <li>, then the HTML you get from /server/url?foo=bar
should be:
<li>
<select ... >
<option ...></option>
</select>
</li>
... with all of the whitespace removed.
Walter
> On Jun 22, 2019, at 11:25 AM, Chris Sansom <[email protected]> wrote:
>
> With apologies in advance for the length...
>
> I retired a few years ago from web development, where I used Prototype quite
> a bit in the later years. I'm somewhat rusty now, but I'm trying to do some
> development for purely personal use. It won't be on the open web, just on our
> local server. It's all been going fine (if slowly!), but now I've hit a brick
> wall with Ajax.
>
> Here's what I'm trying to do:
> * I have a form with one or more <select>s, each within its own <li>, all in
> the one <ul>.
> * Each <select> contains the same list of items from a table in a MySQL
> database.
> * The last <select> has nothing selected and has the class "addselect".
> * The idea is that if I select something from that last <select>, an
> onChange event is triggered which calls an Ajax script to add a new <select>
> (containing the same items). This is set up on page load in a
> "document.observe ('dom:loaded', function()..." at the top of the javascript
> file.
> * Each <select> has a sequential name and id, eg 'name="country[0]"
> id="country_0"', the next country[1] and country_1, and so on. The newly
> created <select> would have the next name and id in sequence.
> I hope that all makes some sense.
>
> So...
> The handler function set up in 'dom:loaded...' gets the next index number for
> the name and id of the new <select>, and sends this ('entryindex') and the
> name of the table to search ('list') to the Ajax script, and off we go:
>
> var pars = 'list=' + list + '&entryindex=' + newIndex;
> var url = base + 'ajaxgetmenu';
>
> // send request to do the business
> var myAjax = new Ajax.Request (url, {
> method: 'post',
> parameters: pars,
> onSuccess: function (req) {
> var xml = req.responseText;
> ...
>
> This far, everything is hunkydory. Safari's Web Inspector shows exactly the
> correct result - a nice new <select> with the correct name and contents -
> under 'XHRs' in its Resources tab. So I know the script is being called and
> is operating correctly. But where it falls over is with what comes next:
>
> var newhtml =
> xml.getElementsByTagName('newhtml')[0].firstChild.nodeValue;
>
> This, incidentally, is taken from a script I developed back in my
> professional days which I know worked perfectly. But something is failing
> here, cuz it don't work! If I put an alert in ('ok') before this line, it
> pops up, but if I put it after this line it doesn't. And yet no errors are
> reported. And of course the next line doesn't work either:
>
> $('thisid').up('ul').insert (newhtml);
>
> (And I know "$('thisid')" is right because I put that in an alert to check
> it.)
>
> So I simplified it. I abandoned XML and made the result plain text instead,
> to be inserted verbatim. Again, the script produces a perfect result in
> Safari's Web Inspector, but even when newhtml is plain text (and I skip the
> xml.getElementsByTagName line altogether), it fails. And again, an alert
> before the insert line works, but not one after it.
>
> I've tried everything I can think of, so if anyone has any wisdom on this I'd
> be very grateful indeed. It's probably something dead obvious staring me in
> the face...
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/prototype-scriptaculous.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/prototype-scriptaculous/fb84d882-af7d-45f8-a400-b98701228f19%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/prototype-scriptaculous.
To view this discussion on the web visit
https://groups.google.com/d/msgid/prototype-scriptaculous/586F2AE6-E77E-4ECC-B18A-F1D80C04685A%40wdstudio.com.
For more options, visit https://groups.google.com/d/optout.
