Setting Values in Form for Object

[dataczarina]

I would like to pre-set input form values in a custom object. For example:

1. I created an object that inserts the following HTML code fragment:

<ol class="personContact">
<li class="firstName">first_name_value</li>
<li class="lastName">last_name_value</li>
</ol>

2. The first_name_value and last_name_value is populated by the user via a
form that accepts user input. (This part was successful.)

3. Later, if the user wants to modify any of the values of the fragment, I
would like to present the original form to the user, with the previously
entered values pre-populated on the form.

4. I would like to pre-populate entire form if the user selects all or only
part of the code fragment.

Can this be done by getting the current selection and then determining what
parent node and child nodes are a part of the selection? Or must I resort to
getting the selection and parsing the selection for the values? This way works
but is rather brute force, and I was hoping there might be a more elegent way
to accomplish this. Plus, if the user does not get the entire fragment
selected, the parse method will not work. I hope this is understandable!

I am new at this and would appreciate any help!

[danilocelic *TMM*]

dataczarina wrote:

> Can this be done by getting the current selection and then determining what
> parent node and child nodes are a part of the selection? Or must I resort to
> getting the selection and parsing the selection for the values? This way works
> but is rather brute force, and I was hoping there might be a more elegent way
> to accomplish this. Plus, if the user does not get the entire fragment
> selected, the parse method will not work. I hope this is understandable!

How will your extenison know that it is working with one of "its" lists
and not another list? Will it always be an OL with a class of
personContact? Or is there some other unique way to identify the code
for your extension?



--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[dataczarina]

Thank you so much for your response!! I apologize for being late in responding,
but I wanted to write the code and elaborate on the behavior of the code before
I did respond.

Your question is very valid, and caused me to rethink what I was doing.

Yes, the web component will always be implemented as an <OL> tag.

What I am attempting to provide is a set of web components that a content
creator can simply plop on a page and populate the component using a fillable
form. If a user needs to correct information in the component, I would like
for them to be able to select the component that needs to have corrections
made, have the form be redisplayed. The user can then make any required
changes, and those changes are immediately reflected in the
code of the web component.

I can create the component. It is the editing that is giving me problems.

Two things happen:

1) If I select the entire component, the populated edit form appears, I can
make changes, and the changes are seen on the web page. But if I edit the
component again, the last set of changes is not picked up by the script. In
other words, the edit form continues to be populated with the original (not the
edited) component values.

2) If I put the cursor inside the <OL> tag or select some text within the <OL>
tag in the web component, the populated edit form appears. I can make
changes, but when I click the "OK" button, the code for a new web component is
inserted into the page at the point where the cursor or selection is.

Web Component

<ol class="personContactShort">
<li class="personContactFirstName">Testy</li>
<li class="personContactLastName">Tester</li>
<li class="personContactWorkPhone">555-555-5555</li>
</ol>

The code that produced these results is attached to this message.

Thank you again **very** much,

Kat---
PS: Sorry for all of the comments in the code. I do this when I am trying to
learn how to do something.


//--------------- LOCAL FUNCTIONS ---------------

