s
Contact Login Register
h M

Integrating Dynamic Forms and the jQuery Tooltip Widget

Author: Chad Nash/Monday, November 26, 2012/Categories: In The Flow

Rate this article:
No rating

Dynamic Forms has a feature named “Help Icons” which work as Tooltips for your Questions. By Default this feature is disabled, so to enable you’ll need to go to Module Configuration –> General Settings and Uncheck the checkbox “Hide Help Icons”. Below is an image of how this feature operates.

FireShot Screen Capture #046 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1

However I always enjoy pursuing alternate methods to achieve a more efficient and dynamic solution. This example will be showcasing the jQuery UI Tooltip Widget. I will be integrating Dynamic Forms and the jQuery Tooltip Widget in this example. Below is an image of the Dynamic Form we’ll be using for this example.

FireShot Screen Capture #042 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1

To implement this behavior, I’ll show you how to do this in 3 simple steps:

Step 1:                

Accumulate all of the HTML Id’s of the controls that you wish to have the Tooltips.

For instance, I have Inspected the First Name, Last Name and Email Address Textboxes using FireBug in Firefox and located the following ID’s in my Dynamic Form:

First Name HTML ID = dnn_ctr2640_DynamicForms_TBR_GUIDf329fd1d-a30c-4cd9-b7ce-44fd1c54518aFName

Last Name HTML ID = dnn_ctr2640_DynamicForms_TBR_GUID7169778c-218e-4345-be2c-d98f224fe7cfLName

Email Address HTML ID = dnn_ctr2640_DynamicForms_TBR_GUIDf91097e8-4251-49b8-ad31-c93905ad6101EmailAddress

** NOTE: Your Dynamic Forms Question HTML ID’s will be completely different than the one’s in this example. Copy/Paste won’t work for Step 1.

Step 2:                

This is the JavaScript and CSS responsible for making the Tooltip operate:

 

Go to Module Configuration –> Layout (Panels / Tabs, Header / Footer / System Messages, Sort Order) –> Header / Footer / System Messages –> Header Message and copy/paste the JavaScript to the section illustrated in the image below:

FireShot Screen Capture #043 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv

**NOTE: Be sure that you’re using the BASIC TEXT BOX AND HTML TEMPLATE to save the JavaScript(Take a look at the Radio buttons that I have selected in the image above).

Then Click “Update Message” to save this template.

Step 3:                

Now we’re going to want to take the HTML ID’s of our Dynamic Form Questions from Step 1 to piece together the JavaScript to assign titles to our Questions. We’re going to use:

document.getElementById('IDHERE').title

Based on my information from Step 1, I can begin piecing together my JavaScript:

// Tooltip for First Name:
document.getElementById('dnn_ctr2640_DynamicForms_TBR_GUIDf329fd1d-a30c-4cd9-b7ce-44fd1c54518aFName').title = 'Enter First Name';

// Tooltip for Last Name:
document.getElementById('dnn_ctr2640_DynamicForms_TBR_GUID7169778c-218e-4345-be2c-d98f224fe7cfLName').title = 'Enter Last Name';

// Tooltip for Email Address:
document.getElementById('dnn_ctr2640_DynamicForms_TBR_GUIDf91097e8-4251-49b8-ad31-c93905ad6101EmailAddress').title = 'Enter Email Address';

Go to Module Configuration –> Advanced Coding Options (AJAX, jQuery, JavaScript, Initial SQL DataBind) –> Custom JavaScript File –> and Copy/Paste your JavaScript into the Initial JavaScript section(illustrated by the image below):

FireShot Screen Capture #047 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv

*** NOTE: Now make sure that you click “Update Settings” at the bottom of the page to save your JavaScript configuration.

Conclusion:                

You should now understand how to implement the jQuery Tooltip Widget into your Dynamic Form. If you have any questions please feel free to leave a comment.

Number of views (100604)/Comments (-)

Tags:
blog comments powered by Disqus

Enter your email below AND grab your spot in our big giveaway!

The winner will receive the entire Data Springs Collection 7.0 - Designed to get your website up and running like a DNN superhero (spandex not included).

  
Subscribe
united luxury shop
konulu porno
deneme bonusu maltcasino bahis siteleri
sex video free download in mobile hot sexy naked indian girls download free xxx video
antalya escort
atasehir eskort antalya escort bahcelievler escort alanya escort atasehir escort
porno izle
gaziantep escort gaziantep escort
escort pendik
izmir escort kayseri escort gaziantep rus escort
vdcasino casino metropol casinomaxi
baybahis
holiganbet
beylikdüzü escort