I'm implementing a project with Next.js and I've been trying to find out the best way I could achieve the following.
I have a page /home that calls an API with getServerSideProps and receives information that is printed to the page in multiple of this components:
function PlaylistItem({playlistName,id,description,background} : { playlistName : string, id : string, description : string, background : string}) {
return (
<a className='flex-col justify-center flex text-center items-center cursor-pointer mb-6' href='/difficulty'>
<div className=' w-[100px] h-[100px] rounded-full' style={{backgroundImage: `url(${background})`,backgroundPosition:"center",backgroundSize:"cover"}}></div>
<p className='mt-2'>{playlistName}</p>
</a>
)
}
export default PlaylistItem
Depending on which of those components the user clicks, I want to pass the props (id, playlistName, etc) to the next page stated in the anchor tag.
I saw that I could achieve that with dynamic routes and passing the values as queries, but is it really the best way I could to this?
The ideal way to accomplish this is by using dynamic routes, also utilise cookies to save and get into the next page if you don't require share url capability for next page.
dynamic routes the only one way to achieve this
Disclaimer- I AM A BEGINNER. If there is not a simple answer here, I will gladly review the correct tutorial, etc. But I've been looking for a couple days and I can't quite get this.
Use Case:
AS A: visitor viewing a Google Site
I WANT TO: fill out a form and select Submit
SO THAT: the information entered will populate an email and be sent to a specific address.
What I've done:
Created emailForm.html:
<html>
<body>
<script>google.script.run.processForm(document.getElementById('myForm'));
</script>
<div>
<form id='myForm'>
Subject:<input name='emailSubject' type='text'>
<br><br>
Body: <textarea name='emailBody' type='text'></textarea>
<br><br>
Add an Attachment: <input name='emailFile' type='file'>
<br>
<input type='button' value="Submit ZD Ticket" onclick='google.script.run.formSubmitReply()'>
</form>
</div>
</body>
</html>
Created sendEmail.gs: (NOTE: Script is incomplete. I have added my comments)
function doGet() { // This function creates the form on the google site for the customer to use
return HtmlService.createHtmlOutputFromFile('emailForm.html')
}
function formSubmitReply() { // This function is ran on the "Submit" button is selected and sends the email
var subject = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getInput('emailSubject')
var body = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getContent('emailBody')
var attachment = // ?? HELP: In a perfect world, it would be as easy as HtmlOuput.getContent('emailFile')
MailApp.sendEmail ('support#support.com', 'subject, body + attachment,
{name:'Support Request'});
}
My Assumptions:
I don't think I need to access any DB and I'm trying to avoid using a Google Spreadsheet. I just want to send the input values straight from the form to an email address.
I read one tutorial that suggested Logging the form values and then call that. But I don't know how to call the appropriate input from the form OR have those inputs added to the email. Sample function from Tutorial:
function processForm(theForm) {
Logger.log( // What goes here?
);
}
THANKS ALL for Any help!
You need to pass the form in to the call from your client code. You can retrieve the form using document.getElementById or simply make use of the fact that the parent of the button is the form, so you can reference it via this.parentNode. Try changing the html like this:
onclick='google.script.run.formSubmitReply( this.parentNode )'
Then in your server code you can use it all:
function formSubmitReply(theForm) {
var subject = theForm.emailSubject;
var body = theForm.emailBody;
var file = theForm.emailFile;
MailApp.sendEmail ('support#support.com', subject, body, {attachments: file});
}
When you have a form, the submission goes to a URL, so here is what you have to do
Modify the form code so that you
Write a doPost(e) method in your apps script code - this is where you will send out the email.
Publish your script as a web app and take the URL and replace the someURL in step 1 with the URL of the web app.
My questions is - how do I add a class or id to the body tag using a text field within Orchard?
So if I enter the word "product" in the text field then the result should be <body class="product">. I want to use this method instead of creating alternate layout templates as every page has the same layout but I need a different class for each page to reference a different colour scheme I have setup for each page in my CSS.
I have added a text field with the name Area to the Title ContentType in the backend. My problem is now how to get the value of the field to be put into the body in the Document.cshtml.
I have read Setting Unique Body Classes and IDs in Orchard and Using Alternatives for Document.cshtml in Orchard CMS but I still can't get it to work! The second one seems like what I want to do but so far I have been unable to acheive it.
Any answer would be very appreciated?
Thanks
Andy
I am so frustrated that there is no readily available solution found in the net about this. Since I am more comfortable coding in jquery & js...
Here's my solution: Assuming you have jquery loaded...
#using(Script.Foot()) {
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
var url = window.location.pathname;
var count = url.match(new RegExp("/", 'g'));
var urlsplit = url.split("/");
var page_class = urlsplit[count.length];
alert(page_class);
$('body').addClass(page_class);
});
//]]>
</script>
}
The easiest way to achieve this is to use the Classy feature from Vandelay.Industries.
I have a <table> in a web page that I populate using JavaScript code like this:
var cellBarcode = row.insertCell(1);
var textNode = document.createTextNode(barcode);
cellBarcode.appendChild(textNode);
var cellItemName = row.insertCell(2);
var textNode = document.createTextNode(itemName);
cellItemName.appendChild(textNode);
I need to save its data to my database... So I need to know how I can submit it to php... Is it possible...? If yes, please provide some sample codes that are easy to understand for a beginner like me... thanks...
Yes, you can submit this information to a server-side script, but not without extra JavaScript code.
The extra JavaScript code would collect the information in the table (either from the DOM you've built, or by accessing the same data you used when building the table) into a string, which can then be sent to the server using one of standard ways.
Since you've used the term "submit", I'm assuming you want to send the table's data as part of an HTML <form> submission, you can put the generated string in an <input type="hidden"> element.
For example, if you type something in upper-right google/yahoo search box in firefox there will be some kind 'suggested auto complete' sort of thing.
Another example is in youtube search box and Stackoverflow tags edit box just below this question preview. How do they work? What technology behind 'em?
What technology behind 'em?
In case you are wondering which data structure is being used underneath then its called "trie" and for using less space compared to tries you can use "DAFSA"
How do they work?
both are implemented as a tree, where each node of tree corresponds to one character in a string and the character which appears before is parent of character which appears later e.g. The strings "tap", "taps", "top", and "tops" stored in a Trie (left) and a DAFSA (right),so as you begin to type tap..the tree is traversed based on the characters typed and shows the suggestions based on some weight assigned to each word, weight may be assigned based on usage frequency of the word.
Looking up string in worst case is O(m) time where m is the length of string.
Image is being referenced from the wikipedia articel : DAFSA,trie
That's done with the use of AJAX, this site has a nice tutorial on it:
AJAX Suggest Tutorial, and the WaybackMachine version, as website seems down.
A database with keywords and a bit of code is all there is to it as far as I know.
I'm learning how to use it right now actually, for work. :)
Another resource is w3schools. They have covered it as well.
They use JavaScript to normally:
Look at a local array of all possible values
Request another page (i.e. /autocomplete.php?q=partialText) in the background.
Call a webservice.
When the JavaScript has the list of entries to show it modifies the page to show the autocomplete box.
If you want to put an autocomplete box on your website I have used and found the following to be very good. It is also based on the popular jQuery framework.
jQuery autocomplete plugin
It's quite simple.
Client side:
Grab keystrokes in form field
On keystroke make an AJAX request to server
If another keystroke is entered immediately, cancel current AJAX request as it is obsolete now
Make a new AJAX requested with updated characters in form field
Show server response to client
Server side:
All words are already bucketed alphabetically
If client request comes in for "ove" find all words starting with ove, ordered by popularity
Return top matches to client
There's an excellent open-source Country selector in the Smashing Magazine article (link below) which includes a discussion of the usability challenges with plain autocomplete solutions, and fixes them.
While I'm UX, not Dev, I'm certain a clever developer could adapt this open-source code to handle other kinds of selections—not just the names of countries. :)
The article that describes the usability issues that this selector resolves.
The demo and open-source download. Try it!
Disclaimer: I have no connection to the folks who made this Country selector. I just happen to know about it, and I like to share information about Usability with developers, FWIW.
There's as many answers to this as there are different implementations of them. Our AutoCompleter which you can see a sample of in Stacked works by raising an event which then is handled in the codebehind of the .ASPX page from which you populate a ControlCollection with whatever controls you wish. We're however in Stacked only using Literal controls with Text content being anchor links. But we could add up checkboxes or images if we wanted to...
If you're on ASP.NET our AutoCompleter is a great place to start. If you're on "something else" then probably ScriptAculous AutoCompleter is another nice place to start...
i also have been recently working on autocomplete feature and we used lucene to index the text to be shown in autocomplete. Searching is fast with lucene. Somethings to look at when working with autocomplete data:
Freshness of suggestions,
Dependency on the long term data,
Regional dependency,
Language dependency
Update 2022
The marked answer is a little outdated. Suggestions autocomplete seems like magic on the surface but really what it is under the hood is
fast asynch communication and
searching through a list of keywords
Send a string to your database then return response in JSON to loop/iterate through. Then repeat as user types.
One good example is done with YELP Fusion.
Below is example with small library autocomplete.js
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(".sbx-custom__input").autocomplete({
source: availableTags
});
});
<!--jqueryui-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<!--autocompletejs-->
<script src="https://cdn.jsdelivr.net/npm/#tarekraafat/autocomplete.js#10.2.6/dist/autoComplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#tarekraafat/autocomplete.js#10.2.6/dist/css/autoComplete.min.css">
<!--input-->
<input class="sbx-custom__input" autocomplete="on" required="required" placeholder="autocomplete...">
here is the simple example from my code(using jquery + jquery ui). first i requested all data with ajax that i prefixed to inbox then i clicked one of them and so it redirects to another action succesfully.
$("#Name").autocomplete({
source: function (request, response) {
var prefix = { Name: request.term};
$.ajax({
url: '#Url.Action("FilterMastersByName", "JsonResult")',
data: JSON.stringify(prefix),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
var abc=i.item.val;
let a = document.createElement('a');
a.href = `/Home/GetMasterById?masterId=${abc}`;
a.click();
},
minLength: 1
});
});
Dont forget setFilterMastersByName action to httppost and GetMasterById to httpget
Here is one for MooTools.