[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery event on NiceForms drop down change

Posted on 2012-08-21
11
Medium Priority
?
1,080 Views
Last Modified: 2012-09-08
Hi Guys,

I have a wired question here.

Im using niceForms to make my drop downs and below is what I have in my html

 
    <select style="width:1px;" class="NFhidden" size="1" id="aics_Enquiry" name="aics_Enquiry">
        <option value="0">General enquiry</option>
        <option value="1"> Request a statement</option>
        <option value="2"> Feedback</option>
        <option value="3"> Other</option>
    </select>

Open in new window


But when I use firbug on my drop down item, it shows the following html too which I just cant see on my Source code if I view it on the browser.

 
     <dd style="width:" class="relative fl">
     <div class="NFSelect" style="width: 5px; left: 767px; top: 593px; z-index: 999;"><img src="/templates/liberty/images/0.png" class="NFSelectLeft">
     <div class="NFSelectRight">Feedback</div>
     <div class="NFSelectTarget" style="display: none;">
     <ul class="NFSelectOptions">
     <li><a href="javascript:;">General enquiry</a></li>
     <li><a href="javascript:;">Request a statement</a></li>
     <li><a href="javascript:;" class="NFOptionActive">Feedback</a></li>
     <li><a href="javascript:;">Other</a></li>
     </ul>
     </div>
     </div>
     <select style="width:1px;" class="NFhidden" size="1" id="aics_Enquiry" name="aics_Enquiry">
     <option value="0">General enquiry</option>
     <option value="1"> Request a statement</option>
     <option value="2"> Feedback</option>
     <option value="3"> Other</option>
     </select>
     </dd>

Open in new window


My question is, I want to trigger a jquery event when someone changes the menu to 'Feedback' drop down item. How can I do this?

I Tried

$("#aics_Enquiry").change( function(){
	 if($(this)[0].value == 2){
	 $("#adminForm_1").html("hihi");
	 }
});
 

Open in new window


but no luck
0
Comment
Question by:udara22
  • 5
  • 4
  • 2
11 Comments
 
LVL 12

Expert Comment

by:Chris
ID: 38319367
Try this: (written on my phone so untested, please also be very aware of potential typos)
$("#aics_Enquiry").change( function(){
	 if($(this option:selected).val() == 2){
	 $("#adminForm_1").html("hihi");
	 }
});
 

Open in new window

0
 

Author Comment

by:udara22
ID: 38319379
@Demented_Goose : thanks. But no luck
0
 
LVL 12

Expert Comment

by:Chris
ID: 38319446
Managed to get to a PC. This works:

$("#aics_Enquiry").change( function(){
	if($(this).val() == 2){
	$("#adminForm_1").html("hihi");
}

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:udara22
ID: 38319456
Thanks. This works fine on standard drop downs, but not on niceForms as it creates dives and lis instead of select and hides the select drop down. You can see a working one here . http://www.emblematiq.com/lab/niceforms/
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38319512
Please post us a link with your niceForm on it.
0
 
LVL 12

Expert Comment

by:Chris
ID: 38322820
As mcnute has said we ideally need to see a link to your working niceForm. Not being able to see it the best I can do is make a guess at what may work:

$(".NFSelectOptions > li > a").click(function(){
	if($(this).html()=="Feedback"){
		$("#adminForm_1").html("hihi");
	};
});

Open in new window

0
 

Author Comment

by:udara22
ID: 38323175
I understand. it on my localhost at the moment. give me a minute, i'll transfer it on to a server.
0
 

Author Comment

by:udara22
ID: 38323178
Also, is there any way I can share a localhosted website through the internet?
0
 

Author Comment

by:udara22
ID: 38323305
Hi guys, you can see it in here : http://jsfiddle.net/SDVYD/2/
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38324830
although the live() method is deprecated it seems the only way to get through the select options in your niceform.

change the jquery in your jsfiddle to this:

$(document).ready(function(){
    $("ul.NFSelectOptions li").live('click', 'a', function(){
        console.log($(this).text());
     if($(this).text() == "Feedback"){
    console.log("hihi");
     }
});
});

Open in new window

0
 
LVL 12

Accepted Solution

by:
Chris earned 2000 total points
ID: 38325548
This can be done using non-deprecated methods. Using the on() method will accomplish what you're after.

$(document).ready(function(){
	$(document).on('click', 'ul.NFSelectOptions li', 'a', function(){
		if($(this).text() == "Feedback"){
			$("#adminForm_1").html("hihi");
		}
	});
});

Open in new window

Be aware that you haven't actually added a div with an id of "adminForm_1" to your jsFiddle page so this will need adding before the code above will work.

I've added it all in for you here http://jsfiddle.net/N5t6A/
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

831 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