i am creating a to-do list, i want the user to be able to edit and delete the added tasks, this will be possible by removing readonlyattribute from HTML. but i am struggling doing the edit function.
Here is my code:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
console.log(evento);
if(evento.target.className=="edit"){
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Thanks in advance :D
I have added some lines to your JS code. Please check.
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
if(evento.target.className=="edit"){
console.log("Editar");
input[0].removeAttribute('readonly');
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
Test it in the Snippet below:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
console.log(input[0]);
if(evento.target.className=="edit"){
input[0].removeAttribute('readonly');
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Hope it helps.
First, 2 elements have the same id 's value :
<div class="content" id="${id}"> and <input id="${id}">
You can change same as :
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="input-${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit" data-task_id="input-${id}">Edit</button>
<button class="delete" data-task_id="input-${id}">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
if(evento.target.className=="edit"){
document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
}else if(evento.target.className=="delete"){
document.getElementById(evento.target.dataset.task_id).remove();
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Maybe you mean remove the readonly attribute on textbox inside the three divs?
$('.edit').click(function(){
$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');
});
$('.edit_first').click(function(){
$('#first_textbox').removeAttr('readonly');
});
$('.edit_second').click(function(){
$('#second_textbox').removeAttr('readonly');
});
$('.edit_third').click(function(){
$('#third_textbox').removeAttr('readonly');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>
Related
i have a dynamic form which lets you add and remove inputs. The issue is what even though it works visually, when submitting the form i wont get the values from inputs created by the JS function. If you need anything else let me know as this is about the last implementation to the website
Any ideas as to why? i leave my code below
The html:
<div class="form-container" id="form-container">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions"><label for="directions">Cooking steps.</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</form>
</div>
</div>
Font end JS
var add_more_fields = document.getElementById("add_more_fields")
var remove_fields = document.getElementById("remove_fields")
var directions_container = document.getElementById('product-directions')
var instruction_list = document.getElementById('instruction-list')
add_more_fields.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'directions[]')
newField.setAttribute('placeholder', 'Add Instruction')
node.appendChild(newField)
instruction_list.appendChild(node)
}
remove_fields.onclick = function () {
var input_tags = instruction_list.getElementsByTagName('li')
if (input_tags.length > 1) {
instruction_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
var ingredient_list = document.getElementById('ingredient-list')
add_more_fields_ingredients.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'Ingredients[]')
newField.setAttribute('placeholder', 'Add Ingredient')
node.appendChild(newField)
ingredient_list.appendChild(node)
}
remove_fields_ingredients.onclick = function () {
var input_tags = ingredient_list.getElementsByTagName('li')
if (input_tags.length > 1) {
ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
your HTML is not valid, form element is not properly closed, move closing form tag outside button container, and form opening tag a level up
this should work, and now you probably need to modify styles and rearrange some elements, so you need to see to it that the form and HTML is valid, and adapt styles accordingly:
<div class="form-container" id="form-container">
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish:
<br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions">
<label for="directions">Cooking steps.</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients">
<label for="Ingredients">Ingredients:</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</div>
</form>
</div>
I have a Component that causes an error, "TypeError: Cannot read property 'value' of null". It's nested inside of another component, and makes that component not load.
This is the code:
const NewItem = (props) => {
const qty = "QuantityBox" + props.identifier.toString();
const prc = "PriceBox" + props.identifier.toString();
return(
<div className="NewItem">
<div className="ItemNameInput">
<p className="InputLabel">Item Name</p>
<input className="inputFull" type="text" />
</div>
<div className="QuantityAndPrice">
<div className="QuantityInput">
<p className="InputLabel">Qty</p>
<input className="inputEighth" value="1" id={qty} type="text" />
</div>
<div className="PriceInput">
<p className="InputLabel">Price</p>
<input className="inputFourth" value="0" id={prc} type="text" />
</div>
<div className="TotalOutput">
<p className="InputLabel">Total</p>
<h4 className="TotalAmount">{(document.getElementById(qty).value * document.getElementById(prc).value).toFixed(2)}</h4>
</div>
<img src={TrashCan} alt="Delete" />
</div>
</div>
)
}
Right in the "TotalAmount" h4, is where the problem arises. If I remove that part, it loads up just fine. Judging from the error, it can't find the elements I'm specifying, but I don't understand why. I don't know if it has anything to do with the parent component, but I'll put it here just in case:
class NewInvoice extends Component {
constructor(props) {
super(props)
this.state = {
numberOfItems: [0]
};
}
createItem = () => {
this.setState(prevState => ({numberOfItems: [...prevState.numberOfItems, (this.state.numberOfItems.length - 1)]}));
}
render() {
return(
<div className="NewInvoice">
<button onClick={() => this.props.goBackInvoiceList()} className="goBack">Go back</button>
<h1>New Invoice</h1>
<form>
<p className="FormAreaLabel">Bill From</p>
<div className="BillFrom">
<div className="StreetAddressInput">
<p className="InputLabel">Street Address</p>
<input className="inputFull" type="text" />
</div>
<div className="HalfInput">
<div className="CityInput">
<p className="InputLabel">City</p>
<input className="inputHalf" type="text" />
</div>
<div className="PostCodeInput">
<p className="InputLabel">Post Code</p>
<input className="inputHalf" type="text" />
</div>
</div>
<div className="NewCountryInput">
<p className="InputLabel">Country</p>
<input className="inputFull" type="text" />
</div>
</div>
<div className="BillTo">
<div className="ClientNameInput">
<p className="InputLabel">Client's Name</p>
<input className="inputFull" type="text" />
</div>
<div className="ClientEmailInput">
<p className="InputLabel">Client's Email</p>
<input className="inputFull" type="text" />
</div>
<div className="ClientStreetAddressInput">
<p className="InputLabel">Street Address</p>
<input className="inputFull" type="text" />
</div>
<div className="HalfInput">
<div className="ClientCityInput">
<p className="InputLabel">City</p>
<input className="inputHalf" type="text" />
</div>
<div className="ClientPostCodeInput">
<p className="InputLabel">Post Code</p>
<input className="inputHalf" type="text" />
</div>
</div>
<div className="ClientCountryInput">
<p className="InputLabel">Country</p>
<input className="inputFull" type="text" />
</div>
</div>
<div className="OtherInfo">
<div className="InvoiceDateInput">
<p className="InputLabel">Invoice Date</p>
<input className="inputFull" type="text" />
</div>
<div className="PaymentTermsInput">
<p className="InputLabel">Payment Terms</p>
<input className="inputFull" type="text" />
</div>
<div className="ProjectDescriptionInput">
<p className="InputLabel">Project Description</p>
<input className="inputFull" type="text" />
</div>
</div>
<h3 className="ItemListTitle">Item List</h3>
<div className="ItemList">
{this.state.numberOfItems.map((index) =>
<NewItem key={index} identifier={index} />
)}
<button onClick={() => this.createItem()} className="AddNewItem">+ Add New Item</button>
</div>
</form>
<div className="NewInvoiceEndButtons">
<button className="Discard">Discard</button>
<button className="SaveAsDraft">Save As Draft</button>
<button className="SaveAndSend">Save And Send</button>
</div>
</div>
)
}
}
This is happening because in the h4 line that you specified, you are trying to retrieve a DOM node with the id "QuantityBox" + props.identifier.toString(). Your code is unable to retrieve a DOM element with a matching id, causing document.getElementById(qty) to return null. null doesn't have any properties, so document.getElementById(qty).value is throwing an error specifiying that it cant access property value of null.
Also, if you want to manipulate DOM elements directly, the React way is to use React Refs. You should be able to achieve your desired result with that.
Read more on Refs here: https://reactjs.org/docs/refs-and-the-dom.html
So, I'm pretty new to react so I'm still not quite sure what I'm doing. I had a project that used purely HTML, JQuery, and CSS but I'm trying to convert it to react. I have a page with checkboxes and when they are clicked a div is added with links inside of it and if unchecked the div is removed:
if(element.checked != false) {
$('.links').append('<div id="social">\
<p>\
Instagram\n\
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>\
<p>\
Facebook\n\
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>\
<p>\
Twitter\n\
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>\
<p>\
Youtube\n\
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>\
</div>');
}
else if(element.checked != true) {
$("#social").remove();
}
I'm trying to turn this into React inside a component but I'm not sure if I'm doing it right. I have the function linked to my checkbox but I don't know how to add/remove the links when clicked:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";
export default class LoginPage extends Component {
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={this.socialMedia.bind(this)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links"></section>
</div>
);
}
// Social(element) {
// if (element.checked != false) {
// $(".links").append(
// '<div id="social">\
// <p>\
// Instagram\n\
// <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
// </p>\
// <p>\
// Facebook\n\
// <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
// </p>\
// <p>\
// Twitter\n\
// <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
// </p>\
// <p>\
// Youtube\n\
// <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
// </p>\
// </div>'
// );
// } else if (element.checked != true) {
// $("#social").remove();
// }
// }
}
Any help with this would be appreciated, I am using the MERN stack for this.
Try this with func comp and useState
export const LoginPage = () => {
const [isChecked, setIsChecked] = useState(false);
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={() => setIsChecked(!isChecked)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{isChecked ? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null }
</section>
</div>
);
}
You should use state and ternary expression. should be something like this:
And you should not change the DOM with jquery while you are working with react.
import React, { Component } from "react";
export default class LoginPage extends Component {
constructor(){
super();
this.state ={
isElementChecked: false
}
}
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
checked={this.state.isElementChecked}
onChange={this.setState({isElementChecked: !this.state.isElementChecked})}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{this.state.isElementChecked? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null}
</section>
</div>
);
}
}
I'm working on a social media site for a client that was built by another company. Currently I'm working on the posting system where users can post. The original code had it where users had to go through 3 steps first then hit the button to post. The client wanted to remove the steps and just have it setup similar to facebook. I moved the code around and removed the steps but the "Post" button doesn't work now. When I click on it, it just says "Posting" and doesn't do anything else.
If you go to seegossip.com and sign up as a user and login, click on the orange smileys icon in the top right, it will bring up the posting popup.
Below is the original posting process code:
<div class="popup close">
<div class="left">
<div class="sectionn1 follow" id="box1">
<div class="popup-heading">Follow the steps and start gossiping!</div>
<div class="follow2">*Tip: you can do all three on the same Post! </div>
<div class="type">
</div>
<div class="get">
<button type="button" onClick="openpopup(2)">Get Started!</button>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="popupclose-c">Cancel</div>
</a>
</div>
</div>
<div class="sectionn1" id="box2" align="center">
<div class="popup-heading">Step1: Type away!</div>
<div class="user-post-main">
<div class="add-pics">
<div class="user-post"> <br clear="all" />
<form id="post" id="form" name="form" action="" method="post">
<div class="user-post-middle">
<div class="post-area">
<input type="text" placeholder="Type your post's Title here" class="input" name="postname" id="postname"/>
<span class='status'></span>
</div>
<div class="post-area">
<textarea placeholder="Type your post's here" class="textarea" rows="5" name="posttext" id="posttext"/></textarea>
<span class='status'></span>
</div>
<div class="post-area">
<input type="text" placeholder="Enter a Custom URL Here" class="input" name="posturl" id="posturl"/>
<span class='status'></span>
</div>
<br clear="all" />
</div>
</form>
<div class="red">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone">
<input type="hidden" name="postid" value="<?php echo $_REQUEST['post_id'];?>">
<input type="hidden" name="userid" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
</div>
<div id="dropzone1" class="dropzone zone"> </div>
</div><br clear="all" />
<!--<button type="button" onclick="openpopup(4)" >Lets Add Some Videos! ></button>-->
</div>
</div>
<div class="green">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone2">
</form>
</div>
<div id="dropzone2" class="dropzone zone"></div>
</div><br clear="all" />
<div class="some">
<div class="button"><button type="button" name="create_new_post" id="create_new_post" >Post</button></div>
</div>
</div>
</div>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
</div>
</div>
<!----------------------popup3---------------------------->
<div class="sectionn1" id="box3" align="center">
<div class="popup-heading"> Step2: Let's Add Some Pics!</div>
<span style="font-style:italic; font-size:16px;">No Picture? No Problem Simply Continue to the Next Step! </span><br clear="all" />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
<!-------------------------------popup-4--------------------->
<style>
.dz-default.dz-message {
background-size:100px !important;
}
</style>
<div class="sectionn1" id="box4" align="center">
<div class="popup-heading">Step3: Let's Add Some Videos!</div>
No Videos? No Problem Simply click on POST!<br clear="all" /><br />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
</div>
<!--------------------------popup-->
And here's the new code for the posting process:
<div class="popup close">
<div class="sectionn1 follow" id="box1">
<div class="user-post">
<!-- UPLOAD PICS -->
<div class="popupclose">
<a class="new_post_close">
<div class="close-c">
</div></a>
</div>
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone" name="my-dropzone">
<input name="postid" type="hidden" value="<?php echo $_REQUEST['post_id'];?>"> <input name="userid" type="hidden" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
<p>Add Photo(s)</p>
</div>
<div class="dropzone zone" id="dropzone1">
</div>
<!-- UPLOAD VIDEOs -->
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone2" name="my-dropzone2">
</form>
<p>Add Video</p>
</div>
<div class="dropzone zone" id="dropzone2">
</div>
</div>
<!-- POST AREA -->
<form action="" id="post" method="post" name="form">
<textarea class="textarea" id="posttext" name="posttext" placeholder="What's on your mind, today?" rows="5"></textarea>
</form>
<div class="bottom-buttons">
<div class="button">
<button id="create_new_post" name="create_new_post" type="button">
<p>Post</p></button>
</div>
</div>
</div>
</div>
Below is the script for the popup where I think the error is.
$(document).on('click','a#opennewpostpopup',function(data){
if($('.popup').hasClass('close')) {
postpopup(0);
openpopup(1);
}
});
$(document).on('click','.openpostpopup',function(data){
postpopup(5,this);
});
function openpopup(p){
if(p){
$('.glass, .popupglass').fadeIn();
$('.popup').removeClass('close');
$('.sectionn1').removeClass('active');
$('#box'+p).addClass('active');
$('body').addClass('short_page');
if(p==3) $('#my-dropzone .dz-default span').html('Drag and Drop your pictures here!')
if(p==4) $('#my-dropzone2 .dz-default span').html('Drag and Drop your Videos here,');
}
else {
$('.glass , .popupglass').fadeOut();
$('.popup').addClass('close');
$('body').removeClass('short_page');
$('.sectionn1').removeClass('active');
$('#post .post-area .input,#post .post-area .textarea').each(function(){ $(this).val(''); });
$('span.status').removeClass('success').removeClass('error');
$('.dz-preview').remove();
$('[name=post_id]').remove();
}
}
function createPostId(popup){
id = $('input[name=post_id]').val();
if(typeof cnprpost == 'undefined' && !id){
cnprpost = $.post("ajax.php",{action:'createPost',posttext:$('#posttext').val()},function(data){
$('#my-dropzone, #my-dropzone2').not(':has(input[name=post_id])').prepend('<input type="hidden" name="post_id" value="'+data+'">');
openpopup(popup);
delete cnprpost;
});
}else openpopup(popup);
}
$('.new_post_close').on('click',function(data){
id=$('form.dropzone [name=post_id]').val();
if(id) {
var conf=confirm("Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok");
if(conf){
openpopup(0);
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){
});
}
}else openpopup(0);
});
$('#create_new_post').on('click',function(){
post_id=$('[name=post_id]').val();
postTitle = $('#post input[name=postname]').val();
postContent = $('#post textarea[name=posttext]').val();
postUrl = $('#post input[name=posturl]').val();
dis=this;
$(dis).html('Posting...');
if(typeof pprpost == 'undefined' && post_id )
pprpost =$.post("ajax.php",{action:'publishpost',post_id:post_id,posttitle:postTitle,posttext:postContent,posturl:postUrl},function(data){
if(data==1) { openpopup(0); }
else { $(dis).html('Try Again...'); }
delete pprpost
});
});
window.onbeforeunload = function() {
id=$('[name=post_id]').val();
if(!$('.popup').hasClass('close') && id){
return "Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok";
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){ });
}
}
This is a little advanced for me and I've been stuck on this site for a couple weeks trying to figure out what the problem is so please help.
I have the following code, which shows and hides elements according to buttons being clicked:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
JQUERY:
$(".editButton").click(function () {
$(".renameButton,.cancelRenameButton").show();
$(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(".renameButton,.cancelRenameButton").hide();
$(".editButton").show();
});
The problem I'm getting is I can't get the buttons to work individually. I've tried using 'this' without success
You can simply use siblings (less function calls!) in combination with this to traverse the DOM and then just toggle them away (or keep hide and show if you prefer).
JSFiddle here
$(".editButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
$(".cancelRenameButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
Try something like this:
$(".editButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show();
$(this).parents(".largeImage").find(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide();
$(this).parents(".largeImage").find(".editButton").show();
});
If I understood properly what u want to do. This can be a possible solution:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form1">
<input type="button" value="Click to Rename"/>
</div>
<div class="cancelRenameButton" name="form1">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form1">
<input type="submit" value="Rename"/>
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form2">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton" name="form2">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form2">
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
jQuery:
$(".editButton, .cancelRenameButton").click(function () {
Toggle($(this));
});
function Toggle(obj){
var name = obj.attr("name");
$(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
$(".editButton[name="+name+"]").toggle();
}
Check this link jsfiddle to see a how it works.
A better solution would be, I think, remove the divs and deal only with buttons.
Hope it useful!