asp.net jquery change html inside updatePanel - javascript

I've got UpdatePanel with Div
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
<div class="pnlFind" style="display:none;">
</div>
</telerik:RadAjaxPanel>
wanna use js for showing this div
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$('.btAddUser').click(function () {
$('.pnlFind').show('slow');
$('.pnlFind').attr('display', 'block');
return false;
});
}
}
</script>
but after partial postback, I got div invisible again(right! restore DOM) How can I remember that div should be always visible after button click. Thanks

You have to inject javascript into the page to simulate the click event again. Page.RegisterClientScriptBlock or Page.RegisterStartUpScript should do it.

Related

ready function inside the dynamically created usercontrol

how can I run $(document).ready(function () { ....
function inside the user controlI am dynamically load my use control,what I wanan do is that whenthe load usercontrol,register my some javascript function via ready function.
here is the my javascript inside the my usercontroler,
<script language="javascript" type="text/javascript">
//register this script when the page load
var MainFunction;
$(document).ready(function () {
MainFunction = function (Plaka) {
alert(Plaka);
}
});
</script>
and I amtring to call Main function via my button which is the sam place of the ready function inside the usercontroler.
<ext:Button runat="server" ClientIDMode="Static" ID="btnMusteriEkle" Text="Yeni müşteri ekle">
<Listeners>
<Click Handler="MainFunction(#{txtPlaka}.getValue())"> </Click>
</Listeners>
</ext:Button>
I am trying to call MainFunction(#{txtPlaka}.getValue()) like this but not working.I am getting the error MainFunction is not defined.
emmm noone help me??!
here is the solution I found;
inside the user control define this ,
$(document).ready(function () {
$('#btnEkle').click(myFunction); //binding button evet to function on the sam epage
});
secondlly ,define this function inside the main page.
function myFunction(Param1,Param2) {
alert(Param1+''+Param2);
}
I guess this work soemthing like this(Pls correct me if I am wrong).
first load main page with the registered function,
later when the loading user control first time run the
this part;$(document).ready(function () {,later ,this function registerd the button event.
button:
<ext:Button runat="server" ClientIDMode="Static" ID="btnMusteriEkle" Text="Yeni müşteri ekle">
<Listeners>
<Click Handler="myFunction(#{Param1}.getValue(),#{Param2}.getValue()
)"> </Click>
</Listeners>
</ext:Button>
**if u tried this making stupid asp.net button,all pages after fire event render again iu will get the undefine value.
as ext.net button liseners work diffeerent from asp.net button,as it doesnt need render all page again.

jQuery selectable causes full postback in ASP.NET Ajax application

I want my selectable to work as an autopostback control, when something is selected the script clicks on a button and postback the values of the selectable. But it doesnt play to well with my ASP.NET Ajax and UpdatePanels. Sometimes a full postback occurs, and not a partial one.
My conclusions from my debugging is that jQuery does something behind the scene while the stop function runs. If I add an alert to halt the stop function, the partial postback works fine.
To add some more confusion, this works in IE9 and Chrome, but not in IE7 or IE8. So it also might be browser specific.
jQuery version is: v1.6.2
Script:
<script language="javascript">
$('.selectable').live("mouseover", function () {
if (!$(this).data("selectable-init")) {
$(this).data("selectable-init", true);
$(this).selectable({
filter: '.item',
stop: function () {
$("#<% =btnPostback.ClientID %>").click();
}
});
}
});
</script>
HTML:
<div class="selectable">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Literal ID="litIsPostback" runat="server"></asp:Literal>
<asp:Button ID="btnPostback" runat="server" OnClick="btnPostback_OnClick" />
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
protected void btnPostback_OnClick(object sender, EventArgs e)
{
litIsPostback.Text = ScriptManager.GetCurrent(this).IsInAsyncPostBack.ToString();
}
This is the closest to a solution I've come up with.
$('.selectable').selectable({
filter: '.item',
stop: function (event, ui) {
$('.ui-selectable-helper').remove();
setTimeout(function () {
$("#<% =btnPostback.ClientID %>").click();
}, 1);
}
});
By removing the helper (lasso) before the postback, I'm able to drag from top to bottom, but I cant do it the other way. In jQuery the helper is removed after the stop event.
Im not sure why setTimeout works, but it fixes the problem with full postback aswell.

Loading a webform into iframe

In my project I have created a menu list. When I click on a menu item it should load a given page into an iframe on same page. However, it is loading as separate page, not into the iframe. Why is this?
<script language="javascript" type="text/javascript" >
function changeFrm(NewSrc){
document.getElementById('middleiD').src = NewSrc;}
<asp:HyperLink ID="HyperLink6" runat="server" onClick='ChangeFrm("WebUserControl.ascx")'>Calendar</asp:HyperLink>
you need a return false; in your onclick event which tells the original click to stop bubbling
<asp:HyperLink ID="HyperLink6" runat="server" onClick='ChangeFrm("WebUserControl.ascx"); return false;'>Calendar</asp:HyperLink>
well, to stop duping, add that to you function:
function changeFrm(NewSrc){
document.getElementById('middleiD').src = NewSrc;
return false;
}

Problem hiding element when button is clicked

I try to hide the text with a button click, not sure how it is done:..
<script type="text/javascript">
$('.HideButton').click(
function () {
$('#disclaimer').hide();
}
);
</script>
The body:
<p id="disclaimer" > DDDDDDDDDDDDDDDDDDDDDDDDDD</p>
<asp:Button ID="Button1" CssClass="HideButton" runat="server" Text="Hide" />
You need to wrap it in the ready handler, but apart from that it should work:
$(function() {
$('.HideButton').click(function () {
$('#disclaimer').hide();
});
});
(demo - slighty changed in order to overcome ASP dependency.) Do note, that the button may have other side-effects, too, cf. #Zootius' answer.
Your button should not be an asp:Button. Do this instead.
<input type="button" value="Hide" class="HideButton" />
This is because the asp:Button causes a full postback on click (check your page source - it renders as a form-submit button).
Put it in "document.ready"
document.ready(function() {
//Your code here
});
Try:
<script type="text/javascript">
$(document).ready(function(){
$('.HideButton').click(function () {
$('#disclaimer').hide();
});
});
</script>
You need to tell the browser when to add the listener to the button. Usually that is done in the ready function because you want it always as soon as the page is rendered.

running javascript function each MenuItem from Asp:Menu

I want to run an simple javascript function on each MenuItem from an asp:menu.
<asp:Menu ID="_mainMenu" runat="server" ClientIDMode="Static" EnableTheming="False"
StaticBottomSeparatorImageUrl="~/Images/menuSeparator.gif" Orientation="Horizontal"
RenderingMode="Table" OnMenuItemClick="_menu_MenuItemClick" SkipLinkText="">
</asp:Menu>
If I add the attribute on Page_Init _mainMenu.Attributes.Add("onclick", "javascript:jsFunction();") I get onclick event only on a table that describes the menu not on each MenuItem that are links to other pages.
First add css class to the menu:
<asp:Menu ID="_mainMenu" runat="server" CssClass="MyMenu" ...
Then you can use this jQuery code to handle the click event of all links inside:
<script type="text/javascript">
$(function() {
$(".MyMenu a").each(function(index) {
$(this).click(function() {
alert($(this).attr("href"));
return false;
});
});
});
</script>
The above example will show alert with the link href when it's clicked, you can do whatever you want instead. It will also cancel the link, just remove the "return false;" line to have the link redirect as usual.

Categories