I'm trying to gate a link using fancybox and cookies to show a form the first time the link is clicked and then once the form is submitted the popup form would no longer pop up but instead would open to the page url. Here is my code but so far all I can do is get the popup form to show on link click. How do I tell fancybox to not show if the cookie is present and instead go to a page link?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="http://intercross2.com/CPS_landing_page/assets/fancybox/dist/jquery.fancybox.min.css" rel="stylesheet" />
</head>
<body>
<a class="fancybox" data-fancybox data-src="#donation-info" href="thankyou.html" alt="">Fancybox</a>
<div style="display:none">
<div id="donation-info">
<h2>Answer a few short questions to continue</h2>
<form id="gate" method="post" action="sendmail.php">
<label for="name">Your Name</label><br>
<input type="text" name="name" title="Enter your name" class="required"><br>
<label for="phone">Daytime Phone</label><br>
<input type="tel" name="phone" class="required"><br>
<label for="email">Email</label><br>
<input type="email" name="email" title="Enter your e-mail address" class="required email"><br>
<input type="submit" name="submit" class="submit-link" id="submit" value="Submit" />
</form>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://intercross2.com/CPS_landing_page/assets/fancybox/dist/jquery.fancybox.min.js"></script>
<script>
$(function () {
// Define cookie name
var cookieName = 'hide_form';
// Configure fancyBox
$('.fancybox').fancybox({
autoDimensions: false,
autoSize: false,
height: 'auto',
padding: 20,
width: 650,
afterClose: function() {
// Set cookie to hide fancybox for 1 day
$.cookie(cookieName, true, { expires: 1 });
}
});
// Handle submit click event
$('a#submit').on('click', function (event) {
event.preventDefault();
// Hide fancybox and set cookie to hide fancy box for 7 days
$.fancybox.close();
$.cookie(cookieName, true, { expires: 7 });
});
</script>
</body>
</html>
If you need to do check if cookie exists, then use something like:
if (!!$.cookie(cookieName)) { /* Open fancyBox here */ }
The rest is up to you.
Related
I Am trying To Send Post request to The Django using Axios But it Is Not Working
instead it sending get request after the submit button is pressed.
I don't know why this happening I Hvae configured Everything corretelty but it is not working
Any Has Any solution to this then please help me
My Html Code Is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Out</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js" integrity="sha512-0qU9M9jfqPw6FKkPafM3gy2CBAvUWnYVOfNPDYKVuRTel1PrciTj+a9P3loJB+j0QmN2Y0JYQmkBBS8W+mbezg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% load static %}
</head>
<body>
<div align = "center">
<form action="" name = "out" id ="out" >
{% csrf_token %}
<table>
<th>Name</th>
<th>Stock_out</th>
<tr>
<td><input type="text" id="name" name="name"></td>
<td><input type="text" id="stock_out" name="stock_out"></td>
</tr>
<tr >
<td><span id ="name_er"></span></td>
<td><span id ="stock_err"></span></td>
</tr>
</table>
<input type="button" value="Submit" form = "out" onclick="submit()">
</form>
</div>
<script src="{% static 'out.js/'%}"></script>
</body>
</html>
Here Is My Js Script
function submit(){
let nam = document.getElementById('name').value;
let out = document.getElementById('stock_out').values
if(nam=="" | nam==null){
document.getElementById('nam-er').innerHTML="Name Insert please"
return false
}else{
let form = document.getElementById('out');
var data = new FormData(form);
data.append('name', document.getElementById('name').value);
data.append('stock_out', document.getElementById('stock_out').value);
data.append("csrfmiddelwaretoken",'{{csrf_token}}');
// form.reset();
axios.post('add/product_out',data).then(function(resp){
window.location.href = "add/success";
console.log(resp);
})
.catch(function (error) {
console.log(error);
})
}
}
Here Is My Django Views
def product_out(request):
if request.method =='POST':
name = request.POST.get('name')
stock = request.POST.get('stock_out')
Stock_Out.objects.create(
name=name,
stock_out=stock
)
resp = {
"status":'success'
}
return JsonResponse(resp)
urls.py
from django.urls import path
from add import views
urlpatterns =[
path('add',views.add, name='add'),
path('success',views.success, name='success'),
path('stock_out',views.stock_out, name = 'stock_out'),
path('product_out',views.product_out, name = 'product_out')
]
I Want Send The to The Server from input field Which is Shown on the picture that come from http response from the browser(https://i.stack.imgur.com/3FrMS.png)
I think the issue is that the browser's default submit is triggering making it skip all your javascript part. Try preventing it with preventDefault():
Pass the event to your js (note the e in the parenthesis)
<input type="button" value="Submit" form = "out" onclick="submit(e)">
Prevent the default behaviour:
function submit(e){
e.preventDefault()
// ..the rest of your script here
}
Alternatively, you could change the submit button from being a <input type="submit" /> to a <button type="button">Submit</button>
I have a Vue app: it is To Do List, where after adding some notes by clicking button Add Task we receive a list of items to do. On the front of each item we have button Delete and checkbox to have opportunity to mark it as done. The bug is when I for example mark one of the items in the list as checked and after that delete it-marker that it was checked goes to the other item which was not marked as checked initially. Can you please advice how it can be solved using Vue.js or any other option? Below is my code:
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox"/>
({{index+1}}) {{note}}
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
The main issue in you code is, you don't store any information about which task is checked and which one is not.let's say you checked 3rd task and then delete it, the new 3rd item from the top will be auto checked as it has no information about the task so can't differentiate between the new and the deleted task.
This can be solved many way one easy solution is, in your notes array store two types of data. One title and one is isChecked then v-model the checked value in template.
Update your addnewtask() function like this,
addnewtask() {
if (this.inputvalue !== "") {
this.notes.push({
title: this.inputvalue,
isChecked: false,
});
this.inputvalue = "";
}
},
In html use a v-modal to add a two way data binding for the note.isChecked and update note like note.title since note is currently an object now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0" ...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox" v-model="note.isChecked" />
({{index+1}}) {{note.title}}
</div>
<button class="btn danger" v-on:click="removetask(index)">
Delete
</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
Here is a vue playgroud link for your code demo.
I am new to Django. I am trying to create a website with two input textboxes. When the submit button clicked, I need to update the results from django view to the same template without reloading the webpage.
Here is my code so far:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<H1>Welcome to Test</H1>
<div class="input-group" >
Input Text:<br>
<textarea class="form-control" rows="20" cols="70" name="InputText"
placeholder="Enter your Input Text here" form="myForm">
</textarea>
<span class="input-group-addon"><br></span>
Input TextFSM Template:<br>
<textarea class="form-control" rows="20" cols="70" name="InputTemplate"
placeholder="Enter your template here" form="myForm">
</textarea>
<form action="" method="post" id="myForm">
{% csrf_token %}
<input type="submit" value="Submit">
</form>
</div>
<div id="resultid">
<p>Result:</p>
{{result}}
</div>
</body>
</html>
views.py
class HomePageView(TemplateView):
template_name = "index.html"
def get(self, request, **kwargs):
form = ParserForm()
return render(request, self.template_name, {"form": form})
def post(self, request, **kwargs):
form = ParserForm(request.POST)
if form.is_valid():
inputtext = form['InputText'].value()
template = form['InputTemplate'].value()
# Process the data and get the result
print(result)
return render(request, self.template_name, {'result': result})
How to pass the result to index.html from view but the text entered in the textboxes should be persistent.
There is no direct way to update result in django templates or django views without reloading the page. In addition, once page in rendered you need second request to update that page. You could use jquery ajax to do fetch data from server without reloading page.
Ajax is asynchronous javascript extension which is use to send request with out reloading page. This would help you to do exactly that you want.
You could get more help from here
See following example for an instance.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<body>
<H1>Welcome to Test</H1>
<div class="input-group" >
Input Text:<br>
<textarea class="form-control" rows="20" cols="70" name="InputText"
placeholder="Enter your Input Text here" form="myForm">
</textarea>
<span class="input-group-addon"><br></span>
Input TextFSM Template:<br>
<textarea class="form-control" rows="20" cols="70" name="InputTemplate"
placeholder="Enter your template here" form="myForm">
</textarea>
<form id="my-form" action="" method="post" id="myForm">
{% csrf_token %}
<input type="submit" value="Submit">
</form>
</div>
<div id="resultid">
<p>Result:</p>
{{result}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
function processForm( e ){
$.ajax({
url: '/url-to-call/', //replace this with url that you want to hit without reloading the page
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr ){
// manipulate stuff or action
},
error: function( jqXhr, textStatus, errorThrown ){
// This is executed when some error occures
}
});
e.preventDefault();
}
$('#my-form').submit( processForm );
})(jQuery);</body>
</html>
I'm trying to work these cookies so once the user/pass is correct it will start a cookie for the user to always show the username when logging back in (remember me feature).
While this code gave the "usernameCookie" value when I checked it at the same page, it didn't pass it to the next one. It's like it doesn't exist anymore. Of course, I used buffer=true but this is driving me crazy why it doesn't work.
<%# language="VBscript"%>
<% response.buffer = True %>
<!-- #include file = "ddsn.asp" -->
<!-- #include file = "sfuncs.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<!--Initiate form validation - in this example on the login form-->
<script type="text/javascript">
$(document).ready(function() {
$("#loginform").validate();
});
</script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<%
msg = ""
If request.form ("password") <> "" Then
Set rs = Server.CreateObject("ADODB.RecordSet")
SQL = "Select id,firstName,lastName,username,password,permissions,status FROM dispatchersTBL WHERE username='" & request.form ("username") & "' and password='" & request.form ("password") & "'"
If inStr(1,SQL,";") or inStr(1,SQL,"''") OR inStr(1,LCase(SQL)," or ") Then msg = "<strong>Wrong Username or Password</strong>" End If
rs.Open SQL,SQLDSN,3,1
If NOT rs.EOF Then
Session("login") = "True"
Session("loggedUserID") = rs("id")
Session("fullName") = rs("firstName") & " " & rs("lastName")
Session("permissions") = rs("permissions")
status = rs("status")
Session.Timeout = 1440
If status = "Inactive" Then
msg = "<p><strong>Inactive User. Please contact the administrator.</strong></p>"
Else
response.cookies("usernameCookie") = rs("username")
response.cookies("passwordCookie") = rs("password")
response.cookies("usernameCookie").expires = Date() + 30
response.cookies("passwordCookie").expires = Date() + 30
response.redirect adminSiteURL & "co-worker-sms.asp"
End If
Else
msg = "<p><strong>Wrong Username or Password</strong></p>"
End if
rs.Close
Set rs = Nothing
End if
%>
<div id="admin_wrapper">
<form action="default.asp" id="login" method="post">
<%=msg%>
<!-- TEXTBOXES -->
<label>Username</label><br />
<input name="username" type="text" value="<%=request.cookies("usernameCookie")%>" class="text large required" id="username" /><br />
<div class="clearfix"> </div>
<label>Password</label><br />
<input name="password" type="password" value="<%=request.cookies("passwordCookie")%>" class="text large required" id="password" /><br />
<div class="clearfix"> </div>
<p><input name="btnLogin" type="submit" class="submit" id="btnLogin" value="LOGIN" /></p>
</form>
</div>
</body>
</html>
What am I missing?
I haven't seen your login page but your code seems ok - are you sure you do the request.cookies when you try to retrieve it ?
try make a simple page like this
<%
' put cookie
Response.Cookies("usernameCookie") = "Superman"
Response.Cookies("usernameCookie").Expires = Date() + 10
Response.Cookies("passwordCookie") = "Batman"
response.Cookies("passwordCookie").Expires = Date() + 10
%>
<% ' Print my cookie %>
<input type="text" value="<% = request.cookies("usernameCookie") %>" name="username">
<br />
<input type="text" value="<% = request.cookies("passwordCookie") %>" name="password">
After a reload page your input fields should have "superman" an "batman"
I have some text being displayed and I am using the Raphael JS library. I want the 'firstname' text to be size 25px, but it is not working. I am passing in a JS variable to the Raphael part and maybe that is part of the problem. If anyone could help me I would appreciate it.
<html>
<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
var string = "J\no\ne";
</script>
</head>
<body>
Text: <input type="text" id="words" value="" />
<input type="button" value="Animate" onclick="animate()" />
<div id='msg'></div>
<div id='num'></div>
<div id='letters'></div>
<!--<div id="letters2"></div>-->
<div id="draw-here-raphael" style="height: 200px; width: 400px; margin-top:0px;">
</div>
<div id="elps" style="margin-left:100px;"/>
<script type="text/javascript"> //all your javascript goes here
var r = new Raphael("draw-here-raphael");
var firstname = r.text(95,100, string).attr({font: "25px"});
var name = r.text(100,100, string);
name.blur(1);
</script>
</body>
</html>
Try var firstname = r.text(95,100, string).attr({"font-size": 25});
Try calling the raphael js file after the jQuery file.
<script src="jquery-1.7.2.js"></script>
<script src="raphael.js"></script>