JQuery ajax submit data in a repeated region

Hello,

I have a repeated region (in asp vbscript) -

<% 
While ((Repeat3__numRows <> 0) AND (NOT RSContacts.EOF)) 
%>
<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


This contains two links within a conditional statement -

<% 
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
%>

Open in new window


Which submit a hidden form - causing a page refresh --

<form id="updateContact" name="updateContact" method="get" action="">
<input name="ID" type="hidden" id="ContactBrandID" value="<%=Request("ID")%>" />
<input name="ContactID" type="hidden" id="ContactID" value="" />
<input name="PriceGuideContact" type="hidden" id="PriceGuideContact" value="" />
<input name="conupdate" type="hidden" id="conupdate" value="y" />
</form>

Open in new window


What I really want to do, is populate the hidden fields and send the data in the background when a link is clicked (without page refresh)

and at the same time change the link style, value and innerhtml values --

I've posted this this morning -

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28264386.html

Which answers that query, but I'm guessing that as the anchors within the repeated region will all have the same class, I cant use the same theory?

Thanks All
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.

Alexandre SimõesManager / Technology SpecialistCommented:
Use an indexer on the loop:
<% 
Dim i as integer = 0
While ((Repeat3__numRows <> 0) AND (NOT RSContacts.EOF)) 
i = i + 1
%>

Open in new window

and on every value add the index to make them different per loop:
<%=(RSContacts.Fields.Item("JobTitle").Value & "_" & i.ToString)%>

Open in new window


My VB.net is a bit rusty, sorry if I have some syntax errors.
0
garethtnashAuthor Commented:
Great and then...

Thanks Alex

:)
0
Chris StanyonWebDevCommented:
You can do this directly in the jQuery. When you click on a link you can refer to the link as this. What that allows is for you to navigate the DOM to get at the info you need relative to the link that was clicked. For example:

$('a.contacttoggle ').click(function(e) {
    e.preventDefault();
    myTableRow = $(this).parents('tr');
}

Open in new window

myTableRow will be the row that contains the link that was clicked, no matter which link was clicked. You can then grab the values from that specific row.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Alexandre SimõesManager / Technology SpecialistCommented:
Ah ok, so each repeated zone must behave like the other answer? :)

So remember that in my answer I only had 1 link, not 2.
Here's a working sample: http://jsfiddle.net/jze4h/3/

<a href="#" id="toggle1" data-value="N" class="toggle"></a>
<a href="#" id="toggle2" data-value="Y" class="toggle"></a>
<a href="#" id="toggle3" data-value="N" class="toggle"></a>

Open in new window

$('.toggle').on('click', function(){
    toggleOption(this);
});

function toggleOption(options){
    var $options = $(options), currentStatus;
    $.each($options, 
        function(idx, item) {
            var $item = $(item);
            if($item.data('value') === 'Y'){
               $item.html('NO')
                       .removeClass('contacttoggleyes')
                       .addClass('contacttoggleno')
                       .data('value', 'N');
            } else {
               $item.html('YES')
                       .removeClass('contacttoggleno')
                       .addClass('contacttoggleyes')
                       .data('value', 'Y'); 
            }
        }
    );
}

// initialize options
toggleOption($('.toggle'));

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
Of course, based on your scenario, each link should be created within that while I proposed and be something like:

<a href="#" id="toggle<%= i.ToString %>" data-value="<%= RSContacts("PriceGuideContact") %>" class="toggle"></a>
0
garethtnashAuthor Commented:
Thanks,

Which part determines the page that the data is posted too?

And how can I limit the action to only links with a class of toggle?

I'm assuming class  will be "toggle contacttoggleyes"

