Does anyone know how to create a simple calculator using CEWPs or Form Web Parts on SharePoint 2007? Basically all I need is two fields for input and a submit button which uses the 2 input fields in a function and then gives the answer.
Sounds simple but everything I've tried (using html and javascript) produces an error in SharePoint, even if it works in a normal html page!!
Thanks in advance,
Karl
<HTML>
<HEAD>
<TITLE>Saves Calculator</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function CalculateSaves(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = ((((A * B)/60)/60)/7.33)/19;
}
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
</SCRIPT>
</HEAD>
<BODY>
<P><FONT SIZE="+2">Saves Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>Time in Seconds: <INPUT TYPE=TEXT VALUE="30" NAME="input_A" SIZE=10> Activities: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Calculate Saves" name="AddButton" onClick="CalculateSaves(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="Reset" name="ClearButton" onClick="ClearForm(this.form)"></P>
<P>Saves = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P>
</FORM>
</BODY>
</HTML>
I had the same problem.
Move the html and javascript to a notepad file, save as .html
Upload to document library
Add a Page Viewer webpart to your page, and link it to the html file saved within the library
This should now work.
Related
I am using summernote rich text editor, and I want to edit my posted data(stored in DB). I am sending the value to the text area and inputs but not showing into the text area and showing into the input. kindly share some solutions and suggestions with me. any jquery and js function like this...
here is rendered data to web page
route.get('/edit/:id', async (req, res) =>{
const id = req.params.id
const article = await Article.findById(id)
res.render('editarticle',{article:article})
})
and here is ejs or HTML
<%- include('header'); -%>
<div class="container-9">
<h2>Create Article Here</h2>
<hr>
<form action="/create/blog" method='post'>
<input type="text" name="title" id="" placeholder="Enter Title" value='<%=article.title%>'/>
<input type="text" name="description" id="dics" placeholder="Enter Description" value='<%=article.discription%>'/>
<hr>
<button id='btn-post' type="submit">Post</button>
<textarea name='content' id="body" rows="10" value="<%=article.content%>" ></textarea>
</form>
</div>
<%- include('footer'); -%>
I have solved this problem with help of one line of code. I have got the solution after 2 month
var value = $('#value').val()
console.log(value);
$('textarea#body').summernote('pasteHTML', value);
if want to render the HTML for edit this will work, var value = $('#value').val() it just receiving the value (HTML) from the backend and $('textarea#body').summernote('pasteHTML', value); this line of code pesting the HTML into summernote editor.
#tushar Very useful !!
I use it on summer note as like
Put Content in a div, and set it display none
<div id="contentDumpDiv" style="display:none;">
<?php echo $post['content'] ?>
</div>
then use this javascript code
var value = $('#contentDumpDiv').html();
$('textarea#saContent').summernote('pasteHTML', value);
First, the code:
$(document).ready(function() {
$('#member_pattern').hide();
$('.add-member').click(function() {
var clone = $('#member_pattern').clone(), cont = $('.members-cont');
$(cont).append(clone);
$(cont).find('#member_pattern').show(200, function() {
$(this).attr('id', '');
componentHandler.upgradeAllRegistered();
});
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<div class="members-cont">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label>
</div>
</div>
<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/>
<label class="mdl-textfield__label" for="[name]_[id]">Имя</label>
</div>
Objective:
By pressing a button on the page dynamically insert another field [.mdl-textfield], you want to apply the "material design" on Google
All is good, but the methods
componentHandler.upgradeAllRegistered ();
or
componentHandler.upgradeDom ();
in any does not want to renew, re-emerged, the elements on the page.
I also was having problems cloning an element and getting it to work correctly. What I did was to remove the MDL specific classes from the div and change it to a generic class name that I could select on.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
became
<div class="upgradeTextField">
Then in javascript, after cloning the element, I selected for those divs within the cloned element and added the MDL specific classes to them. After that, running componentHandler.upgradeDom() seemed to work.
var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField');
if(textFieldUpgrades) {
for(var i=0;i<textFieldUpgrades.length;++i) {
textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label';
}
}
componentHandler.upgradeDom();
I haven't verified this, but it seems that when you clone an existing element within the dom that has been upgraded by MDL previously, it won't upgrade it when you add the cloned object to the DOM. So that's why I simply removed the MDL classes so it wouldn't be upgraded beforehand.
Alternatively, if you need it upgraded beforehand and still want to clone it. Then what you can do is to remove the attribute 'data-upgraded' and class 'is-upgraded' from your element after you clone it. Then when you run the componentHandler.upgradeDom() it should upgrade it. So, instead of just setting the class name as in the above snippet, you'd simply remove the upgrade info:
textFieldUpgrades[i].setAttribute('data-upgraded','');
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,'');
This seemed to work for me.
Thanks for the answer, but it turned out to solve it more concise way
var index = $('.member-section').length;
var clone = $('.member-section-pattern').clone();
$(clone)
.removeClass('member-section-pattern')
.find(':not([data-upgraded=""])').attr('data-upgraded', '');
$('.members-cont').append(clone);
$(clone).show(200, function() {
componentHandler.upgradeAllRegistered();
});
Trying to implement Worldpay integration. The docs at https://online.worldpay.com/docs/take-card-details-templates mention a token. I have tested the page and I dont get any token. Wandering how i can get this token.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="payment2.aspx.cs" Inherits="payment2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src= "https://cdn.worldpay.com/v1/worldpay.js">
</script>
<script type='text/javascript'>
window.onload = function () {
Worldpay.setClientKey('T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04');
Worldpay.reusable = false;
Worldpay.useTemplate('payment-form', 'my_payment_section', 'inline');
}
</script>
</head>
<body>
<form action="/complete" id="payment-form" method="post">
<!— all other fields you want to collect, e.g. name
and shipping address -->
<div id='my_payment_section'></div>
<div>
<input type="submit" value="Place Order" />
</div>
</form>
</body>
</html>
When the window.onload executes, it puts the WorldPay card capture form on your page. By the looks of it, you haven't disabled their Save Payment button, so are you trying to use your own submit button?? If you are trying to use your submit button, then you should add the onclick attribute to submit the worldpay template.
<input type="submit" value="Place Order" />
<form action="/complete" id="payment-form" method="post">
<div id="my_payment_section"></div>
<div>
<input id="submitCard" onclick="Worldpay.submitTemplateForm()" value="Confirm Payment" />
</div>
</form>
Once the form submits, worldpay.js takes over, and it will handle the sensitive card information, validate it and if all is ok, it will replace the cardDetails div with a single hidden input field which is the token.
If that all happens correctly, with no errors, after the token input has been placed in the DOM, the form will submit to your action "/complete", and the token will be part of the submitted values of the form.
Hope that helps.
Your script is missing the callback to generate the token in useTemplate()
See: https://developer.worldpay.com/jsonapi/docs/template-form
The callback generates the hidden input with the token value for you which posts to worldpay.
your script should be:
<script type='text/javascript'>
window.onload = function() {
Worldpay.useTemplateForm({
'clientKey':'T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04',
'form':'paymentForm',
'paymentSection':'paymentSection',
'display':'inline',
'reusable':false,
'callback': function(obj) {
if (obj && obj.token) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('paymentForm').appendChild(_el);
document.getElementById('paymentForm').submit();
}
}
});
}
</script>
You also need the onclick="Worldpay.submitTemplateForm()" attribute on your submit too.
I create this code.
Dim msg, sapi
msg=InputBox("Enter your text","Talk it")
Set sapi=CreateObject("sapi.spvoice")
sapi.Speak msg
and now i want to convert this into the website.
how it possible??
Purely speculation (untested as I have currently no access to a suitable environment), but you might be able to do something like accept the text from a form and process it on the server using classic ASP and then the HTML5 <audio> tag for playback:
your form:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="speak.asp" method="get">
<fieldset>
<legend>Enter your text</legend>
<input type="text" placeholder="Enter text..." name="line" ><br>
<input type="submit" value="Talk it" >
</fieldset>
</form>
</body>
</html>
your asp and output HTML:
<%# language="vbscript" %>
<%
Dim msg, sapi, output
msg = Request.QueryString("line")
Set sapi = CreateObject("sapi.spvoice")
' save the speech to file
set output = CreateObject("SAPI.SpFileStream")
output.Format.Type = 8 'SAFT11kHz8BitMono
output.Open "output.wav", 3, false
set sapi.AudioOutputStream = output
sapi.Speak msg
sapi.WaitUntilDone -1
output.Close
%>
<!DOCTYPE html>
<html>
<head></head>
<body>
<audio controls>
<source type="audio/wav" src="output.wav">
</audio>
</body>
</html>
This assumes your web server has the speech API installed, of course.
The including of this code is quite simple. Using the the popular <script> tag for this task:
<html>
<head>
</head>
<body>
<input type="text" name="textinput" size="30">
<script type="text/vbscript">
Sub SpeakIt
Dim msg, sapi
msg= textinput.Value
Set sapi=CreateObject("sapi.spvoice")
sapi.Speak msg
End Sub
</script>
<input type="button" value="speak" onClick="SpeakIt">
</body>
</html>
Take an eye on the mentioned script tag, especially on the additional type attribute.
Keep also in mind, this code will be only executed in very few browsers. One of the most famous is the Internet Explorer.
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});