I have two reports: Checklist and Location. Depending on which report is chosen decides the action of the form of what path to take. I also have a select that ask the user whether or not they want to print automatically, preview as a pdf, or open in excel.
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
I am curious of how I am suppose to forward this information in order to do the queries and process the choice the user is requesting. I am sure people do things like this all the time. Would anyone like to share any examples or advice - stepping stones to get me on the right path? Thanks in advance!
Tagged below are all the languages I am using that I could use to achieve this goal.
If you are just trying to send data to a different page, then you can use query parameters for that. One option is to build the query parameters as users update the dropdown:
var select = $('select[name=Format]');
function buildUrl(option) {
return 'some/endpoint?option=' + option;
}
select.change(function() {
var value = $(this).val();
var url = buildUrl(value);
console.log('URL to call:', url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
and then you can use JavaScript or CF to detect the presence (or absence) of the query parameters to meet your app's requirements.
Hope this helps.
I have tried using pdfmake on my reports. It has the option to generate a report with Excel, Print, or download pdf. All you have to do is pass a json array. You can read the documentation on github. Here's the link: PDFMake
This might not be the best answer but it would be a stepping stone for you.
Related
I am new to Angular and Mongo, and am hoping to use Angular js to pull data from a Mongo database to populate a div on a single-page website I'm building. What data is pulled will depend on what option a user selects in a dropdown option on a form. There are a Lot of options out there for Angular, and I was hoping that someone with more experience with it could point me in the right direction. Below are the relevant bits of my code:
<body ng-app="">
<div id='ad'> </div><!-- to be populated with data from MongoDB -->
<select id='climateZone' ng-model="zone" >
<option value="z3">3</option>
<option value="z4">4</option>
<option value="z5">5</option>
<option value="z6">6</option>
<option value="z7">7</option>
<option value="z8">8</option>
<option value="z9">9</option>
<option value="z10">10</option>
</select>
<button id='Go'><h2>Go!</h2></button>
I want it so that when a user selects one of these options, and presses the 'go' button, the 'ad' div will be populated with option-specific information from the database.
I hope that's all clear; any help is appreciated!
As far as I know you can't make HTTP request directly to MongoDB. Instead you need a server-side implementation that communicates with the database for you. If you are using Node for the back-end you can take a look on Mongoose: http://mongoosejs.com/
Mongoose is one of the many libs for MongoDB, you define you models, make queries, post data, and so on. Let's say I want to get the data based on a parameter. At first you need a model for your data:
var Cat = mongoose.model('Cat', { name: String });
Then you can start operating on top of the DB connection. The example bellow should bring you all cats named "Toddy":
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/myDB');
Cat.find({name: 'Toddy'}, function (err, result) {
if (err) return console.error(err);
console.log(result);
});
That said, you can use the ngChange and ngModel directives to put the value of the combo on a variable and react properly when it changes, like so:
<select id='climateZone' ng-model="zone" ng-change="loadData()">
<option value="z3">3</option>
<option value="z4">4</option>
<option value="z5">5</option>
<option value="z6">6</option>
<option value="z7">7</option>
<option value="z8">8</option>
<option value="z9">9</option>
<option value="z10">10</option>
</select>
Being both "zone" and "loadData()" members of your $scope.
How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).
So I am trying to use XMLHTTPRequest to get some information from another page. It will have several <option>s, a variable number of them.
My thoughts were that I could get all of these options, outputted as text, and insert them wholesale into the select menu. Would this be possible? An example of what I want to do:
<select name="culture[]" onSubmit="formValidation()" multiple="multiple" id="cultpicklist"></select>
is the select menu, and then I would do something like this (pseudo-code)
txtobjfromXMLHTTPRequest would be this:
<option value="41" name="culture[]">testculthy</option>
<option value="47" name="culture[]">ereeevvv</option>
<option value="49" name="culture[]">yep</option>
<option value="50" name="culture[]">addanother</option>
txtObj = txtobjfromXMLHTTPRequest //to shorten what I have to write/what you have to read
document.getElementById("cultpicklist").value(txtObj)
Would this work? Am I on the right path? How should I change this?
You should try using .innerHTML:
document.getElementById("cultpicklist").innerHTML = txtObj;
You should however thoroughly test this in all the browsers you support, as there are some cross browser issues with this.
...and here's the fiddle: http://jsfiddle.net/5PGF6/
Hee guys. I have a form with a dropdown for all companies. Now i want to display all the people that work for that company when the user changes the value in the company dropdown box without hitting the submit button on the form. Anybody have a good example for that?
tks
No Ajax necessarily needed, since you can just submit the form, and whether you're sing Django or other server-side choices make no difference, just use something like...:
<form name=companiesForm action="whateverurl" method=POST>
<p>
<select name=companySelect size=1 onChange="companiesForm.submit();">
<option value="" SELECTED>Choose A Company
<option value="1">One Company
<option value="2">Another Company
<option value="3">A Third Company
</select>
</p>
</form>
Alex's answer is a good route to go, but here's an alternative. Django and slugs go together rather well. And unobtrusive javascript with jquery is hip at the moment.
Instead of POSTing a value, you could simply navigate to a well-constructed URL. This has the added benefit of making the pages more SEO friendly, letting people bookmark the page, and also avoiding that silly error about POST'ed information when someone clicks the back button.
Note that in either bit of code, Alex's or mine, the navigation will break if javascript is disabled on the client browser. It'd be a good idea to provide some footer links to whatever this combo box does somewhere on the page (the bottom maybe).
(untested, might need some slight tweaks)
<!-- you'll need jquery to make this work -->
<script type="text/javascript">
$(function() {
// navigate to page on click event
$('#nav_combo').bind('change', function() { goToPage(); } );
});
function goToPage() {
var baseUrl = '/your/base/url/';
window.location.href = baseUrl + $('nav_combo').val()
}
</script>
...
<form>
<select id="nav_combo">
<option value="page-1-slug">Page 1</option>
<option value="page-2-slug">Page 2</option>
</select>
</form>
Edit -- By the way, I should have mentioned you could easily use the code above plugged into django's object_detail generic view.