Solved

jqModal popup passing a dynamic parameter

Posted on 2011-02-20
8
1,807 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
Comment Utility
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
Comment Utility
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
Comment Utility
When does event needs to occur, click on td, click on entire tr row?
0
 
LVL 4

Author Comment

by:Dangeriz
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 14

Accepted Solution

by:
R-Byter earned 500 total points
Comment Utility
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
Comment Utility
Of course, your jqmodal code should go inside that live part, for example instead of alert.

Regards
0
 
LVL 4

Author Comment

by:Dangeriz
Comment Utility
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
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

763 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

12 Experts available now in Live!

Get 1:1 Help Now