I have been trying to figure this out for most of a day, so any help will be very very welcome...
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(function () {
ChangeText("This is the changed text from the document ready function");
});
function ChangeText(newText) {
var editorControl = $("#txtHTMLEditor");
editorControl[0].value = newText;
}
</script>
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div id="divTemp" style="display: block">
<asp:TextBox runat="server" ID="txtHTMLEditor" TextMode="MultiLine" Rows="25" Width="100%" Text="<b>This is test text</b>" /><br />
<ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender1" TargetControlID="txtHTMLEditor" runat="server" DisplaySourceTab="true">
</ajaxToolkit:HtmlEditorExtender>
</div>
<input type="button" onclick="ChangeText('This is the changed text from the button click event'); return false;" value="Perform Change">
</div>
</form>
The above code changes the text in the html editor perfectly in the document ready event, but does nothing if I click the button.
Both events fire the same javascript function (ChangeText()), with the value of the text area being changed in both instances, but the change does not show in the text area in the case of the button click event.
Any ideas why not?
You need to change the text via the HTMLEditorExtender's client side interface:
function ChangeText(newText) {
var editorControl = $find("<%=htmlEditorExtender1.ClientID%>");
editorControl._editableDiv.innerHTML = newText;
}
Location of the HTML contents of the HtmlEditorExtender may have changed over time. This is how I did it in version 7.1005 of the toolkit.
var htmlSource = $('#<%= DescriptionEnglishEditor.ClientID %>Extender_ExtenderContentEditable').html();
$('#<%= DescriptionFrenchEditor.ClientID %>Extender_ExtenderContentEditable').html(htmlSource);
The key is to locate the object in the DOM that is storing the HTML and reference it correctly.
Related
There is a scenario where I need a function like xyz() to be called once a button on page is clicked and page is loaded using javascript/jquery.
I can't call xyz() directly on <Body onload="xyz()"> or inside document.ready() or $(window).on('load', function ()).
I need the function to be called once a button is clicked and page has loaded completely.
Below is working code on page load but not my requirement
<body onload="xyz();">
<form id="form1" runat="server">
<div id="vizContainer" style="width: 800px; height: 700px;">
</div>
</form>
</body>
Now below is my required code on button click and it is not working
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="functiongetdata()" />
<div id="vizContainer" style="width: 800px; height: 700px;">
</div>
</form>
</body>
<script type="text/javascript">
function functiongetdata() {
xyz();
}
</script>
you can use something like this
$(function() {
$('button.start').click(function() {
$('img.lazy').lazy({
bind: "event"
});
});
$('button.loadAll').click(function() {
$('.lazy').lazy({
bind: "event",
delay: 0
});
});
});
Refer this link for clear example
http://jquery.eisbehr.de/lazy/example_load-elements-by-events
Approach 1:
On window load function, update a hidden field or add a flag variable and set true
var myWindowIsLoaded = false
$(window).on('load', function (){
myWindowIsLoaded = true;
});
And then on the button click check the value
function xyz(){
if(myWindowIsLoaded){
// Do your stuff
}
}
Approach 2:
Add the function in the button click event on window load
$(window).on('load', function (){
$("#myButton").click(xyz);
});
I am trying to disable/enable a button of the parent window from the child window.
The following is a snippet from the parent page.
<ajaxToolkit:ModalPopupExtender ID="mpeTest" runat="server"
CancelControlID="btnClose" PopupControlID="pnl1" TargetControlID="showMpe"/>
<asp:Panel ID="pnl1" runat="server" >
<ContentTemplate>
<iframe id="ContentIframe" runat="server">
<p>Your browser does not support iframes.</p>
</iframe>
</ContentTemplate>
<p class="submitButton">
<asp:Button ID="btnClose" runat="server" Text="Close" />
<asp:Button ID="btnTest" runat="server" Text="EnableDisable" />
</p>
</asp:Panel>
In the child page that is loaded in the iframe, I have a grid view with LinkButtons. I am attempting to get one of these LinkButtons to disable/enable the btnTest from the parent window.
I have tried many things but I can't seem to figure this out...
for example:
<script type="text/javascript" >
$(document).ready(function() {
jQuery('[id$="linkButtonDisable"]').click(function() {
window.parent.opener.document.getElementById("btnTest").disabled = true;
});
});
</script>
Can anyone please help me out. I am fairly new to this
Maybe you should try something like this...
$("#<%=linkButtonDisable.ClientID %>").click(function() {
//Option N#1 HTML Attribute
$("#<%=btnTest.ClientID %>").attr("disabled","disabled");
//Option 2 With jQueryMobile integration, the same it supposed to work if your using bootstrap, but I ignore the css class for disabling an element
$("#<%=btnTest.ClientID %>").addClass("ui-disabled");
//Also if you want to toggle states between disable/enable maybe this could work either...
var id = $("#<%=btnTest.ClientID %>");
var state = id.attr("disabled");
//Dunno if it's needed to catch if disabled attr it isn't set
if(state == "disabled") {
id.removeAttr("disabled");
} else {
id.attr("disabled","disabled");
}
});
Hope this help!...
I am working on a ASPX project with .VB in the code behind. The goal is to have two divs hidden when the page loads. Then when the user clicks the "No" radio button it will display the hidden div under it. The Radio buttons are asp List Items.
The code below works but on page load the divs are visible. I'm assuming it is either my VB code or the JS code not hiding on page load.
Here's the VB code behind.
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
For Each li As ListItem In rbPickUpOnTime.Items
If li.Value = "Y" Then
li.Attributes.Add("onclick", "javascript:hidePickup();")
End If
If li.Value = "N" Then
li.Attributes.Add("onclick", "javascript:showPickup();")
End If
Next
For Each li As ListItem In rbDeliveryOnTime.Items
If li.Value = "Y" Then
li.Attributes.Add("onclick", "javascript:hideDelivery();")
End If
If li.Value = "N" Then
li.Attributes.Add("onclick", "javascript:showDelivery();")
End If
Next
Here's the JavaScript:
function hidePickup() {
document.getElementById('pnlPickupNo').style.display = 'none';
};
function showPickup() {
document.getElementById('pnlPickupNo').style.display = 'block';
};
function hideDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'none';
};
function showDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'block';
};
Finally here's one of the ASPX panels it needs to show/hide:
<div class="container" style="margin-top: 20px;">
<div class="centerContainer" style="width: 230px;">
<label class="Emphasis">I can pickup on time </label>
<asp:RadioButtonList ID="rbPickUpOnTime" runat="server"
RepeatDirection="Horizontal"
Style="margin-left: 60px;" TabIndex="2" AutoPostBack="false">
<asp:ListItem Text="Yes" Value="Y" Selected="True" />
<asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>
</div>
<asp:Panel ID="pnlPickupNo" runat="server" >
<div class="centerContainer ui-widget-content" style="width: 230px;">
<label>If No, ETA to pickup </label>
<table style="margin-left: 15px;">
.....
</table>
</div>
Any suggestions?
If you are using .Net 4.0 or higher , you can use the Client ID Mode Static to generate the same ID's in the server side.
If you are not mentioning any thing, then you have use ClientID's instead of directly using ID
For example, if your id is 'pnlPickupNo' , then you can client ID's by using below syntax:
<%# 'pnlPickupNo'.ClientID %>
Hope this helps..
If you don't have to use JavaScript, you could make an OnClick event in your RadioButtonList
OnSelectedIndexChanged="yourBehindCodeFunction"
and make add runat="server" and an ID to all of your div's, then grab the id in the behind code and set visible to false
HTML
div class="centerContainer ui-widget-content" style="width: 230px;" runat="server" ID="test">
Behind-Code
var list = sender as RadioButtonList;
if(list.SelectedValue.Equals("No"))
test.Visible = false;
If you are using JavaScript, you either need to make all of your controls static to use document.getElementById or you could use JQuery and call each by
$('#<%= yourControlId.ClientID %>').hide()
The question was: How do I make the divs hide onload?
This is a work project. I was told to use JavaScript to remove the need for a callback in the code behind.
Here's the simple answer I came up with:
JavaScript:
function hideDiv() {
document.getElementById("pnlPickupNo").style.display = 'none';
document.getElementById("pnlDeliveryNo").style.display = 'none';
};
Markup:
body tag onload="hideDiv()"
As you can see it is a simple pure JavaScript solution. It works and saves me time.
Thanks everyone for your suggestions.
I've designed a web page in asp.net. And in that page i placed html control too like <a> & <div>. I have written one java script function which is hiding the <div> when i'm clicking on the <a> tag. Its working fine. But when i'm clicking on the asp.net button then page refresh occur again. And it is loading my previous design of the page. I set the display:none of the <div> at the design time. so it is hiding my <div> again when occuring any other server side event. And i don't want let it happen.
Javascript function-
<script language="javascript" type="text/javascript">
function toggle5(showHideDiv, switchTag) {
try {
'<%Session["temp"] = "'+more+'"; %>';
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchTag);
if (ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = 'More';
}
else {
ele.style.display = "block";
imageEle.innerHTML = 'Less';
}
}
catch (err) {
alert("Error");
}
}
</script>
html code is-
<div id="divSearch" style="float:left;height:100%;width:100%;">
<span style="float:right;height:27px;"><a id="displayText" href="#" onclick="javascript:toggle5('toggleText', 'displayText');">More</a></span>
</div>
<div id="toggleText" style="display:none;height:100%;width:100%;">
<div id="divCalls" style="width:24%;float:left;height:30%;">
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</div>
</div>
C#.net code of the Checkbox-
protected void chkNoCall_CheckedChanged(object sender, EventArgs e)
{
if (chkNoCall.Checked == true)
{
txtNoCall.Enabled = true;
}
else
{
txtNoCall.Enabled = false;
txtNoCall.Text = "";
}
}
How to solve this problem?
thanks
put this data inside the updatepanel like this
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<span style="float:left;width:100%;color:#3b5998;">
<asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in "
AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
<asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</ContentTemplate>
</asp:UpdatePanel>
hope this help
In your button click event, return false. this will prevent postback.
Use ajax to get the server side data instead of submitting the page.
Try one of the following:
remove runat=server from the component (a component with runat=Server always submits a form.
use standard html controls
use javascript for html controls
it it's a component with autopostback feature; make autopostback=false
In my web page I've a Linkbutton with OnClientClick event as show below.
<asp:LinkButton ID="lnkbtn" Text="Click" runat="server" OnClientClick="dosomething(this.Text)" />
and I've defined the function as shown below in the head section of the web "page
<script type="text/javascript">
function dosomething(ObjCntxt)
{
alert(ObjCntxt.toLocaleString());
var textval = ObjCntxt;
alert(textval.value);
}
</script>
When i run the page and click on the LinkButton i'm getting the message undefined.
I request you all kindly solve my problem.
Thanks & Regards.
This works for me:
<script type="text/javascript" language="javascript">
function doSomething(ObjCntxt) {
alert(ObjCntxt); // Text
alert(ObjCntxt.toLocaleString()); // Text
alert(ObjCntxt.toString()); // Text
alert(ObjCntxt.value); // undefiend
}
</script>
<asp:LinkButton ID="lnkbtn" Text="Click" runat="server" OnClientClick="doSomething(this.text);">Text</asp:LinkButton>
Remember, that the content of doSomething is JavaScript, not .NET, so you should use JavaScript members, such as this.text not this.Text
What do you expect from ObjCntxt.value?? Christmas gift?
Try this One
<script type="text/javascript" language="javascript">
function doSomething(ObjValue) {
alert(ObjValue); // Text
}
</script>
<asp:LinkButton ID="lnkbtn" Text="Click" runat="server" OnClientClick="doSomething(this.value);">Text</asp:LinkButton>