Link to home
Start Free TrialLog in
Avatar of garethtnash
garethtnashFlag for United Kingdom of Great Britain and Northern Ireland

asked on

JQuery Toogle Value & Class and Send Data

Hello,

I have two links -

<a href="#" class="contacttoggleyes">YES</a>
<a href="#" class="contacttoggleno">NO</a>

Depending on data either shows.

I want to write a JQuery rule so that I can have just one link (dynamically) and on clicked both the value and the class change.

Additionally on click the JQuery should send an ajax post to an external script....

So

<% if value = "Y" %>
<a href="#" class="contacttoggleyes">YES</a>
<%else%>
<a href="#" class="contacttoggleno">NO</a>
<%End if %>

Then the JQuery does its stuff,....

Would be great if the transition could slide...

Any thoughts
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

First change your markup like so
<a href="#" class="contacttoggle contacttoggleyes" data-value="YES">YES</a>
<a href="#" class="contacttoggle contacttoggleno" style="display: none" 
data-value="NO">NO</a>

Open in new window

Then add JQuery
$('a.contacttoggle ').click(function(e) {
    e.preventDefault();
    $('a.contacttoggle').slideToggle();
    $.post(url, {value: $(this).data('value'), function(response) {
         // handle response here
    });
});

Open in new window

To expand on the above.

By adding a generic class to both the <a> elements you can use a slideToggle on the class which will then toggle both from their existing state (one visible the other not).

By adding the HTML5 data attribute to each <a> element you can easily get the value of the element clicked (could also put it in the href if you wanted to) and post that back to your url.
SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
For the sliding effect it really depends on what kind of behavior you want to accomplish.
Slide text, slide like a switch, slide the whole link styled like a button... too many possibilities :)
Avatar of garethtnash

ASKER

Thanks Both, perfect :)

One last question... in the data section, can I send VBScript Variables? <%=Var1%>

And do I need the Success / Error sections?

Thank you so much
If you have the javascript on the HTML you can use <%=Var1%>
If it's on a separate .js file you might need to add that value to and hidden input field and get the value from there.

And no, you  don't need to handle the success or error.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Is there a specific reason you want those <a> elements to have different classes - it is not really necessary unless the class is required for some other function

You could just mark up your <a> elements like so

<a href="#" class="contacttoggle" data-value="YES">YES</a>
<a href="#" class="contacttoggle" style="display: none" data-value="NO">NO</a>

Open in new window


If you want the actual value that is displayed in the <a> to be sent you can simplify even further

<a href="#" class="contacttoggle" >YES</a>
<a href="#" class="contacttoggle" style="display: none" >NO</a>

Open in new window



$('a.contacttoggle ').click(function(e) {

    // prevent the default behaviour for a click
    e.preventDefault();

    // this will toggle both <a>'s to their opposite state
    $('a.contacttoggle').slideToggle();

    // You can use .ajax if you wish but as you are not using
    // any of the other paramters ajax provides .post is 
    // much simpler
    // Note: earlier post was missing closing '}' for data
    $.post(url, {
              value: $(this).html(),
              var1: <%= var1%> // If you want to insert a VBScript variable
          }, 

         // Function to handle response from post
         function(response) {
         // handle response here
         }
    );
});

Open in new window

REally neat, thank you...

Just to check (its probably a different question, I can write if you like)...

But in an example where I have repeated links --


<tr>
<td><%=(RSContacts.Fields.Item("FirstName").Value)%>&nbsp;<%=(RSContacts.Fields.Item("LastName").Value)%></td>
<td><%=(RSContacts.Fields.Item("JobTitle").Value)%></td>
<td>
<% 
if RSContacts("PriceGuideContact") = "N" then
%>
<a class="contacttoggleno" onclick="document.getElementById('ContactID').value = <%=(RSContacts("ID"))%>;document.getElementById('PriceGuideContact').value = 'Y';document.updateContact.submit();">NO</a>
<%
Else
%>
<a class="contacttoggleyes" onclick="document.getElementById('ContactID').value = <%=(RSContacts("ID"))%>;document.getElementById('PriceGuideContact').value = 'N';document.updateContact.submit();">YES</a>
<%
End if
%>
</td>
</tr>
<% 
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
RSContacts.MoveNext()
Wend
%>

Open in new window


With the above the javascript submits a hidden form, which forces a page refresh....

If I could do the update without the refresh...

That would be magic

Thank you both

:)
Excellent :)
You are welcome - thanks for the points.