function initializeUI(){

// Initialize variables
var varStr = "";
var varPersonContactFirstName = "";
var varPersonContactLastName = "";
var varPersonContactWorkPhone = "";
var curDOM = "";
var curSel = "";
var curNode = "";
var curTag = "";
var curTagValue = "";
var curAttr = "";
var curChildren = "";

// Get the current document
curDOM = dw.getDocumentDOM('document');
curSel = dw.getSelection();

// Find out where we are in the document
curNode = curDOM.getSelectedNode(curSel);

// Are we in the personContactShort web component node?
// This can be determined by finding out if the current node is <ol
class="personContactShort">
curTag = curNode.tagName;
curTagValue = curNode.innerHTML;
curAttr = curNode.getAttribute('class');

// Did the user select something on the page? Did they select the
// personContactShort web component?
if( (curSel[0] != curSel[1]) && (curAttr == "personContactShort") ) {

// If curSel[1]-curSel[0] is <> 0, then a selection was made. Otherwise if
the curson is not in a
// personContactShort node, then I am at an insertion point

// Yes we are, so noe determine if we are in the parent or child node
var inParent = curNode.hasChildNodes();

// If in a child node, then get the parent node
if(!inParent) {

parentNode = parentNode(curNode);
curNode = parentNode;

} // End of inParent IF statement

// Must be in the parent node, so get information about the current (parent
node)
curTag = curNode.tagName;
curTagValue = curNode.innerHTML;
curAttr = curNode.getAttribute('class');

// Now get information about all of the child nodes
curChildren = curNode.childNodes;

// The childNodes method returns an array, so loop through
for (i=0; i < curChildren.length; i++) {

// What we are trying to do is pre-populate the user input for for the
// personContactShort web component, so extract the class attribute and
// value of the tag
curNode = curChildren[i];
curTag = curNode.tagName;
curTagValue = curNode.innerHTML;
curAttr = curNode.getAttribute('class');

// Build the string that will be used to pre-populate the user input form
var formStr = 'document.theForm.' + curAttr + '.value = "' + curTagValue
+ '"';
alert("Eval String = " + formStr);

// Evaluate the string that will pre-populate the user input form
eval(formStr);
} // End FOR loop

} else {

// The user did not make a selection, and we are not in the personContactShort
component, so we must be an
// insert point
document.theForm.personContactFirstName.focus(); //set focus in Value
text field
} // End of curSel IF statement
} // End of initializeUI function

[danilocelic *TMM*]

dataczarina wrote:

> 1) If I select the entire component, the populated edit form appears, I can
> make changes, and the changes are seen on the web page. But if I edit the
> component again, the last set of changes is not picked up by the script. In
> other words, the edit form continues to be populated with the original (not the
> edited) component values.

After you insert the code, try using:
dw.getDocumentDOM().synchronizeDocument()

That should cause the code in the page to "reset" that node that was
selected for editing the next go around.

> 2) If I put the cursor inside the <OL> tag or select some text within the <OL>
> tag in the web component, the populated edit form appears. I can make
> changes, but when I click the "OK" button, the code for a new web component is
> inserted into the page at the point where the cursor or selection is.

It seems form this explanation that when you add the code to the page
that you are adding the entire code for the component, and not just
making changes to the proper node. I don't think that is what you're
wanting to do.

What is the code for the applying of the changes the user makes? If you
do just want to insert the full code for the updated component, then
you'll need to first expand the selection to the object that you're
interested in, that is step back from the cursor selection to get the
selected node (or the parent of the node as the case may be).

var dom = dw.getDocumentDOM();
var selNode = dom.getSelectedNode();

// if selection is in an LI, get the parent OL
if(selNode.tagName != 'OL'){
selNode = selNode.parentNode;
}
// From here you can then manipulate the attributes
// of the childNodes within the LI



Haven't looked further at it yet, but just casually looked at your code
and this stood out:

> // Build the string that will be used to pre-populate the user input form
> var formStr = 'document.theForm.' + curAttr + '.value = "' + curTagValue
> + '"';
> alert("Eval String = " + formStr);

There is no need to do an eval() in this situation, as you should be
able to use this type of notation:
document.theForm[curAttr].value = curTagValue;

Or if you include* the dwscripts.js file from:
/Shared/Common/Scripts/dwscripts.js

Then you can use this:
dwscripts.findDOMObject(curAttr).value = curTagValue;



*technically, since that particular file is a shared in memory file,
then you should be able to just call the methods of that object wihotu
having to link to the dwscripts.js file, but it's always best to be sure
that you'll get the code that you're tryig to use.


--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[dataczarina]

Thank you for your suggestions. They helped me to optimize my code, and made
some concepts much clearer to me.

May I ask a very basic question the flow of events surrounding objects??

This is my understanding on how it works:

1. User selects to insert an object into the current document.

2. DW calls canInsertObject() method that is in the object_name.js file.

