Thursday, May 05, 2016

Swap HTML or Adding an ID (Swap HTML & Content Using Recommended Javascript Methods not Working)

[to-do's: 
1. re-integrate references into body content,
2. whatever to-do's you've strewn about below, 
3. change prose for new environment
...] 
I've encountered an issue I see is a recurring issue inquired about on Stack*, and thought I ought to aggregate several of them, show how I've used them, chronicle findings, and ask why they may not be working so I can get something going.

To be more to the point: _You can skip to "**The Section of HTML I want to Modify**"_ **and** then _**to point "(6)"**_ for the one approach I think is most important/should work (it's even recommended here on stack, sans my added line trying to tack-on an ID in an "
But otherwise, I figure putting these together means a good opportunity for (a) documenting someone attempting each of these, (b) inviting people to throw their expertise onto this topic, (c) go for the "complete" consideration (the kind you find in their policy on what questions to ask--particularly, completely documenting the problem and several common recommendations/approach that get given to solve it, linked below), (d) go for the "Good/Great Subjective" also mentioned in several of Stack's resources. 
Just not on stack since the first reply I got was a tl;dr. O_O I've therefore taken to adding this to my blog instead of Stack* and shortening the question there. Good thing I kept my text file from prior to posting over there. :D
Background
I'm learning Javascript the insane way (reading a book--try to apply what you just read to some problem you have; add some documentation online, and try to make it work this time...) and flailing about wildly like a dying octopus (or something). Then reading more, and more, and more....
It's proving fruitful to discovering things I don't know. (And to ever-getting-nearer-but-not-quite.)
Like why the following isn't working. And it's the "why's" that are most interesting/needed. (And I didn't type that statement after reading Stack's resources, either.) Note the very important-est point: there is no "ID" to target with "getElementByID", which is actually the what--the outcome--we want to end-up with:
The section of HTML I want to modify:
I'm seeking either of the following:
Replace a string with a new string,
 href="#" rel="note-button" data-note-type="note" data-domhelper-name="note-button">Add note
With
 **ID="clickEnabledNoteButton"** href="#" rel="note-button" data-note-type="note" data-domhelper-name="note-button">Add note
OR
I've tried a few different methods:
(1) Replace Str
Tried to use string replace but that didn't work, and read something about this not being allowed?
 [to-do: put examples (that you lost) here later]
(2) Find Replace Script
[to-do: add the links to the resources describing the problem that led to its creation, possibly as a footnote attached to a short "___ encountering ___ problem, decided ___[footnote number in superscript]".]
I grabbed
https://github.com/padolsey/findAndReplaceDOMText/blob/master/src/findAndReplaceDOMText.js
 which is as a script which was made to address more than just my problem (more specific to script: http://james.padolsey.com/javascript/replacing-text-in-the-dom-solved/),

and then
var = findAndReplaceDOMText(a, {
  find: 'Add note',
  replace: 'Add note'
  }
);
Also with "...(document.body," and other settings). Also tried by inserting "\" before all the double-quotes.
(3)  Parent. & ElementsByTag + setAttribute
I tried to leverage something recommended elsewhere,
var parent = document.getElementByID('id-setting');
var element = parent.GetElementsByTagName('tag')[index-#];
and append "setAttribute" to a third, thus:
var parentOne = document.getElementById('TicketPseudoReply');
var elementClick = parentOne.GetElementsByTagName('a')[2];

elementClick.setAttribute("id", "clickEnabledNoteButton");
[to-do: determine if latter line was inspired by http://stackoverflow.com/questions/710275/how-to-add-update-an-attribute-to-an-html-element-using-javascript  ??? ]

(4)  InnerHTML
I've seen one answer that was considered functional ,
Javascript Replace Text in the HTML Body[1]
document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');
but that didn't seem to work with HTML strings--[great resource linked][2] through. Basically, this was the second or third method tried.
(5)  Crip DOM -Walking
 I saw one that involved "walking the dom",
function walkText(node) {
  if (node.nodeType == 3) {
    node.data = node.data.replace(/foo/g, "bar");
  }
  if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
    for (var i = 0; i < node.childNodes.length; i++) {
      walkText(node.childNodes[i]);
    }
  }
}
walkText(document.body);
How to replace all occurrences of a string in a HTML page using Javascript[3]
which is basically (at least at first) unintelligible to a newb but:
(a) I believe because of "node"? that is, it may mean "use 'a'" for my case, but one isn't sure, and
(b) it's also difficult to think of using this to walk through all the elements when you just want one,
(c) but you wonder if it's to generate an enumeration for other use,
(d) the "[...].nodeType == 3 and ==1 lines are great for leading you to another great resource[4] but get you wondering whether "element" is used to mean both the element sign and all its attirbutes together(???).
And if c, then can this invoked with
walkText(document.body.a) or walkText(a)  OR ???
be combined with the
var parentOne...
attempt from above to get things going?
(6) The Best Recommended?
Then I remembered something[5] about using what I did in the var = parentOne only if there is one element (why???) so I try the top-rated answer[6]:
function findThirdDescendant(parent, tagname) {
  parent = document.getElementByID(parent);
  var descendants = parent.getElementsByTagName(tagname);
      if ( descendants.length )
      return descendants[2];
  return null;
}

var elementClick = findThirdDescendant("TicketPseudoReply", "a");

elementClick.setAttribute("id", "clickEnabledNoteButton");
But the underlying HTML I want to attack remains the same: still no "ID=clickEnabledNoteButton". x*D
At this point, I wrote,
 with this much time gone, I've learned a lot, but really need to get this next step done...and find myself not really knowing whether I ought continuing trying something like this function here,
-snipped and put into post linked below for reasons explained below-
or just ask for help.
Your superior wisdom (even if very mean) is very much appreciated and shall be paid forward (part of the reasons I wrote this process down so thoroughly--so others struggling can use the record). ;) I'm also sure that answers not just about how to fix my incompetent tries but the "why's" about these issues would provide a lot of illuminate for many more than just myself.
References (mostly stack) Cited [to-do: modify this back to something suitable for a single-resource-location] :
http://cmpstuff.blogspot.com/2016/05/references-cited-on-stack-question-yet.html

Enumerated "[1]", "[2]", "[3]" ... like the text above in that post.

There rather than here because <10 rep./new people aren't allowed to post >2 links.

For good reasons.[7](also in the post linked)
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)