I have an update panel with a runat server div inside,
this div isn't shown in the first load of the page. I used to show it after user input the search key then reload the update panel which contain the div and fill div controls then show it.
I have a CheckBox inside this div tag and I need to get the click event of this check box with jquery
I try to use direct .click or .live but all doesn't work !!
Any help will be appreciated.
Use this code
$(document).ready(function()
{
//This will add one function to be called on every request of the update panel
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler()
{
$('#checkboxID').change(function(){
//Your functionality
});
}
You need to introduce javascript into the page to simulate the click event again. Page.RegisterClientScriptBlock or Page.RegisterStartUpScript should do it.
or
place this inside the updatepanel
<script type="text/javascript">
Sys.Application.add_load(your jquery function);
</script>
Related
I want to load two repeater controls after the asp.net page is loaded completely. These two controls are populated by a button click event. Instead of the button being clicked by the user, I want that to be clicked by an ajax call - or by any other means - after the page is loaded.
I have followed the technique described here: http://forums.asp.net/t/1452988.aspx?how+to+load+gridview+after+the+page+is+completely+loaded.
Essentially it uses Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded); Once the pageLoaded event handle is obtained, it uses javascript to call the button click event. While it sort of works, the issue is that the page loading and the button click events are executed repeatedly. Because of this, the page flickers constantly. Please let me know how to resolve this issue.
Note: The site has a master page which has the scriptmanager.
<asp:UpdatePanel>
...More code here...
</asp:UpdatePanel>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
var hdnLoadedPage = $get('<%= hdnLoaded.ClientID %>');
var btnApplyFilter = $get('<%= btnFilter.ClientID %>');
if (hdnLoadedPage != 'Yes') {
btnApplyFilter.click();
}
}
</script>
</asp:Content>
Thanks
I have a ASP.net page which has a Datagrid to display all the Records of a Table. On Click of an Add Button pops up an IFRAME with different .ASPX page to be saved as a new record. I would like to add the new record to the Datagrid on the parent page from the IFRAME.
Please suggest how can I refresh the Datagrid alone without refreshing the entire page.
Note: The Save button is in IFRAME in an another page and the Datagrid is in another Page.
Thanks
If you just want to refresh Datagrid only , you may consider Ajax . Here is the link
Or You may also consider a java script to refresh the grid, here is the code to give you an idea
protected void grid_view_refesh()
{
grid_view.Bind();
}
Button:
<button id="btn_refresh" onclick="btn_refresh_click();">Refresh</button>
javascript
<script type="text/javascript" language="javascript">
function grid_view_refesh()
{
// you code to refresh grid
}
Hope it will help
EDITED
You can try this code on your popup windows ( Child window)
<script type="text/javascript">
function CloseWindow() {
window.close();
window.opener.location.reload();
}
<input type="button" value="Close Window" onclick="javascript: return CloseWindow();" />
Wondering if there is a way upon clicking on a hyper link to set drop downlist to visible in code behind or asp?
<asp:HyperLink ID="HyperLink2" runat="server">View More Workout Programs ยป</asp:HyperLink>
If you have to do it in code-behind, then use a LinkButton instead of a HyperLink. Then it will have a click event just like any button and in that click event you can set the other element to .Visible=true.
However, does this need to be done in code-behind? Keep in mind the difference in "visibility" between server-side and client-side code:
If set to .Visible=false on the server-side, the content is not delivered to the client at all.
If set to display:none on the client-side, the content is present and can be viewed in the page source, it's just not displayed by the browser.
In some cases, the former is needed for security purposes. But if it's just a matter of user experience then I would recommend showing/hiding the content entirely on the client-side so as to avoid post-backs that do nothing more than change element display properties.
For example (assuming jQuery):
<a id="toggler" href="#">Show the content</a>
<div id="hidden" style="display:none;">Content</div>
<script>
$(document).ready(function(){
$("#toggler").click(function(){
$("#hidden").show();
});
});
</script>
Use an asp:LinkButton instead of a hyperlink and handle the OnClick event. In the OnClick event, toggle myDropDownList.Visible depending on whether you want to show it or not.
You should implement that kind of feature in the client (javascript code) to improve user experience.
Anyway, you can use a Panel with Visibility=false and put Visibility=true in code behind when link is clicked. You would need to adjust the position of that panel with css to look like a dropdown.
You can try with JQuery : http://www.jquery.com
It will be something like
<script type="text/javascript">
$(document).ready(function(){
$("#<% =HyperLink2.ClientID %>").click(function() {
$("#<% =DropDownList1.ClientID %>").toggle();
});
});
</script>
If you need to send form back to the server, use asp:LinkButton instead and handle OnClick event on the server side. If you need to show drop down list on the client side, use javascript function with onclick client event to show or hide any section you want.
I have 6 thumbnail images as asp:imagebutton instances. These are treated as triggers for asp:updatepanel control on the page which contains an asp:image control.
When the user clicks on the thumbnail, the image in the asp:updatepanel's image control changes to the clicked thumbnail image.
The users are also allowed to again enlarge the image by clicking on the enlarge button (this runs the lightbox function). This works fine.
Question
The problem is that the enlargement works when the page loads, however when the user select a thumbnail and then tries. The method (lightbox) does not work.
I have had similar problems with javascript functions and the asp:updatepanel. Has anyone else faced similar issues? If so, how do I solve this issue?
A $ function (which is a DOM ready function) will be only be executed when the page loads for the first time.
Any further AJAX call (which is a partial loading/rendering) will not fire DOM ready function. Which is the reason, you were not able to get it working.
In you case, this function binds your anchor link (button) with the lighbox behavior the first time the page loads. so, it works. The next time when you refresh the update panel (which is a partial render) the button is not bound to lightbox again. Unless this binding is achieved it will not show up.
Normally a script control is used in such cases to fire the event every time the control is loaded.
If you are not bothered here about segregating related objects, the solution like pageLoad is still fine.
Following javascript was defalut one, it work fine without asp:UpdatePanel
<script type="text/javascript">
$(function()
{
$('#gallery a').lightBox();
});
</script>
but it is not working with asp:UpdatePanel so there is the need to call function on page load and it works fine.
<script type="text/javascript">
function pageLoad(sender, args)
{
$('#gallery a').lightBox();
}
</script>
Thanks guys for helping.
Solved:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script src="../slimbox-2.05/slimbox2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function pageLoad() {
jQuery(function ($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */
}, null, function (el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
</script>
Using javascript, I want to submit a asp.net button, how can I do this?
I know the onclick looks like: javascript:WebForm_DoPostBackWithOptions(new .....);
I am also weary because the ID of the control can change.
If you have a control similar to this:
<asp:Button ID="Foo" ... />
You can something simple like fire the 'click' event in JS while accessing the updated client ID (jQuery syntax here):
$('#<%=Foo.ClientID%>').click()
Or you could get the proper JS to run like this:
<script type="text/javascript">
function clickFoo() {
<%=Page.ClientScript. GetPostBackEventReference(Foo)%>;
}
</script>
var button = document.getElementById('btnID');
if (button)
{
button.click();
}
If you can put the javascript right in your .aspx markup, then you can get around the changing ID's as well by doing this:
var button = document.getElementById('<%= myServerButton.ClientID %>');
if (button)
{
button.click();
}
When your .aspx is processed, the ID of the button as it appears on the page will be substituted into your javascript function.
Using jquery put something like this into your aspx page.
$('#<%= myctrl.ClientID %>').click();
myctrl is the button. The property ClientID gives the id of the html button. Jquery offers the click function.
That is easy you can use __doPostBack function passing the controll ID that you want the click(command etc) event get fired.
To avoid problems with ID, do something like it:
__doPostBack("<%= yourConrol.UniqueID%>");
EDIT:
There is an existing .Net Framework method Page.GetPostBackEventReference that emits client-side script that initiates postback and also provides a reference to the control that initiated the postback event.
You can either, click a button or submit a form.
So, if you want to click the button,
var button = document.getElementById('<%= btnButtonID.ClientID %>');
if (button) { button.click(); }
or to Post the form
document.forms[0].submit();