3. If canInsertObject() method returns true, then DW looks in the
object_name.html file for a FORM, and display the form to the user in a dialog
box.

4. If the canInsertObject() method returns false, then DW displays an error
message

5. Otherwise, the onLoad command of the FORM is executed. In this case it
calls the initializeUI method in the object_name.js file.

6. The user enters the values into the FORM?s input fields and presses the
?OK? button.

7. DW calls the insertObject() or objectTag() method that is in the
object_name.js file.

8. Process completes.

So, if this process flow is correct, then would it make sense to:

a. In the initializeUI method
- Determine if the cursor is in an existing contactPersonShort component.
- If this is true, then grab the values of the contactPersonShort component
- Then set form values to what was in the contactPersonShort component
- If the cursor is not in an existing contactPersonShort component, then just
show
a blank input form

b. In the insertObject() method
- Perform and data input validation
- If the cursor was in an existing contactPersonShort component, then update
the
values in the existing web component
- If the cursor is not in an existing contactPersonShort component, then
insert the
entire script of the contactPersonShort component

I somehow feel that I am making this **much** more complicated than it needs
to be!

And, again, I thank you very much for your help.

Kat---

[danilocelic *TMM*]

dataczarina wrote:

> This is my understanding on how it works:
> 4. If the canInsertObject() method returns false, then DW displays an error
> message

DW doesnt' show an erro rmessage, it will just not invoke the object in
question. At least in my experience with it. You could impleemnt your
own alert message in this function though to let the user know that the
current state of the page doesn't allow it to be used.

Beyond that, I think you have a good grasp of how objects work.

>- If the cursor was in an existing contactPersonShort component, then update the
> values in the existing web component
>- If the cursor is not in an existing contactPersonShort component, then insert the
> entire script of the contactPersonShort component

This sounds good to me.

> I somehow feel that I am making this **much** more complicated than it needs
> to be!

It will depend on how useful you want the extension to be. The more you
want it to do (in this case be inspectable) the harder it is to make it
all work smoothly for the user, as you have to consider all sort of
things they might do, such as not seelcting the entire component. You
could just make your extension an insert only, and they just edit the
values in the page after insertion, that would be easier, but less usefull.



--
Danilo Celic
| Extending Knowledge Daily : [url]http://CommunityMX.com/[/url]
| Team Macromedia for Dreamweaver : [url]http://macromedia.com/go/team/[/url]

[dataczarina]

Danilo,

Thank you again for all of your help. I think I now have a plan of how to
build this extension that will be somewhat robust.

May I prevail on you for one more question????

1) I require the user to be in the <BODY> node in order to be able to insert a
personContactShort component.

2) The script recognizes it is currently in the <BODY> node.

3) The user can successfully insert a new instance of the personContactShort
component.

4) The user immediately wants to edit the newly created component, and places
the curson within the new component.

5) However, now the script is confused as to which component it is currently
is. It still thinks it is in the <BODY> node, rather than in the <OL> or <LI>
node.

6) If the user moved from one page to another (say from the .html file to the
..js file, and back again) the cursor now can recognize the current node.

My question: Do I need to refresh something, so that the newly created node
is recognized?

Thank you again for all of your help!!

[danilocelic *TMM*]

dataczarina wrote:

> 5) However, now the script is confused as to which component it is currently
> is. It still thinks it is in the <BODY> node, rather than in the <OL> or <LI>
> node.
>
> 6) If the user moved from one page to another (say from the .html file to the
> .js file, and back again) the cursor now can recognize the current node.
>
> My question: Do I need to refresh something, so that the newly created node
> is recognized?

How are you testing this out? In code view or in design view? Both?

dom.synchronizeDocument() should tell DW to update things. However, it
is possible that if the user is within Code view that the changes may
not take effect until either the user switches views or moves to another
document. See this thread for a way someone caused DW to be forced into
an update:
[url]http://www.macromedia.com/cfusion/webforums/forum/messageview.cfm?catid=190&threadid=978247&enterthr ead=y[/url]


--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]