Comment box appear on clicking link - javascript

I'm extremely new to front end web development, and I was wondering if there is anyway I can have a small text box appear on clicking a link, which disappears when I submit the form. (I want something like what Facebook has currently for the birthday wishes, where you click on the persons name, a small comment box opens up 'on top', and lets u post a wish on the persons wall from the main page itself).
Sorry if this is a stupid question.

The best will be to use a framework like jQuery Dialog UI. The documentation is big and there are a lot of samples available.
For instance, create a div element with your input text and bound his creation to the button you want:
HTML
<div id="dialog">
<input type="text" />
</div>
Open dialog
Javascript
$(function () {
$("#dialog").dialog({ autoOpen: false });
$('a').click(function () {
$("#dialog").dialog('open');
});
});

The other answerer is assuming you're using jQuery. If that's true, I would look at jqModal. It's much slimmer and simpler than jQuery UI

basic example in plain javascript to get you started
<form id="mainForm">
<a id="clickme" href="javascript:;">click me</a>
<input id="submitme" type="submit" />
</form>
<script type="text/javascript">
var mainForm = document.getElementById("mainForm"),
textBox = document.createElement("input");
textBox.id="tmpTextBox";
textBox.type="text";
document.getElementById("clickme").onclick = function () {
mainForm.appendChild(textBox);
}
document.getElementById("submitme").onclick = function () {
mainForm.removeChild(textBox);
}
</script>

Related

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

Defining a default button when pushing enter key

I have a Grails app which contains a .gsp page with a number of textFields, several submitToRemote buttons, and a couple actionSubmit buttons on it. When filling out the textFields, I want to be able to hit enter after I'm done, and have it do the same as clicking a specific submitToRemote button. Currently it is acting as if I clicked a specific actionSubmit button that I never intentionally specified.
I found this: How to trigger HTML button when you press Enter in textbox? . It seems like what I want, so I adapted it to my page, but it doesn't appear to be doing anything.
I'll forgo posting the entire .gsp but add what I feel is appropriate for the question.
Here is the button that is being activated currently:
<br>
<g:hiddenField name="type" value="head"/>
<g:actionSubmit value="Get Reports" action="showReports"/>
<br>
Here is the button that I want to be activated:
<g:submitToRemote value="find" url="[action: 'findCustomer']"
update="results" />
So what I did was add an id to both the target submitToRemote button, and 1 textField, then added the <g:javascript> tag wrapping around the scrip from the above linked page. Which looks like this:
<g:textField name="lastName" id="inputTextBox"/>
...
<g:submitToRemote value="find" id="findCustomer" url="[action: 'findCustomer']"
update="results" />
...
<g:javascript>
$(document).ready(function(){
$('#inputTextBox').keypress(function(e){
if(e.keyCode==13)
$('#findCustomer').click();
});
});
</g:javascript>
Also, I am using the jQuery library as such:
<g:javascript library="jquery" />
I'm not sure if my approach here is flawed, as I do need it to work on any of the 10 textFields on the page. I went through the grails documentation and couldn't find anything that really matched this...
I found the solution was quite close to what I had.
First I had to add an id to my submitToRemote button:
<g:submitToRemote value="find" url="[action: 'findCustomer']" update="results" id="submitForm"/>
Then in my main.gsp I added the proper script:
$(document).bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#submitForm").click();
return false;
}
});
The really important thing here is the return false; because without it, it will click the button, and then submit the form which is not what I needed.

YUI3 button click event is acting like a submit type instead of a button type

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.
I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html
The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();

Make javascript alert Yes/No Instead of Ok/Cancel

