Solved

jQuery - Accessing the set value of input fields.

Posted on 2011-03-17
7
596 Views
Last Modified: 2012-05-11
The attached script sets an input field on a multifunctional form that either saves an email, or sends an email.  On loading a saved email, the value is set correctly.  (The value is a list of id's from content elements placed within a template)  The issue is this: if the content elements are changed within the email template, the input field on the multifunctional form does not change.

I had solved a similar issue before via the formhtml() function, which somehow manages to get the value of 'dropped' elements without reloading the page.  Unfortunately, I am unsure as how I might apply that function to work in this case, or whether it can be applied in this case at all.

Here is the question: How can I access the updated values, rather than the values which are accessible from the initial page load?  Please let me know if I should, or can, elaborate on any point.  Thanks in advance for your input.
jQuery('.ui-droppable', '#templateContainer').each(function(eachIndex){  /////// build list dynamically
											
	var contentElement = $(this).attr('contentElementID');
	//alert('contentElement: ' + contentElement);
											
	var pcIDl = $('#placedContentIDList').val();
	//alert('pcIDl: ' + pcIDl);
	
	var placedContent = pcIDl + ',' + contentElement;
	//alert('placedContent: ' + placedContent);
	
	$('#placedContentIDList').val(placedContent);

});

var placedContentIDList = $('#placedContentIDList').val();

Open in new window

0
Comment
Question by:brianmfalls
  • 5
  • 2
7 Comments
 
LVL 5

Expert Comment

by:KiasChaos83
ID: 35162307
I'm afraid your description of the problem is too vague.

"if the content elements are changed within the email template, the input field on the multifunctional form does not change."

I have a few questions:

What changes the content elements within the email template? Are the 'content elements' changed via javascript? Is there an Ajax call happening somewhere?

What is formhtml() ? Is this a javascript function for a particular CMS or something?

You can get the values by calling $('#placedContentIDList').val(); again... but I really don't understand your question yet.

I'm happy to help if you could just elaborate. Cheers.
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 35165213
The content elements are changed via jQuery draggable/droppable funcions.  There is an Ajax call, via coldfusion, which is used to change the template.  The content elements come from expandable libraries which are switched out when the templates are switched out, since each library is specific to a content area type, and each template may or may not have one to three content area types.  I added a screen cast to show the template interface in action.

brianmfalls-432762.flv

formhtml() is a custom function that I found some months ago to solve a similar issue.  I have attached the function as well.

///////////////////////////////////////////////// begin formhtml() function  /////////////////////////////////////////////////
$.fn.formhtml = function() {
	if (arguments.length) return $.fn.html.apply(this,arguments);
	this.find("input,textarea,button").each(function() {
		this.setAttribute('value',this.value);
	});
	this.find(":radio,:checkbox").each(function() {
		if (this.checked) this.setAttribute('checked', 'checked');
		else this.removeAttribute('checked');
	});
	this.find("option").each(function() {
		if (this.selected) this.setAttribute('selected', 'selected');
		else this.removeAttribute('selected');
	});
	return $.fn.html.apply(this);
};
///////////////////////////////////////////////// end formhtml() function  /////////////////////////////////////////////////

Open in new window


It's early yet.  Let me drink some coffee and look to remember how I am calling the values presently and I will get back to you on whether val() will do the trick or not.  Thanks for responding KiasChaos83.
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 35165746
jQuery('.ui-droppable', '#templateContainer').each(function(eachIndex){ 

Open in new window

Since droppable area types will vary from layout template to layout template, I opted to use jQuery’s each() function to loop through the droppable areas.  The ‘types’ are unique only by image size.  E.G. Droppable elements can only be placed in droppable areas with corresponding area/size.

var contentElement = $(this).attr('contentElementID');
var pcIDl = $('#placedContentIDList').val();
var placedContent = pcIDl + ',' + contentElement;

Open in new window

-contentElement is the value of the 'contentElementID' attribute of the content element within the droppable area being indexed by the each() function.
- pcIDl is the value of the existing list of content element ID’s on the multifunctional form.
- placedContent is the appendage of the contentElementID to pcIDl.

      
$('#placedContentIDList').val(placedContent);
});

Open in new window

The value of the multifunctional form field is changed to the appended list.


Since the value we are after is in the contentElementID attribute of the content elements container (<td></td>) tag, we cannot leverage val().  I tried adding a value attribute to the container tag, but when I called the tag via the tags ID then val(), it came back ‘undefined’.  I’ll keep poking away at it.  :)
var contentElement = $(this).attr('contentElementID');

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 1

Accepted Solution

by:
brianmfalls earned 0 total points
ID: 35167905
Problem Solved...  :)

Here's the script that makes the magic happen...
jQuery('.ui-droppable', '#templateContainer').each(function(eachIndex){  /////// build list dynamically
	
	var thisCookieValue = getCookie( this.id );
	var pcIDl = $('#placedContentIDList').val();
	var placedContent = pcIDl + ',' + thisCookieValue;
	
	$('#placedContentIDList').val(placedContent);

});

Open in new window


Here's the getCookie function:
function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ";", len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

Open in new window


When a content element is dropped into its associate area, the following destroys/creates the cookie:
var thisContainer = $(this).attr('id');
var contentElement = $(this).attr('contentElementID'); ///////       returns value of placed content element
killCookie(thisContainer);  /////// removes cookie associate to droppable area
document.cookie = thisContainer + '=' + contentElement;  /////// creates cookie associate to droppable area (contains content element id)

Open in new window


Here's the killcookie function:
function killCookie(name) {
	if ( getCookie( name ) ) document.cookie = name + "=" +
	";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}

Open in new window

0
 
LVL 5

Expert Comment

by:KiasChaos83
ID: 35173818
Nice work, I'm glad you solved it ;)
0
 
LVL 1

Author Comment

by:brianmfalls
ID: 35193532
Thanks Kias.
0
 
LVL 1

Author Closing Comment

by:brianmfalls
ID: 35196702
Setting the value as a cookie solves the issue.  The key is in using the getcookie() and killcookie() functions.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now