garethtnash
asked on
JQuery Toogle Value & Class and Send Data
Hello,
I have two links -
<a href="#" class="contacttoggleyes">Y ES</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">Y ES</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
I have two links -
<a href="#" class="contacttoggleyes">Y
<a href="#" class="contacttoggleno">NO
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">Y
<%else%>
<a href="#" class="contacttoggleno">NO
<%End if %>
Then the JQuery does its stuff,....
Would be great if the transition could slide...
Any thoughts
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 :)
Slide text, slide like a switch, slide the whole link styled like a button... too many possibilities :)
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
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
If you want the actual value that is displayed in the <a> to be sent you can simplify even further
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>
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>
$('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
}
);
});
ASKER
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 --
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
:)
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)%> <%=(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
%>
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
:)
ASKER
Excellent :)
You are welcome - thanks for the points.
Open in new window
Then add JQueryOpen in new window