Hobo: is that possible to add cookies to table-plus? - javascript

I am having some trouble with the sorting provided by table-plus feature in hobo. Let's say I have some javascript functions to display different tables:
function showTable1() {
...
}
function showTable2() {
...
}
function showTable3() {
...
}
Event.observer(windows, 'load', showTable1);
and I am using to display the tables. As we can see, Table 1 will be shown by default and every time when I try to sort, let say, Table 2 after displaying it, the page will refresh and then it will automatically switch back to show Table 1.
I am planning to replace the default behavior by a handler:
function showHandler() {
if (case1) showTable1();
else if (case2) showTable2();
else showTable3();
}
Is this possible to implement it by adding cookies to the table-plus behavior? is there any better way to do it?

It's generally easiest if you do everything all server-side or all client-side in a Rails or Hobo app.
So either switch to hobo_data_tables and sort on the client side or do the display toggling server side. To do the latter, you can add forms like this:
<form action="">
<input type="hidden" name="search" value="&params[:search]"/>
<input type="hidden" name="sort" value="&params[:sort]"/>
<input type="hidden" name="page" value="&params[:page]"/>
<input type="hidden" name="table" value="2"/>
<submit label="Show page 2"/>
</form>
Then put if statements around each table:
<if test="&params[:table].to_i==2">
<h2> table 2 </h2>
<table-plus .../>
</if>
I also recommend posting to hobo-users -- there's a much more active community there.

Related

Radio option on view that updates and changes view?

I think that my problem isn't very hard -but I'm pretty new to this and having issues finding an easy solution.
I have a form that collects a few items, and an output page that creates a table based on those few items. For example, one of the form options is "Which leg is affected?" And you must choose either "Left, Right, Both".
I would like to create a radio selection option on the view so that the person using this tool won't have to click the back button to update this one field. The table that is built changes based on this one selection, so it would be nice to see those changes without resubmitting the form.
If anyone can point me in the right direction - either JavaScript or some method that involves re-sending the form values from the view - I would be very grateful.
I believe what you're describing is exactly what the idea of "single page app" style coding with Javascript is for - modifying the page with logic without necessarily needing to make a server request. I.e., you want to make an "application." Albeit a simple one.
What I recommend you look into is "event handlers," specifically the click handler.
So, if you had html that looked like: (stolen from MDN's radio page)
<form id="radio_form">
<p>Please select your preferred contact method:</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
</form>
You could then have code that looked like
var radio = document.getElementById('radio_form');
radio.onclick = changeTable;
function changeTable(e){
// Do logic here to change table
}
The idea is your page is "waiting" for the form to be "clicked" (you could also look into onChange), and when it is clicked, a function is invoked that does further logic.
See here to figure out how to get the value of a selected radio.
See here for using javascript to insert a row into a table (what you may want to do in your changeTable function).
EDIT: One "gotcha" to look out for is if your script is running when the page is actually loaded. This can be a problem if your page loads asynchronously (doubtful). Just in case, also look into some kind of document.ready implementation: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it
You can add an event listener for 'click' to each radio input and have the callback function modify the view in whatever way you want.
Here's an example:
const form = document.querySelector('.choice-form');
const display = document.querySelector('.display');
form.querySelectorAll('input[type="radio"]').forEach(input => {
input.addEventListener('click', () => {
display.innerHTML = "";
if (input.id === '1') {
display.innerHTML = "<span>You selected: <span class='red'>One</span></span>";
} else if (input.id === '2') {
display.innerHTML = "<span>You selected: <span class='blue'>Two</span></span>";
}
});
});
.red {
color: red;
}
.blue {
color: blue;
}
<div>
<form class='choice-form'>
<label for='choice'>Make a choice</label>
<input type='radio' id='1' name='choice'/>
<label for='1'>One</label>
<input type='radio' id='2' name='choice'/>
<label for='2'>Two</label>
</form>
<div class='display'>
</div>
</div>

Form TextArea Losing Linebreaks

I am trying to repair an existing web form that submits a text area's contents to an external site's shopping cart service. The textarea is named "adtext" and upon submission it runs a few different scripts to calculate pricing, etc. It ultimately re-writes the ad content into a value named op31 (which is recognized by the shopping cart). The cart system recently got updated and it broke our script to convert line breaks in this text area into something that would be retained in that other site. I've tried looking at other sites, but it's over my head. I'm not particularly good at this stuff. I'm sure this isn't, and likely wasn't the best way to do it. I've seen CSS suggestions but don't understand it enough to actually implement them.
I've stripped out as much code as I comfortably could to clean it up, but still retain the issue. I'm wondering if someone could assist me with updating this function into something that would convert the "adtext" textarea's line breaks into something usable when written to "op31".
<script language="JavaScript" type="text/JavaScript">
function ConvertCarriageReturns(textarea, strReplace){
document.form.op31.value = escape(textarea.value)
for(i=0;i<document.form.op31.value.length;i++){
if(document.form.op31.value.indexOf("%0D%0A") > -1 ){
document.form.op31.value = document.form.op31.value.replace("%0D%0A",strReplace)
}
}
document.form.op31.value = unescape(document.form.op31.value)}
</script>
<form
action="https://(cart's url)/addtocart.aspx"
method="post"
name="form">
<textarea name="adtext" rows="12"></textarea>
<input alt="Add To Cart" name="add"
onclick="ConvertCarriageReturns(this.form.adtext,'<br>');
return checkwords(this)" src="https://....Add-To-Cart.gif"
type="image" />
<input name="item" type="hidden" value="(misc cart parameters" />
<input name="op31" readonly="readonly" type="hidden" />
</form>
You can use this native PHP function called nl2br
Like this:
$text = nl2br(this.form.adtext);

the same block of elements visible one at a time and veriable naming

I have some code for mobile and a desktop version. All the elements in the FORM are the same, but the block of code is visible one at a time depends on the screen size (one is always set to display: none),
<div id="desktop">
<div id="content">
<form method="post" name="form_name" id="id_form">
<input type="email" name="name_email" id="id_email">
<input type="hidden" name="hidden_input" value="submit_sub">
SAVE
</form>
</div>
</div>
<div id="mobile">
<div id="content">
<form method="post" name="form_name" id="id_form">
<input type="email" name="name_email" id="id_email">
<input type="hidden" name="hidden_input" value="submit_sub">
SAVE
</form>
</div>
</div>
//some JQ code
$("#btnSub").click(function(e) {
e.preventDefault();
if ($("#id_email").val() == "") {}
});
//some PHP code
if (isset($_POST["hidden_input"]) == "submit_sub") {}
The above code looks the same for both desktop and mobile but in real all the elements are in different set up for mobile and desktop. My question is: can I use the same naming for IDs, NAMEs, or should I separate even if there are visible one at a time? If no do I have to change everywhere like different IDs or change for class, where I can leave the same naming? The best would be to rewrite the above example with the correct naming.
The reason I'm writing this question is that I've already written some code and have trouble to run it correctly, I don't know if I should change everything or the are some few things that should be only different. So, I'd like to know the main rules.
As they are in different forms, you can use the same names to send the data, but you shouldn't use the same names if you need them in your JS code, try with classes.
IDs are unique to the page, use classes instead.
:)

