Solved

jqModal popup passing a dynamic parameter

Posted on 2011-02-20
8
1,833 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

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

Stressed Out?

Watch some penguins on the livecam!

Question has a verified solution.

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

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…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

728 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