I am using a tinyMCE with asp.net webforms.
It works fine with html textarea but I don't want that. I want to integrate it with asp:textbox but it doesn't work with that.
I have changed mode to multiline, provided columns and rows but nothing works with it.
Help please.
Code:
<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#txtBoxBody'
});
</script>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">
Body
</label>
<asp:TextBox runat="server" ID="txtBoxBody" TextMode="MultiLine" CssClass="form-control"></asp:TextBox>
</div>
Update: Textarea works fine but if i put runat="server" attribute in it then it stops working too.
Because the ID of the rendered TextBox isn't txtBoxBody if you view the page source you'll see it's something like Body_txtBoxBody depending on the structure of your code.
To get it to work you need to do something like this:
<script>
tinymce.init({
selector: '#<%=txtBoxBody.ClientID%>'
});
</script>
Alternate of #hugo's answer:
<asp:TextBox ClientIDMode="Static" runat="server" ID="TB" Enabled="true"></asp:TextBox>
<script>
tinymce.init({
selector: '#TB',
});
</script>
Related
I'm replacing a classic asp website with asp.net, c# code behind. Need to be HTML5 compliant, so I replaced the existing Frameset page with a similar page using the HTML object data Attribute. There are 4 URLS that make up this page. Using Frameset, you could update one of the URLs without refreshing the entire page using target="parent.name of frame". The 3 frames would be unchanged while the 4th frame would be an entirely new URL. Is there a similar way to update a URL in the object page ? If not, is there an alternative to Framesets and Iframes that is HTML5 compliant and will let you update dynamically ?
<div id="header" class="header">
<object data="https://localhost:44365/HEADER.aspx" type="text/html" width="100%" height="100%"> </object>
</div>
<div id="main" class="row">
<div id="column2" class="column left">
<div id="left_top" class="left_top">
<object data="https://localhost:44365/MainMenu.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="left_bottom" class="left_bottom">
<object data="https://localhost:44365/RevTable.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
<div id="column1" class="column right">
<object data="https://localhost:44365/MAIN.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
Sorry, I'm typing this off the top of my head, and I haven't tried the code. But you should be able to load the content using jQuery Ajax. This will be the basics of it. How and where you want to script to be called, and with what variables will have to change to suits your needs.
<script>
function getContent(url, target){
$.ajax({
type: "POST",
url: url,
success: function(response) {
$(target).html(response);
}
});
}
</script>
<div onClick="getContent('https://localhost:44365/HEADER.aspx','#header')">Click me to load header.</div>
<div onClick="getContent('https://localhost:44365/NEWURL.aspx','#left_bottom')">Click me to load the left bottom div with a new URL.</div>
I have looked at other questions and answers and still cant seem to solve my issue.
I am using jQuery UI tabs with 3 tabs: Basic Info, Payment, Confirmation
What I want to do is pass the values on the basic information tab textbox's, and payment tab into a label that is on the confirmation tab
ASPX:
<ul>
<li>Basic Information</li>
<li>Payment Information</li>
<li>Confirmation</li>
</ul>
<div id="tabs-1">
<asp:Label runat="server" ID="lblFirstName" Text="First Name" />
<asp:TextBox runat="server" ID="tbFirstName" AutoPostBack="true"/>
<asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" />
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
<asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
<asp:Label runat="server" ID="lblConfirmFirst" />
</div>
</div>
Script in head:
$("#btnContinue").click(function () {
$("#lblConfirmFirst").html($("#tbFirstName.").val());
});
The next tab function works fine, and the values retain in the textbox when the next tab is selected, however it wont pass to the label on the 3rd tab.
I think the problem is asp.net rename your server controls if the page has a master page.
add the attribute: ClientIDMode="Static" to your asp controls.
As you are using the ASP.NET controls, the ID will get changed while rendered. Use the jQuery Ends With selector for selecting the elements.
Use jQuery text method for ASP.NET Labels (i.e. html span), and jQuery val method for ASP.NET Toolboxes (i.e. html input).
Also, as the button is ASP.NET button, it gets post back every time you clickit, so use return false; at the end of button click method.
You have a AutoPostBack="true" for textbox, which might also create problem by resetting the label text while post back.
Below code will work if AutoPostBack="true" is removed from textbox.
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
$("input[id$=btnContinue]").click(function () {
$("span[id$=lblConfirmFirst]").text($("input[id$=tbFirstName]").val());
return false;
});
});
I want to make my div block draggable and it works but if I use the runat="server" Attribute for my div block that I can use the visible="false" Attribute than I don't can use the draggable.
Here my Code:
<script>
$(function () {
$("#draggablebox").draggable();
});
</script>
<div class="create_box" id="draggablebox" runat="server" visible="false">
...
</div>
What can I do this in ASP.Net?
If you use runat="server" visible="false", then that's a server-side attribute, and the element won't get sent to the client at all. Try using style="display: none;" instead -- this renders the div to the client but makes it hidden.
Note that runat="server" doesn't do anything by itself. <div runat="server"></div> sends the same thing back to the client as <div></div>. It's once you start adding server attributes along with runat="server" that ASP.Net starts modifying what gets rendered (including rendering nothing at all in the case of visible="false").
Although display:none doesn't show the element in the browser, it still outputs the HTML to the browser and relies on browser rendering to choose whether to show the element. This can cause the element to 'flicker' on screen if there's a delay between the page being loaded and the CSS being applied.
In answer to the original question, how can you apply draggable to the element if you're using runat...
Option 1:
You can set draggable server-side:
draggable.Attributes["draggable"] = "true"
This will output (from your example):
<div class="create_box" id="draggablebox" runat="server" visible="false" draggable="true">
...
</div>
Making the element draggable in HTML5 - the same as the jQuery option is doing.
Option 2:
Set through jQuery using a different selector.
You're currently selecting based on the ID, but as your control is a server-side control, it's ID as you've set, isn't what it output to the browser - the ID has become it's server-side control ID.
You could give your control a CSS class and use this to select your element instead:
<script>
$(function () {
$(".draggablebox").draggable();
});
</script>
<div class="create_box" id="draggablebox" class="draggablebox" runat="server" visible="false">
...
</div>
Option 3: Specify the correct ID in the client-side script
In the ASPX page you can modify the output javascript to use the correct 'ClientID'. See below:
<script>
$(function () {
$('<%= draggablebox.ClientID %>').draggable();
});
</script>
<div class="create_box" id="draggablebox" class="draggablebox" runat="server" visible="false">
...
</div>
I hope this helps!
Kurt
I am using datapicker jquery but it is not able to get Input Id in C#.If i give runat=server ,i can call the input id in c#,but it does not work in page. Can anyone help me for that, I am new to Dnn. Any answer would be appreciated. Thank you.
enter code here
<div class="demo">
<p>Date: <input id="datepicker" type="text" />
</p>
</div>
Use TextBox with DatePicker
<asp:TextBox ruat="server" ID="txtDate" ></asp:TextBox>
To access it use ClientID
<script type="text/javascript">
$(function() {
$("#<%= txtDate.ClientID %>").datepicker();
});
</script>
EDIT: Based on the comments
After defining your txtDate in aspx page with runat="server" you can access it in code behind like:
string value = txtDate.Text;
yep because when you add runat server the id get renamed by asp try using somethink like this
setting the client id mode static if you are using .net 4.0
or if you do not use .net 4.0 then try this
<p>Date: <input id="datepicker" ClientIDMode="Static type="text" runat="server" />
or if you do not use .net 4.0 then try this
$("#<%= datepicker.ClientID %>").datepicker();
You can use CssClass of textbox to get datepicker in following way:
<asp:TextBox ID="txtDate" runat="server" CssClass="DatepickerInput" />
You can use jquery code in following way:
$(document).ready(function () {
$(".DatepickerInput").datepicker({ dateFormat: 'dd/mm/yy' });
});
Im using asp.net/c# weborms. I've added recaptcha to the form and used what is on their site. It needs a custom look hence it's like this:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div>Get another CAPTCHA</div>
<div class="recaptcha_only_if_image">Get an audio CAPTCHA</div>
<div class="recaptcha_only_if_audio">Get an image CAPTCHA</div>
<div>Help</div>
</div>
<script type="text/javascript"
src="http://api.recaptcha.net/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
what do i need to do in the button_click method in the code behind iof the form to check if the words eneterd by the user is correct. same for audio.
Thanks
Why don't you use the control that is delivered with reCaptcha? Here is the control and a quickstart.
reCaptcha Quickstart & Control
Like other validations you just need to check if(Page.IsValid) in behind code. just note that you have to add recaptcha control in your code and then add your customs them.
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" PublicKey="your_public_key"
PrivateKey="Your_private_key" Theme="custom" />
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
...