function btnSelete_Click() {
var strconfirm = confirm("Are you sure you want to delete?");
if (strconfirm == true) {
return true;
}
}
<asp:Button ID="btnSelect" runat="server" Text="Select" Onclientclick="return btnSelete_Click();" CssClass="cssbutton" />
How to create a yes/no/cancel alert box instead of ok/cancel alert box in Javascript?
In an attempt to solve a similar situation I've come across this example and adapted it. It uses JQUERY UI Dialog as Nikhil D suggested. Here is a look at the code:
HTML:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input type="button" id="box" value="Confirm the thing?" />
<div id="dialog-confirm"></div>
JavaScript:
$('#box').click(function buttonAction() {
$("#dialog-confirm").html("Do you want to do the thing?");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Do the thing?",
height: 250,
width: 400,
buttons: {
"Yes": function() {
$(this).dialog('close');
alert("Yes, do the thing");
},
"No": function() {
$(this).dialog('close');
alert("Nope, don't do the thing");
}
}
});
});
$('#box').click(buttonAction);
I have a few more tweaks I need to do to make this example work for my application. Will update this if I see it fit into the answer.
Hope this helps someone.
You cannot do that with the native confirm() as it is the browser’s method.
You have to create a plugin for a confirm box (or try one created by someone else). And they often look better, too.
Additional Tip: Change your English sentence to something like
Really, Delete this Thing?
You can use jQuery UI Dialog.
These libraries create HTML elements that look and behave like a dialog box, allowing you to put anything you want (including form elements or video) in the dialog.
Built a tiny, confirm-like vanilla js yes / no dialog.
https://www.npmjs.com/package/yesno-dialog
I shall try the solution with jQuery, for sure it should give a nice result. Of course you have to load jQuery ...
What about a pop-up with something like this? Of course this is dependant on the user authorizing pop-ups.
<html>
<head>
<script language="javascript">
var ret;
function returnfunction()
{
alert(ret);
}
</script>
</head>
<body>
<form>
<label id="QuestionToAsk" name="QuestionToAsk">Here is talked.</label><br />
<input type="button" value="Yes" name="yes" onClick="ret=true;returnfunction()" />
<input type="button" value="No" onClick="ret=false;returnfunction()" />
</form>
</body>
</html>
"Confirm" in Javascript stops the whole process until it gets a mouse response on its buttons. If that is what you are looking for, you can refer jquery-ui but if you have nothing running behind your process while receiving the response and you control the flow programatically, take a look at this. You will have to hard-code everything by yourself but you have complete command over customization. https://www.w3schools.com/howto/howto_css_modals.asp

making a div tag dynamic

I am working on a module of the project and I seemed to have stuck up. Tell me explain me what I am trying to do.
I have a text box where the user of my web portal will post the facebook like box code, either a fbml code or xfml code.As soon as the user clicks the submit buttton he should be able to see that like box on my site.
But whats happening right now with me is that I am not able to see the like box .
I have put upon the code below,
<!DOCTYPE HTML>
<head>
</title> Facebook like widget </title>
<script type="text/javascript"/>
function display_fb()
{
var fburl= document.getElementById('fb_link').value;
document.write(fburl);
}
</script>
</head>
<body>
<h1>IF YOU HAVE ANY FACEBOOK FAN PASTE THE LINK HERE!!!</h1>
<label> Paste the link here<input type="text" id="fb_link"/> </label>
<input type="button" value="submit" onClick="display_fb();" />
<div id="userFBLink" >
<label>Wanted is here:</label>
</div>
</body>
</html>
I guess need to refresh the div tag once the user puts his facebook like box code.
I believe I didn't understand you wrong and you want to add the text of this input into that div as a label (I'll suggest you to use "span" instead, because "label" is for labeling form fields).
It seems that you are looking for that:
function display_fb()
{
var fburl= document.getElementById("fb_link").value;
var lblLink = document.createElement("span");
lblLink.appendChild(document.createTextNode(fbUrl));
document.getElementById("userFBLink").appendChild(lblLink);
}
Or with jQuery:
function display_fb()
{
var lblLink = $("<span></span>");
lblLink.append($("input#fb_link").val());
$("div#userFBLink").append(lblLink);
}
It's up to you!

Categories