Solved

jqModal popup passing a dynamic parameter

Posted on 2011-02-20
8
1,817 Views
Last Modified: 2013-11-05
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


0
Comment
Question by:Dangeriz
  • 5
  • 3
8 Comments
 
LVL 14

Expert Comment

by:R-Byter
ID: 34941404
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
 
LVL 4

Author Comment

by:Dangeriz
ID: 34941622
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
 
LVL 14

Expert Comment

by:R-Byter
ID: 34941654
When does event needs to occur, click on td, click on entire tr row?
0
 
LVL 4

Author Comment

by:Dangeriz
ID: 34948205
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 14

Accepted Solution

by:
R-Byter earned 500 total points
ID: 34959255
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
 
LVL 14

Expert Comment

by:R-Byter
ID: 34959343
Of course, your jqmodal code should go inside that live part, for example instead of alert.

Regards
0
 
LVL 4

Author Comment

by:Dangeriz
ID: 34977823
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
 
LVL 14

Expert Comment

by:R-Byter
ID: 34978165
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now