i have a .html page
<head>
<title></title>
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 551px;
width: 794px"></iframe>
<br />
<p>
<textarea id="TemplateEditor1" cols="50" rows="15">
</textarea>
</p>
<input id="SaveTemplate" type="button" value="Save" />
</div>
</body>
</html>
and i have a server side page called UploadTemplates.aspx which is the src of iframe and the MARKUP of UploadTemplates.aspx page is
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="TinyMCScripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<p>
<textarea id="TemplateEditor" cols="50" rows="15" runat="server" class="tinymce">
</textarea>
</p>
</div>
</form>
</body>
</html>
now my question is that how can i get vlaue on my html page of Tiny Editor using jquery which is placed on another page called UploadTemplate.aspx please help
If you got two separate pages you will need to do an ajax request to regulary save the editors content and deliver the saved content back on ajax response,
Related
There is my code, but it is not working correctly bootstrap.
i made this code and downloaded all the package from Visual studio, please tell ma solution.
please help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
</div>
</div>
</form>
</body>
</html>
The order of your css and js files is really important here and also more code is required for your date time picker.
I have improved your code a little bit and see if this works for you!
<!--- Date Time Picker Css --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--- Jquery --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--- Your Form --->
<form id="form1" runat="server">
<div class="form-group" style="margin: 50px;">
<div class="row">
<div class="col-md-8">
<label class="control-label">MY Date Time Picker</label>
<!--- Included datetime picker --->
<div class='input-group date' id='datetimepicker12'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
<!-- your own javascript -->
<script type="text/javascript">
$(function() {
$('#datetimepicker12').datetimepicker();
});
</script>
<!-- CDN JS Deliver -->
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<!-- Bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- CDN js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
</script>
I'll be frank, I have little to no experience in asp.net. I've been building a website in Web Forms for a past few weeks. I would like to put a Signature control on a page on this site. I'm using SyncFusion.
I tried to add it to a new web form for testing;
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<%# Register Assembly="Syncfusion.EJ.Web, Version=14.4460.0.15, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ej:Signature ID="Signature1" runat="server"></ej:Signature>
</div>
</form>
</body>
</html>
But all I get is a blank page. What am I doing wrong?
EDIT:
This is the page source in the empty browser;
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./test.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="a7KupFN2IvhJ2xB1RbT9gIJGuq/sSUKCZso7ZYfDhZZR5c9XFfZfctDoaphqu0eXI/FCiapkZDDbKmONWUwSOmQKYeon2OakrX+JCtQ7AzWaYNkS0W6XPn/XQBIl+5gAepOk5prBxAIOUrIv0L7g5r3+LM7yeET8ztjWzCD5ADZ/Vu9CmgE/1wjB9IylHFpocDDNZu4mUru4RbOR0yPzeuhBBdXxMk2Vi7PIUHJ7Dk8cRKdncxSwSsQlUyAZxcl1ZxbUP/vGdOBcxmx2ReO/AS+VvvDZUlfMq8bLkyMc7UJH+Xl+jyxlRCVLkVWIeC5sdMhqPYgnK8MRmlEkba+Nlk2Bipz6IEpvDXw/j+dEUVu/sKoB2O/CJzryw+Hqk27AG67pYTkVs7PRDyFv0+D2it1m023YGbJJX6FxV8GqNeUpPI/kR66jpkZES2RzwWCw3wfdhDocvBTcPGndETFi2Ed1lwbXYeqUXG+ER6kV/PILZSUhj5c74u8QFaKOUtVRMN0mALPkt5VDfmD9CTaKsoHI8H2zBSXPLche+evxHY8dLVJpE5N2MqyT1ETGj+PEPC5hMKaFRyf1KVopBqbPcbmGE+r2bJ/KXwvddQucuIYJPKBNE3gK0ab30ewSHW0fOaums+7P0hN8btfvSQGkFZwfiKerQq8Okpup7DJTB2WE3WFowT7XqYvmoatuqDt80l3VJQovJ3Mg+sJY0lpTg0eikqto6evySKW12tC9tmevkvvnbpoi4fNlmna/rwcO8Nu/wF/ns91CpC2xVHYDsg0x5dYz9vTHRYxJvbbH5WnqtJ5donHgPoM1UqFbDNve" />
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
typeof EJ_ClientSideOnPostBack == 'function' && EJ_ClientSideOnPostBack();
return true;
}
//]]>
</script>
<div>
<div id="Signature1"></div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
</div>
<script type="text/javascript">
//<![CDATA[
$("#Signature1").ejSignature({"strokeWidth":2,"enabled":true,"height":"400px","backgroundColor":"#ffffff","strokeColor":"#000000","clientId":"Signature1","uniqueId":"Signature1"});
//]]>
</script>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"958d69901e2943e493e9b4da9976b691"}
</script>
<script type="text/javascript" src="http://localhost:55500/690a8379ccf649d289724e7760d89595/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Syncfusion Signature doesn't have any default height or width value. It has the both the height and width as 100% by default.It fits inside the given div. Hence we need to set the height value for the signature.
<div>
<ej:Signature ID="Signature1" height="400px" runat="server"></ej:Signature>
</div>
i have created the .aspx in webform in visual studio. but after i have created the htmlcoding in source and then i could not see my form filling page in designer view in visual studio?
below i mentioned the html code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainMaster.master.cs" Inherits="ssweb.Admin.MasterPages.MainMaster" %>
<!DOCTYPE html >
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>Specialed India</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"/>
</head>
<body>
<form >
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
</form>
</body>
</html>
after i analysed well in my code,
then the problem is, if i close the script tag in open tag itself.then i could not get any thing in designer view
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
if i close the script tag like() below , i can view the changes in designer view.
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" ></script>
I have tried to make yahoo rich text editor in my ascx user control but i failed even after taking help from yahoo developers society.
here what i did with it yet.
1) I created ascx user control and paste the text area html code
<div class="yuieditor">
<form method="post" action="#" id="form1">
<textarea id="myEditor" name="editor" rows="20" cols="75">
</textarea>
</form>
</div>
2) I initialized yahoo css and javascript from yahoo for my rich text editor.
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css"/>
<!-- Utility Dependencies -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/2007/10/yui-image-uploader26.js"></script>
<script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('example_editor', {
height: '300px',
width: '522px',
dompath: true,
animate: true
});
yuiImgUploader(myEditor, 'example_editor',
'/wp-content/uploads/2007/12/yui_img_uploader.php', 'image');
myEditor.render();
</script>
but its not working fine :( i am depressed to work with it but i dont want to use any other editor, i only want to use this.
please help.
here is my full code on my ascx.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="yui.ascx.cs" Inherits="YUI.yui" %>
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css"/>
<!-- Utility Dependencies -->
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="/wp-content/uploads/2007/10/yui-image-uploader26.js"></script>
<script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('example_editor', {
height: '300px',
width: '522px',
dompath: true,
animate: true
});
yuiImgUploader(myEditor, 'example_editor',
'/wp-content/uploads/2007/12/yui_img_uploader.php', 'image');
myEditor.render();
</script>
<div class="yuieditor">
<form method="post" action="#" id="form1">
<textarea id="myEditor" name="editor" rows="20" cols="75">
</textarea>
</form>
</div>
please help me out why this is not working.
You are not using correct control id in your code, Try this:
Change
new YAHOO.widget.Editor('example_editor',
to
new YAHOO.widget.Editor('myEditor',
Update your code to use correct id - myEditor in place of example_editor in other part of your code
Also change your code to use yui-skin-sam class and not yuieditor
Ex:
<div class="yui-skin-sam">
Working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.9.0/build/editor/editor-min.js"></script>
<script type="text/javascript">
var myEditor = new YAHOO.widget.Editor('myEditor', {
height: '300px',
width: '522px',
dompath: true,
animate: true
});
myEditor.render();
</script>
</head>
<body>
<div class="yui-skin-sam">
<form method="post" action="#" id="form1">
<textarea id="myEditor" name="editor" rows="20" cols="75">
</textarea>
</form>
</div>
</body>
I'm an html noob and I just wanted to know if it's possible to make a text box in which you could type a website and when you click submit it will load the website in the iframe of your choice.
<html>
<head>
<title> Answer </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
</form>
<iframe src="http://www.google.com" width="100%" height="400" id="dynFrame"></iframe>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function SendMe()
{
document.all.myframe.src = document.forms[0].txtval.value;
}
</script/>
</head>
<body>
<form name="myform">
<input type="text" name="txtval">
<input type="button" value="Go" onclick="javascript:SendMe()">
<br>
<iframe src="http://www.google.com" width="400" height="200" name="myframe"></iframe>
</form>
</body>
</html>