jqModal popup passing a dynamic parameter

Hi All,

I'm pretty new to JQuery. I am using jqModal (http://dev.iceburg.net/jquery/jqModal/) to open an ASP.NET webform using the AJAX example. I got this to work, but I need to pass a dynamic ID to the ASPX page so that it knows which item to edit (the popup is the item edit form).

So far, I have this code:

$('#ex2').jqm({ ajax: 'AppLog.aspx?ActionType=4&ID=1&Caller=2', trigger: 'input[ID*="ContentPlaceHolder1_GridView1_cmdDetail"]' });

Open in new window


The ID i want to pass is in another column of the GridView. The ID is in the first column (first TD). The ID should be replaced in the querystring of the JQuery code. I need a way to dynamically get the ID of the relevant table row and pass it to the querystring ID.

The HTML output of the GridView is as follows:

<table cellspacing="0" cellpadding="3" rules="all" id="ContentPlaceHolder1_GridView1" style="background-color:#FFFFCC;border-color:#FFFFCC;border-width:1px;border-style:None;font-family:Verdana;font-size:Small;width:100%;border-collapse:collapse;">
			<tr align="center" valign="middle" style="color:White;background-color:#8BA347;font-weight:bold;">
				<th scope="col" style="white-space:nowrap;"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$ID&#39;)" style="color:White;">¿¿</a></th><th scope="col" style="white-space:nowrap;"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$log_type&#39;)" style="color:White;">¿¿¿¿</a></th><th scope="col" style="white-space:nowrap;"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$log_progname&#39;)" style="color:White;">¿¿¿¿</a></th><th scope="col" style="white-space:nowrap;"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$log_time&#39;)" style="color:White;">¿¿</a></th><th scope="col" style="white-space:nowrap;"><a href="javascript:__doPostBack(&#39;ctl00$ContentPlaceHolder1$GridView1&#39;,&#39;Sort$log_message&#39;)" style="color:White;">¿¿¿¿</a></th><th align="center" scope="col" style="white-space:nowrap;">&nbsp;</th><th align="center" scope="col" style="white-space:nowrap;">&nbsp;</th>
			</tr><tr valign="middle" style="color:Black;background-color:#E7EBB8;">
				<td style="white-space:nowrap;">1</td><td style="white-space:nowrap;">ec</td><td style="white-space:nowrap;">testprogname</td><td style="white-space:nowrap;">2011-02-15 11:31:46</td><td style="width:300px;">test message</td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$cmdDetail" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdDetail_0" /></td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$cmdUpdate" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdUpdate_0" /></td>
			</tr><tr valign="middle" style="color:Black;background-color:#F0EDC8;">
				<td style="white-space:nowrap;">2</td><td style="white-space:nowrap;">ta</td><td style="white-space:nowrap;">test program 4</td><td style="white-space:nowrap;">2011-02-15 11:33:13</td><td style="width:300px;">test message 1</td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$cmdDetail" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdDetail_1" /></td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$cmdUpdate" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdUpdate_1" /></td>
			</tr><tr valign="middle" style="color:Black;background-color:#E7EBB8;">
				<td style="white-space:nowrap;">8</td><td style="white-space:nowrap;">ta</td><td style="white-space:nowrap;">test program 5</td><td style="white-space:nowrap;">2011-02-18 11:33:13</td><td style="width:300px;">test message 2</td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl04$cmdDetail" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdDetail_2" /></td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl04$cmdUpdate" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdUpdate_2" /></td>
			</tr><tr valign="middle" style="color:Black;background-color:#F0EDC8;">
				<td style="white-space:nowrap;">9</td><td style="white-space:nowrap;">ta</td><td style="white-space:nowrap;">test program 6</td><td style="white-space:nowrap;">2011-02-18 11:33:13</td><td style="width:300px;">test message 3</td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$cmdDetail" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdDetail_3" /></td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl05$cmdUpdate" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdUpdate_3" /></td>
			</tr><tr valign="middle" style="color:Black;background-color:#E7EBB8;">
				<td style="white-space:nowrap;">10</td><td style="white-space:nowrap;">ta</td><td style="white-space:nowrap;">test program 7</td><td style="white-space:nowrap;">2011-02-18 11:33:13</td><td style="width:300px;">test message 4</td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$cmdDetail" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdDetail_4" /></td><td align="center" style="white-space:nowrap;"><input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$cmdUpdate" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdUpdate_4" /></td>
			</tr>
		</table>

Open in new window


LVL 4
DangerizAsked:
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.

R-ByterCommented:
I'm a little bit confused about what you've done so far.
In this line you want value of the ID value to be dynamic?

AppLog.aspx?ActionType=4&ID=1&Caller=2

If so, what element on the page have an ID ex2?
In the table code you posted can you please mark the part that needs to be passed to jQuery since that is the thing I can not understand from your question.

Regards
0
DangerizAuthor Commented:
yes, the bold part is what I want to be dynamic... so that "ID=1", could be "ID=9" for example.

The part that needs to be passed to JQuery is the first TD of each TR (because that is the ID column of the GridView):

The first TD of each TR:
<td style="white-space:nowrap;">1</td>
<td style="white-space:nowrap;">2</td>
<td style="white-space:nowrap;">8</td>
<td style="white-space:nowrap;">9</td>
<td style="white-space:nowrap;">10</td>



0
R-ByterCommented:
When does event needs to occur, click on td, click on entire tr row?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

DangerizAuthor Commented:
The event needs to occur on the onclick of the submit buttons in the 6th TD of each TR:
<input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl06$cmdDetail" value="¿¿" id="ContentPlaceHolder1_GridView1_cmdDetail_4" />

I've managed to configure the trigger of the jqmodal popup by finding those submit buttons by their IDs. I'm not sure if this is the correct way for doing everything though... but it seems like I'm just missing some logic to determine which row's input button is clicked so that I can pass that row's ID column.
0
R-ByterCommented:
Since I dont have access to your whole page and your other pages like the one you call with ajax, I wrote an example which shows you how to get desired value from td. You can then use it where you want. Here it goes:

<script type="text/javascript"> 
$(document).ready(function() {
	$("[id*=_cmdDetail_]").live('click', function(event){
		id = $(this).parent().parent().find("td:first").text();
		alert(id);
	});
	//$('#ex2').jqm({ ajax: 'AppLog.aspx?ActionType=4&ID=1&Caller=2', trigger: 'input[ID*="ContentPlaceHolder1_GridView1_cmdDetail"]' });
});
</script> 

Open in new window


Notice that I commented your jquery line just for testing purposes to avoid errors.

Regards
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
R-ByterCommented:
Of course, your jqmodal code should go inside that live part, for example instead of alert.

Regards
0
DangerizAuthor Commented:
Your script helps with getting the ID on the click event of the button. But unfortunately, I couldn't use it with the jqmodal AJAX popup because it requires a trigger. And I'm not sure how to integrate the two (I tried, but couldn't get it right).

Eventually, I just changed that column from a button to a hyperlink and configured the correct URL and ID on the server side, then just used the default jqmodal AJAX that opened a page from the @HREF of the hyperlink.

 
$('#ex2').jqm({ ajax: '@href',trigger: 'a.ex2trigger'});

Open in new window

0
R-ByterCommented:
Thanks for the points. I forgot to add URL here with my help solution to try it.

http://www.bosko.rs/ee/jqmodal/

Regards
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.