Cheers
0
Alexandre SimõesManager / Technology SpecialistCommented:
It will be applied to all items with the class toggle applied.
To limit to links use:
toggleOption($('a.toggle'));
and
$('a.toggle').on('click', function(){

Open in new window


For the submit, you want to submit a form on every click?
0
garethtnashAuthor Commented:
Doesn't need to be a form, can be like --

    $.ajax({
        type: 'POST',
        url: '/scripts/togglepriceguide.asp',
        data: { status: currentStatus, pgtoggle: 'Y' },
    });

Open in new window


but would need to have variables for --

<input name="ID" type="hidden" id="ContactBrandID" value="<%=Request("ID")%>" />
<input name="ContactID" type="hidden" id="ContactID" value="" />
<input name="PriceGuideContact" type="hidden" id="PriceGuideContact" value="" />
<input name="conupdate" type="hidden" id="conupdate" value="y" />


Where
ContactBrandID is variable to the page
ContactID is variable to the link
PriceGuideContact is Y/N
And conupdate = y

Hope that helps?
0
Chris StanyonWebDevCommented:
As garethtnash said - you don't actually need a form. You can store all the relevant details in the link itself, using the data attributes. Build each of your links like so:

<a href="#" data-value="N" data-brandid="someValue" data-contactid="1" class="toggle"></a>

Open in new window

And your .toggle code would look something like:

$('.toggle').on('click', function(e){
	e.preventDefault();
	toggleOption(this);

	data = {
		ContactBrandID : $(this).data('brandid'),
		ContactID :$(this).data('contactid'),
		PriceGuideContact :$(this).data('value'),
	};

	$.ajax({
		url : 'data.php',
		data : data	
	})
	.done(function(response){
		//do something with the response
		$('#response').html(response);
	});
});

Open in new window

0
Alexandre SimõesManager / Technology SpecialistCommented:
So each link will have to be created like:
<a href="#" id="toggle<%= i.ToString %>" data-value="<%= RSContacts("PriceGuideContact") %>" data-contactid="<%= (RSContacts("ID")) %>" class="toggle"></a>

Open in new window

Like this you can handle the click and have all the needed information:
$('.toggle').on('click', function(){
    toggleOption(this);
    processOptionClick(this);
});

function toggleOption(options){
    var $options = $(options), currentStatus;
    $.each($options, 
        function(idx, item) {
            var $item = $(item);
            if($item.data('value') === 'Y'){
               $item.html('NO')
                       .removeClass('contacttoggleyes')
                       .addClass('contacttoggleno')
                       .data('value', 'N');
            } else {
               $item.html('YES')
                       .removeClass('contacttoggleno')
                       .addClass('contacttoggleyes')
                       .data('value', 'Y'); 
            }
        }
    );
}

function processOptionClick(option){
    var $option = $(option);
    var contactBrandId = "<%= ContactBrandID %>";
    var contactId = $option.data("contactid");
    var priceGuideContact = $option.data("value");
    var conupdate = "y";
    
    $.ajax({
        type: 'POST',
        url: '',
        data: {  
            contactBrandId: contactBrandId,
            contactId: contactId,
            priceGuideContact: priceGuideContact,
            conupdate: conupdate
        }
    });
}

// initialize options
toggleOption($('.toggle'));

Open in new window

0
garethtnashAuthor Commented:
Hello Both,

I've mixed this up a little, as I'm struggling to understand :(

So, I've got --

<% 
While ((Repeat3__numRows <> 0) AND (NOT RSContacts.EOF)) 
%>
<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 href="#" id="toggle" data-value="<%= RSContacts("PriceGuideContact") %>" data-contactid="<%= (RSContacts("ID")) %>" data-brandid="<%= request("ID")%>" class="contacttoggle contacttoggleno">NO</a>
<%
Else
%>
<a href="#" id="toggle" data-value="<%= RSContacts("PriceGuideContact") %>" data-contactid="<%= (RSContacts("ID")) %>" data-brandid="<%= request("ID")%>" class="contacttoggle contacttoggleyes">YES</a>
<%
End if
%>
</td>
</tr>
<% 
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
RSContacts.MoveNext()
Wend
%>

Open in new window


And for the JQuery -

	$('a.contacttoggle ').click(function(e) {
	e.preventDefault(this);
	toggleOption(this);
	processOptionClick(this);
	});
	function toggleOption(options){
		var $options = $(options), currentStatus;
		$.each($options, 
			function(idx, item) {
				var $item = $(item);
				if($item.data('value') === 'Y'){
				   $item.html('NO')
						   .removeClass('contacttoggleyes')
						   .addClass('contacttoggleno')
						   .data('value', 'N');
				} else {
				   $item.html('YES')
						   .removeClass('contacttoggleno')
						   .addClass('contacttoggleyes')
						   .data('value', 'Y'); 
				}
			}
		);
	}


	function processOptionClick(option){
		var $option = $(option);
		var contactBrandId = $option.data("brandid");
		var contactId = $option.data("contactid");
		var priceGuideContact = $option.data("value");
		var conupdate = "y";
		
		$.ajax({
			type: 'POST',
			url: '/',
			data: {  
				contactBrandId: contactBrandId,
				contactId: contactId,
				priceGuideContact: priceGuideContact,
				conupdate: conupdate
			}
		});	
	}

Open in new window



So when i click the link, the inner html and the css toggle...

but the value remains 'N'

Also when I open console and click the link, I don't see any data being sent anywhere?

Any suggestions?

Thank you
0
Chris StanyonWebDevCommented:
In your AJAX script you need to set the url of where you want the data to be posted to. At the moment you just have /

$.ajax({
			type: 'POST',
			url: 'path/to/yourScript.asp',
			...

Open in new window

Your anchors also have the same ID = toggle. That has to be unique so either change it to a class or drop it completely
0
garethtnashAuthor Commented:
Hi,

So, I've changed it too --

url: '/scripts/priceguidecontacttoggle.asp',

But still not seeing any activity in the consol?
0
garethtnashAuthor Commented:
And the data-value isn't toggling?


Thanks
0
garethtnashAuthor Commented:
Ahh, so now I can see the data getting posted..

But the data-value still remains the same?

Thanks
0
Alexandre SimõesManager / Technology SpecialistCommented:
Mate, the javascript is mine but the HTML isn't...

I only require one link per option, not 2.
Where you have:
<% 
if RSContacts("PriceGuideContact") = "N" then
%>
<a href="#" id="toggle" data-value="<%= RSContacts("PriceGuideContact") %>" data-contactid="<%= (RSContacts("ID")) %>" data-brandid="<%= request("ID")%>" class="contacttoggle contacttoggleno">NO</a>
<%
Else
%>
<a href="#" id="toggle" data-value="<%= RSContacts("PriceGuideContact") %>" data-contactid="<%= (RSContacts("ID")) %>" data-brandid="<%= request("ID")%>" class="contacttoggle contacttoggleyes">YES</a>
<%
End if
%>

Open in new window

Replace by:
<a href="#" id="toggle<%= i.ToString %>" data-value="<%= RSContacts("PriceGuideContact") %>" data-contactid="<%= (RSContacts("ID")) %>" class="toggle"></a>

Open in new window

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
garethtnashAuthor Commented:
Excellent, thank you both
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.