Passing forms between html pages

I've got an assignment to pass data between 2 .htm pages, in a manner which the source gets copied to the destination.
sourcePage.htm contains a form. (it contains more controls this is just a sample)
<form id="myform" action="destPage.htm" method="get" >
<input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
and destPage.htm is blank.
Using JavaScript I am required to parse the data from the url, that part isn't the problem
, the problem is that I am also required that destPage would be an exact duplicate of sourcePage.
My question is, if there's a way to pass the form as an object or some way to pass the control types and their properties along side the data.
You specified in the answer of ek_ny, that you want to dynamically build the form, based on it's input.
You can do this, in fact, with the JavaScript DOM:
var i = document.createElement('input');
i.setAttribute('type', "text");
i.setAttribute('name', "user");
var f = document.createElement('form');
f.setAttribute('action', "destpage.html");
// etc.
f.appendChild(i);
document.getElementById('container').appendChild(f);
The form will be added as a child in the <div id="container"> container.
Now you can use hidden input elements, which give, for instance, the specifics of the form:
<form>
<input type="hidden" name="x_type" value="input-text" />
<input name="x" type="text" />
<input type="hidden" name="y_type" value="select:[...]" />
<select name="y">
...
</select>
</form>
As far as I know, you won't be able to do a post between two pages. At least when I've attempted that you get an error-- it really doesn't make sense to have a post from one static page to the other (right?). What you can do is serialize the data you want to pass, put it on the url string to the next page and then deserialize that data and populate the controls on the destination page. If the html between the two pages is identical, then it should be pretty straightforward, if not it will be a little tricker. If you used jQuery it would be pretty easy, because you could serialize an entire form. If you need to come up with a generic solution (and you should, because it will help you learn) that's one thing, if you need to just get it working for this assignment and there are only a couple of form fields, you'll just need to encode the values you want to pass and pass them on a URL string with a get request.

How to create JavaScript form & User specific action?

I want to create a pop-up or Javascript item that allows users to accept the terms of completing an offer for me. Once they have accepted the terms, I would like that offer that they agreed to do to go under the account in a section or tabled labeled "Offers".
Please advise on how to code this.
You can use javascripts confirm. It will create a dialogue which will allow a user to press "Ok" or "Cancel". You can implement the following:
<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Do you agree to the terms of Service?")
if (answer){
window.location = "http://yoursite.com/offers.html";
}
else{
alert("You must agree to continue")
}
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Continue">
</form>
</body>
</html>
If you want this dialogue to appear when the page loads you can put onLoad="confirmation()" in the body tag. And alternative to a javascript confirmation box would be something along the lines of the following, I know some people really don't like popups and confirmations:
<input type="button" onclick="window.location='http://yoursite.com/offers.html';" value="Agree">
<input type="button" onclick="alert('You must agree to the terms of service');" value="Disagree">
Instead of an intrusive pop-up, why not have a checkbox that the user has to check in order to continue? If the checkbox isn't checked, then the form either won't submit or an error message could appear, telling the user (s)he didn't accept the terms.
Unless there's a specific reason you need to use JavaScript, I would try to stay away from JavaScript for functionality like this, especially considering that users can just turn JavaScript off.
For example (using JavaScript to prevent the form from submitting):
<form name="offerForm" action="/offer" method="post" onsubmit="return this.elements['agreeTerms'].checked;">
<!-- the rest of your form goes here -->
<input type="checkbox" name="agreeTerms" id="agreeTerms" value="1" /> <label for="agreeTerms">I agree to the terms.</label><br />
<input type="submit" value="Submit Offer Form" />
</form>
On the server side, I'm assuming you have a relational database behind everything. Let's say you have a users table, an offers table, and a users_offers bridge table to denote which users have accepted which offers.
Using the example above, you would only add a new record to the users_offers bridge table if agreeTerms came back with a value of "1". If the checkbox isn't checked, then agreeTerms won't have a value.
If you could edit your question with specifics concerning your situation (server-side language you use, basic database table information, etc.), I'll be able to fill in some more details.

Categories