In the code i have tried to install the date picker inside a table but i have no idea how to insert .pls anyone help me to rectify the issue.
To be inserted to this tbl
<table id="TblDate" runat="server">
<tr>
<td width="50Px">
<asp:Label ID="lblDate" runat="server"></asp:Label>
</td>
<td width="150Px">
//here i want the date picker
</td>
<td width="40Px">
<asp:Image ID="Image1" runat="server" />
</td>
</tr>
</table>
Code:
<div align='center'>
Select Date: <input type='text' id='sel' onclick='dispCal()' size=10 readonly='readonly' />
<img src='img/calendar.png' onclick='dispCal()' style='cursor: pointer; vertical-align: middle;' />
<table class='calendar' id='calendar' border=0 cellpadding=0 cellspacing=0>
<tr class='monthdisp'>
<td class='navigate' align='left'><img src='img/previous.png' onclick='return prev()' /></td>
<td align='center' id='month'></td>
<td class='navigate' align='right'><img src='img/next.png' onclick='return next()' /></td>
</tr>
<tr>
<td colspan=3>
<table id='dispDays' border=0 cellpadding=4 cellspacing=4>
</table>
</td>
</tr>
</table>
</div>
On a ASP.Net webforms you can use AjaxControlToolkit calendar.
But you can use a JqueryUI datepicker too.
Related
I have the following markup:-
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="ProjectETA">
<nobr>Project ETA</nobr>
</span></td>
<td valign="top" width="350px" class="ms-formbody">
<span dir="none">
<table id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldTopTable" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="ms-dtinput">
<label for="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" style="display:none">ProjectETA Date</label>
<input type="text" value="20/03/2020" maxlength="45" id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" title="Project ETA" class="ms-input" autopostback="0">
</td>
<td class="ms-dtinput"><img id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerImage" src="/_layouts/15/images/calendar_25.gif?rev=47" border="0" alt="Select a date from the calendar." data-themekey="#"></td><td><iframe id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=47" frameborder="0" scrolling="no" style="display:none; position:absolute; width:200px; z-index:101;" title="Select a date from the calendar."></iframe></td></tr></tbody></table></span>
</td>
</tr>
i wrote the following to remove the second nearest <tr> $("input[id^='ProjectETA_']").closest('tr').closest('tr').remove();, but this removed the nearest tr and not the second nearest tr. any advice?
.closest will return the current element if it matches the selector:
console.log(inner.closest('div'));
<div id="outer">
<div id="inner">
</div>
</div>
You need to navigate up one element in order to be able to call .closest again:
$("input[id^='ProjectETA_']").closest('tr').parent().closest('tr').remove()
$("input[id^='ProjectETA_']").closest('tr').parent().closest('tr').remove();
console.log($('table tr').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="ProjectETA">
<nobr>Project ETA</nobr>
</span></td>
<td valign="top" width="350px" class="ms-formbody">
<span dir="none">
<table id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldTopTable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="ms-dtinput">
<label for="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" style="display:none">ProjectETA Date</label>
<input type="text" value="20/03/2020" maxlength="45" id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" title="Project ETA" class="ms-input" autopostback="0">
</td>
<td class="ms-dtinput"><img id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerImage" src="/_layouts/15/images/calendar_25.gif?rev=47" border="0" alt="Select a date from the calendar." data-themekey="#"></td>
<td><iframe id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=47" frameborder="0" scrolling="no" style="display:none; position:absolute; width:200px; z-index:101;" title="Select a date from the calendar."></iframe></td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</table>
I have a html as below and basically it contains main table with class as <table class="customFormTable block" and this in turn contains some tables like <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
So i want jQuery/javascript to scan for parent table with class table customFormTable and find if any children has table with style="visibility: hidden;", if so hide the parent table i.e table customFormTable
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody><tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody><tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
first change id from 'elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)' to anything else like 'elementTableContainerCheckHidden'
Because jquery throw error while parsing () contains id name.
Try below solution which gives you true / false for elementTableContainerCheckHidden for hidden visibility
if ($('.customFormTable')
.find('#elementTableContainerCheckHidden').css("visibility") === "hidden") {
$('.customFormTable').hide(); //hide your parent table
}
Hello
which table do you want to hide ? You can try to use jQuery like this
$("yourSelector").find(' + "yourTarget"').event("");
"yourSelector" , that means ID/Class which is the child or your selector
"yourTarget" , that means your parent of the selector or your target
"event", means hide()/addClass() like this or your event
I hope you can try this
$("yourSelector").find(' + "yourTarget"').addClass("yourClass");
and by the help of css you can easily done you wish.
OR
$("yourSelector").find(' + "yourTarget"').hide();
is very helpful I hope
you need to traverse all tds and find table element.
$(document).ready(function(){
var tds=$(".customFormTable tbody tr td")
$.each(tds,function(){
var htmls=$.parseHTML($(this).html())
$.each(htmls,function(i,o){
if(o.outerHTML)
if(o.outerHTML.indexOf("table")){
console.log(o.style.visibility)
if(o.style.visibility=='hidden' || o.style.display=='none')
console.log(o)
$(".customFormTable").hide();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody>
<tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I've been playing around with some ideas I've been searching for, and I came across this:
http://jsfiddle.net/RcrCJ/
original html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
original javascript
$(document).ready(function(){
$( '#info #job_costs' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
It was almost exactly what I was looking to do, but I wanted more tabs. I started playing around with it, but for some reason that I can't seem to understand, when I add a third or fourth etc. tab and I run it, it will display all of the tabs until you click on one of them, then it appears normal. I figured it was something silly, but I must have played around with this for hours now and I'm still no further ahead than when I started.
I'm no pro, but I'm usually pretty good at trial / error. This is what I hacked together in an attempt to make 3 tabs:
http://jsfiddle.net/cwaddilove/0Lo7jnoj/
modified html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
<li><span>Tab3</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
</table>
</div><!--div feedback closed-->
<div id="job_assignment" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_assignment">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="assignment" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="sold_to">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
modified javascript
$(document).ready(function(){
$( '#info #job_costs #job_assignment' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
I'm hoping someone will be able to see what I've done wrong and can help point me in the right direction.
Thanks in advanced!
You have an error in jQuery selector:
$( '#info #job_costs #job_assignment' ).hide();
To hide several elements you need to put comma in between selectors like this:
$( '#info, #job_costs, #job_assignment' ).hide();
Solution in your case: you just need to hide two of the tabs so that one would be visible at the beginning. This is what you need to use in your code:
$( '#job_costs, #job_assignment' ).hide();
There is some room for improvement here but this will work. Here is updated fiddle
I'm trying to open a ModalPopup with JavaScript, and i've searched here on stackoverflow and the general advice seems be to use something like this:
$('#inputAdd').live("click", function () {
$('#addRow').show();
$find('<%=mpeIndications.BehaviorID %>').show();
});
Where #inputAdd is an html input image that i have in the ModalPopup, its objective is to show a row (#addRow) where a TextBox is shown. However, when i click on the #inputAdd button, it show the row, but then the ModalPopup hide, I think the reason maybe because there is an UpdatePanel that include the ModalPopup, I am right? In that case which may be a solution? I've putted some of the code I've in the .ascx. Thanks.
<table class="content-box">
<tr>
<td valign="top">
<asp:UpdatePanel runat="server" ID="upAppointments">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnIndicationsHidden" Style="display: none;" />
<asp:Panel runat="server" ID="pnlIndications" CssClass="modalPanel" Style="display: none;">
<table class="content-box">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>
<asp:Panel runat="server" ID="pnlShowCurrentIndication" Style="padding: 13px 8px 8px 8px">
<table style="width: 100%; border: 0;">
<tr>
<td style="width: 30%; vertical-align: top;" rowspan="2">
<asp:RadioButtonList runat="server" ID="gvProfiles" OnDataBound="gvProfiles_DataBound"
DataTextField="Name" DataValueField="Id" Style="white-space: nowrap;" />
</td>
<td style="padding-left: 10px;" class="contentBox">
<table style="width: 100%;">
<tbody id="showTable">
<tr>
<td id="indicacionestd" runat="server">
Indicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blIndicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
<tr>
<td id="contraindicacionestd" runat="server">
Contraindicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blContraindicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
</tbody>
<tbody style="display: none;" id="addRow">
<tr>
<td style="text-align: left; white-space: nowrap;" class="colSepGran">
Nombre:
</td>
</tr>
<tr class="filSepGranRA">
<td class="colSepGran">
<asp:TextBox runat="server" ID="txbName" CssClass="txtNoWidth" Width="150px" ToolTip="Especifique el nombre del perfil"></asp:TextBox>
<act:FilteredTextBoxExtender runat="server" ID="ftbeName" FilterMode="ValidChars"
FilterType="UppercaseLetters, LowercaseLetters, Custom" TargetControlID="txbName"
ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ." />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add.png/" id="inputAdd"
title="Adicionar perfil">
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add_document.png"
id="inputAddSimple" title="Adicionar indicación" />
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/edit.png" id="inputEdit"
title="Editar perfil" />
</td>
<td>
<asp:ImageButton runat="server" ID="imbRemoveProfile" ToolTip="Eliminar perfil" ImageUrl="~/App_Themes/Theme/Images/AppIcons/delete.png" />
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground" TargetControlID="btnIndicationsHidden" CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
</act:ModalPopupExtender>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
Then try this approach:
Add a hidden link for ModalPopup Extender to attach to(which will NEVER be used)
<a href="#" style="display:none;visibility:hidden;"
onclick="return false" ID="dummyLink" runat="server">dummy</a>
Add the ID of the hidden link to the ModalPopupExtender
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground"
TargetControlID="dummyLink"
CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
Showing the modal popup
$find('MyMPE').show();
http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm
Model Dialog Asp.Net With Jquery
I have a JSP file with struts tags.
<html:form action="showcart">
<table width="100%" border="1">
<tr>
<td width="46" align="center" valign="middle"></td>
<td width="110"></td>
<td width="31"> </td>
<td width="171" class="cart_contents"><span class="heading">Product</span></td>
<td width="157" class="cart_contents"><span class="heading">Quantity</span></td>
<td width="181" align="center" valign="middle" class="cart_contents"><span class="heading">Unit Price</span></td>
<td width="157" class="cart_contents"><span class="heading">Total Price</span></td>
<td width="222" align="center" valign="middle"></td>
</tr>
<%!
java.util.Map cartList = null;
%>
<%
cartList = (java.util.Map)request.getAttribute("cartList");
if (null != cartList) {
for(Object p : cartList.values()) {
com.pojo.Product product = (com.pojo.Product)p;
%>
<tr>
<td width="46" align="center" valign="middle"><input type="checkbox" name="checkbox" value="<%=product.getProductid()%>" /></td>
<td width="110"><img src="images/01.jpg" width="110" height="78" /></td>
<td width="31"> </td>
<td width="171"><span class="heading"><%=product.getProductname()%></span><br /><span class="contents">Serial number:<%=product.getProductid()%></span></td>
<td width="157" align="center" valign="middle" class="contents">
<label>
<input name="textfield2" type="text" value="3" size="5" align="center" onchange="submitForm()" />
</label>
<br /></td>
<td width="181" align="center" valign="middle" class="contents"><span class="price"><%=product.getUnitprice()%></span> </td>
<td width="157" class="cart_contents"><span class="heading">Total Price</span></td>
<td width="222" align="center" valign="middle"><span class="blue_contents">Remove</span></td>
</tr>
<%
}
}
%>
</table>
<html:submit/>
</html:form>
Whenever the user changes the quantity textfield, a the JS function, submitForm() is invoked. I am using an inline script as follows.
<script type="text/javascript">
function submitForm()
{
document.forms[0].action = "showcart.do?method=updateCart&pcount=2&product=2345";
document.forms[0].submit();
}
</script>
But, I am getting a JS error saying the form is undefined. Could you tell me where I am wrong?
Waiting for solutions!
Thanks in advance!
Your code worked perfectly fine for me. Make sure that the javascript code comes after the form. Also make sure there are no javascript errors in your brower's error console. If there are an code after the error will fail to run.