Member Avatar for naju

i am using and


my ajax is returning following tags (text)

<p id="tobeedited4">one</p> (should manually select "two")

and while calling the ajax it has

new Ajax.Updater('contact_div_edit',"./doit.php", {asynchronous:true, parameters:poststr,onComplete: showResponse, evalScripts:true});
onComplete: showResponse

my showResponse function goes like this

function showResponse()
{
new Ajax.InPlaceCollectionEditor(
  'tobeedited4', '_ajax_inplaceeditor_result.html', {
  collection: ['one','two','three'],
  value: 'two',
  ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
}

i have included all the required js files and everythings goes fine (program flow)
But the problem is:
the p tag with id tobeedited4 is not visible from showResponse function ...


pliz help me to solve this issue.

I just want InPlaceCollectionEditor to apply on the tags after ajax call
Is there a way to solve this ???? is this possible ????

  • 1 Contributor
  • 2 Replies
  • 114 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by naju

Dani AI

Generated

Short answer: the element exists only after the AJAX HTML is inserted and the code that wires it up must be present and executed at that moment. As discovered, returning a <script> with the response forces the initialization to run after insertion, which is why it worked.

Why this happens

  • If the constructor or setup code for the editor is not loaded when you try to create it, the browser throws an error and the element never gets the behavior.
  • If initialization runs before the new markup is placed into the DOM, query/selectors will not find the element.
  • Browsers differ on whether scripts inside HTML inserted via innerHTML are executed, so relying on that is fragile.

Practical, safer options

  • Load the editor/library once in the main page (best). After each AJAX insert, call a tiny init routine from the AJAX-complete handler to attach behavior to the newly added nodes.
  • If you must fetch a script on demand, inject a script element and instantiate only after its load event fires.
  • For frequently changing content, use event delegation or a MutationObserver to initialize new nodes automatically.
  • Avoid returning full library files inside every AJAX response; return minimal markup and a short init snippet, or perform init in the completion callback.

Example pattern (dynamic-load + init)

function loadScript(src, cb) {
  var s = document.createElement('script');
  s.src = src;
  s.onload = cb;
  s.onreadystatechange = function() { if (this.readyState === 'loaded' || this.readyState === 'complete') cb(); };
  document.head.appendChild(s);
}

loadScript('/path/to/editor.js', function() {
  var el = document.getElementById('tobeedited4');
  if (el) initInPlaceEditor(el);
});

Cautions: check for existing library globals before re-loading, avoid duplicate IDs, and keep initialization minimal to reduce XSS surface.

Member Avatar for naju

pliz anybody ... identify my mistake ...
i really need to get ride of this problem

Member Avatar for naju

Thanks for everyone's follow-up

i solved my funny problem ...

i've should put the script tag along with the ajax return ...
:D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.