[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

jqModal popup passing a dynamic parameter

Posted on 2011-02-20
8
Medium Priority
?
1,845 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)
Suggested Courses

649 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