I am new to ColdFusion but I received a project to create a web app.
I am stuck at making multiple cfwindow's. I have a page that displays all upcoming training classes (called page A). It allows an admin to click on a link to open a window and view all students registered for that class (called page B). In page B, I would like to have a link under each students name. When the instructor clicks on it, he can open another cfwindow containing a form for entering payment information. ie Check number sent by the student.
Here is what I've got so far:
Page A:
<script type="text/javascript">
function viewList(id)
{
try {
ColdFusion.Window.destroy('view', true);
}catch(e) {}
ColdFusion.Window.create('view','Registration List', 'registration_list.cfm?id=' + id, {center:true, width:300, height:100, model:true});
}
</script>
<!---output trainingid with a given query name--->
<cfoutput query="myqueryname">
<tr>
<td colspan="3" align="center">View Registration List</td>
</tr>
</cfoutput>
<cfajaximport tags = "cfwindow">
<cfajaximport tags = "cfform">
Page B:
<script type="text/javascript">
function showDetail(detailid)
{
try {
ColdFusion.Window.destroy('viewFull', true);
}catch(e) {}
ColdFusion.Window.create('viewFull','Detail List', 'detail_form.cfm', {center:true, width:300, height:100, modal:false});
}
</script>
<cfoutput query="viewregistration">
First Name:#viewregistration.FirstName#<br />
Last Name: #viewregistration.LastName#<br />
Email: #viewregistration.Email# <br />
County: #viewregistration.Name#<br />
View
</cfoutput>
<cfajaximport tags = "cfwindow">
<cfajaximport tags = "cfform">
When I test my page and click on "View", nothing shows up. However, when I change onclick to display an alert(), it does work. Any idea how to solve this?
Related
I am currently working within SharePoint 2013 and was wondering if there was a way to create a button on a home page that when pressed, opens a list form in a modal window? (or in a non modal window).
I understand the method of using "Embed code" to code a button; however, it doesn't seem to allow me to link it to a list form, or edit what the button actually does.
Example:
1. An employee lands on the home page and wants to initiate a Purchase Request through the company.
2. The employee clicks on a button labeled "Click here to submit a Purchase Request".
3. After clicking, the Purchase Request form opens from the Purchase Request list (pre-created).
Thank you for your assistance!
You can use something like this in a CEWP to redirect to the new item form:
<button onclick="formRedirect(); return false;">New Form</button>
<script>
function formRedirect() {
window.location = "/test/Lists/LinkList/NewForm.aspx"
}
</script>
To display it in Modal form you will need to use the NewItem2 JS function:
<button onclick="NewItem2(event, "https://Your.SP.Site/_layouts/15/listform.aspx?PageType=8&ListId=%7B59E6FE0C%2D02C6%2D4B00%2D9B6A%2D87116A2DF594%7D&RootFolder="); return false;">New Form</button>
To get this to work you will need the list web part on the page where the button is located, though it can be hidden from view by setting th chrome to none and minimizing it. You can copy the function from the new item button in the list you wish to display, it is stored as an 'OnClick' property.
I know I am late to this but I just figured how to do this for the "Upload Document" for a document library. It took me a while but I stumbled upon it through trial and error using F12. I will provide both script for a "LIST and LIBRARY" form.
FOR A LIST:
<a href="#" onclick="openDialog('YourSiteURL/Lists/YourListName/NewForm.aspx');">
<img src="YourSiteImageURL" alt="NameofYourImage">
</a>
<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'NameofYourForm', /* Enter the name you want for your form */
allowMaximize: false,
showClose: true,
width: 1225, /* Modify for your needs */
height: 800 /* Modify for your needs */
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
FOR A LIBRARY:
This is for use with a button:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">
<img src="URLforYourButtonImage" alt="NameofYourButton">
</a>
This is for use with text:
<a class="ms-addnew" id="idHomePageNewDocument" onclick='NewItem2(event, "YourSiteURL/_layouts/15/Upload.aspx?List={YourListID}&RootFolder="); return false;' href="YourSiteURL/_layouts/15/Upload.aspx?List={SameListID}&RootFolder=" target="_self" data-viewctr="702">Add document
</a>
We have Sitecore SPEAK page which have set of textboxes, radio buttons and combo boxes. We need to automatically fill or autocomplete those fields when the user enter some value to a specific field (lastname).
Does anyone knows how we can do this with Sitecore SPEAK?
What we have tried already:
We have a cshtml file which display the search records which placed inside the SPEAK page under a User lookup section.
When the user enter some value to lastname field, we retrieve data from the database and display it.
this.on("change:input", this.users, this); // defined in the initialize method
//User function to load records
users: function () {
var input = this.get("input");
$.ajax({
url: "/api/sitecore/Order/FindUsers",
type: "POST",
data: { input: input },
context: this,
success: function (data) {
this.set("output", data);
}
});
}
//CSHTML code
#using Sitecore.Mvc
#using Sitecore.Mvc.Presentation
#using Sitecore.Web.UI.Controls.Common.UserControls
#model RenderingModel
#{
var rendering = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
rendering.Class = "sc-UserList";
rendering.Requires.Script("client", "UserSearch1.js");
rendering.GetString("input", "input");
var htmlAttributes = rendering.HtmlAttributes;
}
<div #htmlAttributes >
<p id="eventTitle"></p>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody data-bind="foreach: output">
<tr>
<td><a data-bind="text: FirstName, click: function (data) { loadData('data-sc-id'); } "></td>
<td data-bind="text: LastName"></td>
</tr>
</tbody>
</table>
<script>
function loadData(attribute) {
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
if (allElements[i].getAttribute(attribute) !== null) {
if (allElements[i].accessKey == 'newitem1') {
allElements[i].innerHTML = "testtt";
allElements[i].innerText = "testtt";
}
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}
</script>
</div>
Once the user click on particular record in the User lookup section, we need to fill or autocomplete the rest of the fields in that page with the retrieved values but we were not able to do so.
Since we don't have a specific id to capture and set the value, we have set an accessKey and located the control we want but when we set the innerHTML or innerText it does not reflect.
So any one knows how we can do autocomplete with sitecore SPEAK?
Quite a broad question, but looking at the docs and in the Business Component Library, AdvancedComboBox might be suitable.
https://doc.sitecore.net/speak/components/advancedcombobox
This has the ability to search for items as the user is typing in the combobox.
I'm making my first webapp using python and flask, it is a simple calculator but I'm currently stuck trying to use more than one button. At the beginning it was abe just to show a graph, here is the python code:
class FormulaForm(Form):
formula = StringField('formula')
graph = SubmitField('graph')
#app.route('/')
def calculate():
form = FormulaForm()
formula = request.args.get('formula','')
points = mp.make_points(formula,0,7)
comp = make_plot(points[0],points[1])
return render_template('index.html',the_script=comp[0],the_div=comp[1],form=form)
And here is the html code:
<form method="GET" action="">
<br />
{{ form.formula }}
<br />
{{ form.graph }}
</form>
So far so good. But I don't know how to add more functionality, for example I would like to add a button that shows the formula evaluated at some value x. I tried adding an extra inputfield and an extra button in the form, something like this:
class FormFormula(Form):
formula = StringField('formula')
graph = SubmitField('graph')
evaluate = StringField('evaluate_at')
evaluate = SubmitField('evaluate')
But then I don't know how to make the view handle two different actions.
I think I found a solution here but it only works when the method is "POST" and that makes the page reload which I don't want. So, is there a way to use multiple buttons in the same view?
#app.route('/start' ,methods=['POST'])
def stop():
"process done here"
return Something
Your app.py like this and and html file this
<script src="static/js/ajax.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#start").click(function(event){
$.post(
"/start",
function(data) {
window.alert(data);
}
);
});
});
</script>
<button id ="start" type="button" value = "Load Data">Start</button>
I'm using Ember CLI and have noticed odd behaviour. When the user clicks into the input and presses the enter key, the page refreshes.
My page has a basic element like this that is NOT part of any form:
<input type="text" class="form-control" id="per_page" value="50">
I am currently serving the page via:
ember cli
So node is hosting and has the fancy live reload thing going on so that when I update a page that is part of the underlying app.
So what is causing a page reload the enter key pressed inside an input? Could it be node or live reload? Are inputs just supposed to refresh a page when a user presses the enter key and I missed that in my HTML for dummies book?
**Better still, how can I intercept and instead call a function via:
{{action** "myFunction"}}
That happens because when you hit Enter, form gets submitted which results in page reload. what you need to do is set onsubmit="return false" on the form so nothing happens during submit. you can bind input to execute some action by adding action attribute action="doSomething"
<form onsubmit="return false">
{{input type="text" action="createComment" value=topic id="inputTopic"}}
</form>
Edit: In Ember 3+ you now use the {{on}} modifier to setup events on elements.
<form {{on 'submit' this.submitForm}}>
<!-- the rest of your form here -->
<button type='submit'>Submit</button>
</form>
And the action defined like so
#action
submitForm(event) {
event.preventDefault();
// Your code
}
Historically Ember has handled this use case with the following code:
<form {{action 'submitForm' on='submit'}}>
<!-- the rest of your form here -->
<button type='submit'>Submit</button>
</form>
This prevents the form from refreshing the page.
There is another method that gives you more control, by giving you the event so you can manage that yourself:
<form onsubmit={{action 'submitForm'}}>
<!-- the rest of your form here -->
<button type='submit'>Submit</button>
</form>
In this case, you will get an event and will have to call event.preventDefault() to stop the page refresh.
actions: {
submitForm(event) {
event.preventDefault();
}
}
This is a running example of the two: https://ember-twiddle.com/827820958e054f7af57b7677630729fc?openFiles=controllers.application.js%2C
I had the same problem - what worked for me, was to overwrite the keyPress Event in the input component like this:
keyPress: function (e) {
var keyCodeEnter = 13;
if (e.keyCode === keyCodeEnter) {
return false;
}
}
Hope it will help someone in the future! :)
The input field should be empty on page load.
When the user clicks the 'Edit Post' then I call KO click and 'select' function (all working) .. when I do this call the row selected is bound correctly.
Current code automatically binds on page load so the first record is in the input field.
<div data-bind="with: Selected">
<input type="text" data-bind="value: Name" />
</div>
<i title="Edit Post" data-bind="click: $parent.select"></i>
Example hack
<div data-bind="if **click: $parent.select then** with: Selected">
<input type="text" data-bind="value: Name" />
</div>
<i title="Edit Post" data-bind="click: $parent.select"></i>
How do I write a data-bind if 'click' then do 'with: Select' ?
Update
Add example code: http://jsfiddle.net/uC8Vt/70/
Generally you would just want this to work off of the Selected observable. If it is not populated, then it won't render the area. If it is pooulated, then whatever object that Selected holds will be used.
So, when you call $parent.select you would want to populate Selected with your object.
In fact, observables are functions, so unless you need to run other logic, you can even take a shortcut and bind your click directly against the Selected observable. The current data is passed as the first argument, which sets the value of the observable.
You would change the Selected property depending on the item clicked...
So an example viewModel might be like...
var items = [{ Name: 'item1' }, { Name: 'item2' }];
var viewModel = {
items: items,
Selected: ko.observable(items[0])
}
viewModel.select = function(selectedItem) {
// The first arg is the context of the item clicked
// Selected in an observable
viewModel.Selected(selectedItem);
};
Then, as Selected changes... your Name binding will automatically update.