How to load repeater controls after the page load in asp.net? - c#

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

Related

Refreshing Datagrid to the Parent page on click from the IFRAME page

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();" />

ASP.Net Ajax UpdatePanel to be loaded only after the page is ready

I am using ASP.Net AJAX UpdatePanel to load the right part of the page.
As that part will take some time to load, I would like to load it after the other parts of the page is loaded.
I can use either normal AJAX or ASP.Net AJAX but I chose to use the latter as I want to try it out.
I found out that my UpdatePanel is always loaded.
I want it to be loaded only after the page is ready.
Some says to use the timer, some says to use some javascript.
But I still can't get it done.
So, these are my 2 obstacles, to stop loading when the page starts and to start loading when the page is ready
why don't you enable and disable on page events? for example. try in Page_PreLoad event, set the update panel's enable property to False. While in Page_LoadComplete event, set it back to enabled = true
UpdatePanels use Ajax to update, not on first load.
If you want it to load quickly on first load, avoid any expensive processing, database calls on load. Put them in an
if(IsPostBack)
{
//your long processing
}
Now use an AsyncPostBackTrigger to make your updatePanel postback.
try with this code ( Conditional Mode + Update Method)
<asp:UpdatePanel ID="YourIdPanel" UpdateMode="Conditional" runat="server">
//In order to force loading
YourIdPanel.Update();
<script type="text/javascript">
var currentItemID=$('#<%= labcurrentItemID.ClientID %>').html();
if (currentItemID != null) {
$(document).ready(function () {
$('#main_container').load('/Custom/Going%20Places/PopularRelatedArticle.aspx?currentID=' + currentItemID);
});
}
else {
$(document).ready(function () {
$('#main_container').load('/Custom/Going%20Places/PopularRelatedArticle.aspx?currentID={7F0811A7-D484-4675-8A23-0AEB235B9B5F}');
});
}
</script>

get checkbox click inside updatepanel by jquery

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>

lightbox is not working in updatepanel + c#

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>

How to manually submit a button in asp.net using javascript?

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();

Categories