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
garethtnashAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

0
Julian HansenCommented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,
here's a working example, just uncomment the ajax call and configure it for your needs:
http://jsfiddle.net/jze4h/1/

<a href="#" id="contacttoggle" class="contacttoggleyes">YES</a>

Open in new window


$('#contacttoggle').on('click', function(){
    var $this = $(this), currentStatus;
    if($this.hasClass('contacttoggleyes')){
       $this.html('NO').removeClass('contacttoggleyes').addClass('contacttoggleno');
       currentStatus = 'no';
    } else {
       $this.html('YES').removeClass('contacttoggleno').addClass('contacttoggleyes'); 
        currentStatus = 'yes';
    }
    
    $.ajax({
        type: 'POST',
        url: 'your URL',
        data: { status: currentStatus },
        success: function(){ // do something on success },
        error: function(){ // do something on error }
    });
});

Open in new window

0
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Alexandre SimõesManager / Technology SpecialistCommented:
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 :)
0
garethtnashAuthor Commented:
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
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
Julian HansenCommented:
By "send" I assume you mean hardcode in that the <%= var1%> will be rendered out with the value of var1 when the page is created?

In which case yes - once ASP is finished with the page it will just be data - no more VB variables

so

$.post(url, {id: <%=id%>, value: value}

If id has the value 1 would render in the page as

$.post(url, {id: 1, value: value}

Which is totally valid
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
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

0
garethtnashAuthor Commented:
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

:)
0
garethtnashAuthor Commented:
Excellent :)
0
Julian HansenCommented:
You are welcome - thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.