[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 661
  • Last Modified:

jQuery - Accessing the set value of input fields.

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
brianmfalls
Asked:
brianmfalls
  • 5
  • 2
1 Solution
 
KiasChaos83Commented:
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
 
brianmfallsAuthor Commented:
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
 
brianmfallsAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
brianmfallsAuthor Commented:
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
 
KiasChaos83Commented:
Nice work, I'm glad you solved it ;)
0
 
brianmfallsAuthor Commented:
Thanks Kias.
0
 
brianmfallsAuthor Commented:
Setting the value as a cookie solves the issue.  The key is in using the getcookie() and killcookie() functions.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now