I have a drag and drop feature in my web app, which is shown below. I am trying to get the items that are dragged into the the #contributors div to be placed into a textbox named personalassessment_set3 but I'm not able to do so. Any advice?
form
<p>
<label for="personalassessment_set3">Set3</label><br />
<input id="personalassessment_set3" name="personalassessment[set3]" type="text" />
</p>
<input type="button" value="Set Value" onclick="$('#personalassessment_set3').val( $('#contributors').val() )" />
Drag/drop
<script>
function dragUser(user, event) {
event.dataTransfer.setData('User', user.id);
}
function dropUser(target, event) {
var user = event.dataTransfer.getData('User');
target.appendChild(document.getElementById(user));
}
</script>
<section id="user-levels">
<div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)">Compensation</a>
<a draggable="true" class="user" id="raphael" ondragstart="dragUser(this, event)">Benefits</a>
</div>
<div id="contributors" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Ranking
</div>
<div class="clear"></div>
</section>
You are misusing onclick which don't accept any jquery based method or wrapped object.
You should try this instead:
<input id="test" type="button" value="Set Value" />
<script>
$(function(){
$('#test').on('click',function(){
$('#personalassessment_set3').val( $('#contributors').val() )
});
});
</script>
Related
I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.
My suggestion would be to use the break function. That will exit the current loop.
I am trying to submit a form inside lightbox modal. But popup showing empty content. my code is as follows:
<amp-lightbox id="success-lightbox" layout="nodisplay">
<amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
<template type="amp-mustache">
<div class="lightbox-modal">
<form action="/" method="get" target="_top">
{{#items}}
<input type="checkbox" value={{id}} /> {{/items}}
<input type="submit" value="submit" />
</form>
</div>
</template>
</amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />
I included all dependencies required amp-form, amp-lightbox, amp-list, amp-mustache.
If I remove the form tag, checkboxes are showing fine.
The working code:
<amp-lightbox id="success-lightbox" layout="nodisplay">
<amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
<template type="amp-mustache">
<div class="lightbox-modal">
{{#items}}
<input type="checkbox" value={{id}} /> {{/items}}
<input type="submit" value="submit" />
</div>
</template>
</amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />
I went through docs. but didn't find anything. is it not possible to nest the form inside amp-lightbox ?? if not possible, is there any workaround to submit data from lightbox ??
amp-mustache doesn't support form elements. A simple workaround in your case is moving the form tag outside the amp-list element.
I have a row that will added automatically when I click 'Add Row' button. The row created by using clone() method. When I click 'Submit' button. The new row gone and didnt stay in that page. How to make it stay with the input in the textbox after the page is load?
Below is my code for that row:
<div id="rows">
<div class="p2">
<input type="checkbox" class="checkbox" runat="server"/>
<input id="txt1" type="text" runat="server" maxlength="16" value="0.00" />
</div>
<div class="p3"> </div>
<div class="p4">
<input id="txt2" type="text" runat="server" maxlength="16" value="0.00"/>
</div>
<div class="p5"> </div>
<div class="p6">
<input id="txt3" type="text" runat="server" maxlength="16" value="0.00"/>
<span style="color:red;">*</span>
</div>
</div>
Below is my javascript code:
var cloneCount = 1;
//Add new row
$("#addrow").click(function () {
$('#rows')
.clone(true).find('input:text').val("").end()
.attr('id', 'rows' + cloneCount++, 'class', 'block')
.insertAfter('[id^=rows]:last');
return false;
});
below is my code for the button:
<div id="bttns" style="text-align:center;">
<button id="addrow" >Add Row</button>
<button onclick="validate()" >Submit</button>
</div>
I'm using VS2012 and this project were ASPX web form. Do I need to do some code-behind? What are the problem inside my code? Really needs your help and I'm new to C# and asp.net.
I am making a fitness application, on each exercise page I have a buttons which display the 'information','data input' and the'progress'. This is working fine, however, when the buttons are clicked the divs layer over the top each other and displayed at the same time.
What I want is the information to primarily be displayed but when the user clicks the other buttons the other button divs are hidden. Thus only displaying one div at a time.
HTML
<div id="buttons">
<a class="Smallbutton" id="showInfo">
<img src="img/info.png" />
</a>
<a class="Smallbutton" id="showDataInput">
<img src="img/add-item.png" />
</a>
<a class="Smallbutton" id="showHistory">
<img src="img/bar-chart.png" />
</a>
</div>
<div class="info" style="display: none;">
<p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput" style="display: none;">
<form onsubmit="save_data()">
Reps:
<input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
<input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history" style="display: none;">
<div id="log"></div>
<!--clears all data in localstorage-->
<input type="button" value="Clear" onclick="clearLocal();" />
</div>
SCRIPT
//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
$('#showHistory').click(function() {
$('.history').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
$('#showDataInput').click(function() {
$('.dataInput').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
$('#showInfo').click(function() {
$('.info').slideToggle("fast");
});
});
Here is my JSFiddle http://jsfiddle.net/GYru6/
Thank you in advance
I found this example of something that i am after http://jsfiddle.net/XwN2L/ however when i implement the code into my site all the divs are displayed at once.
Some minor tweaks
Add a data-target="" to all buttons
Add a class target to all the div's
Try
<div id="buttons">
<a class="Smallbutton" id="showInfo" data-target=".info"><img src="img/info.png"/></a>
<a class="Smallbutton" id="showDataInput" data-target=".dataInput"><img src="img/add-item.png"/></a>
<a class="Smallbutton" id="showHistory" data-target=".history"><img src="img/bar-chart.png"/></a>
</div>
<div class="info target" style="display: none;">
<p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput target" style="display: none;">
<form onsubmit="save_data()">
Reps: <input id="reps" type="number" name="quantity" min="1" max="12" step="1" required />
Sets: <input id="sets" type="number" name="quantity" min="1" max="4" step="1" required />
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();" />
</form>
</div>
<div class="history target" style="display: none;">
<div id="log"></div>
<!--clears all data in localstorage-->
<input type="button" value="Clear" onclick="clearLocal();"/>
</div>
then
$(document).ready(function () {
var $targets = $('.target');
$('#buttons .Smallbutton').click(function () {
var $target = $($(this).data('target')).slideToggle();
$targets.not($target).hide()
});
});
Demo: Fiddle
try adding .hide() other divs on click function
$(document).ready(function() {
$('#showHistory').click(function() {
$('.history').slideToggle("fast");
$('.dataInput').hide(); //hide other elements
$('.info').hide(); //hide other elements
});
});
FIDDLE
Try this way,
The HTML,
<div id="buttons">
<a class="Smallbutton" id="showInfo">
<img src="img/info.png" />
</a>
<a class="Smallbutton" id="showDataInput">
<img src="img/add-item.png" />
</a>
<a class="Smallbutton" id="showHistory">
<img src="img/bar-chart.png" />
</a>
</div>
<div class="info infoContainers" style="display: none;">
<p>Position yourself on the edge of the chair and grab hold of the seat just under your legs. Do the crunches by lifting
yourself from the seat and bring the knees to your chest.</p>
</div>
<div class="dataInput infoContainers" style="display: none;">
<form onsubmit="save_data()">
Reps:
<input id="reps" type="number" name="quantity" min="1" max="12" step="1" required>Sets:
<input id="sets" type="number" name="quantity" min="1" max="4" step="1" required>
<input type="submit" value="Add Log" onclick="insert(this.form.reps.value,this.form.sets.value);show();">
</div>
<div class="history infoContainers" style="display: none;">
<div id="log"></div>
<!--clears all data in localstorage-->
<input type="button" value="Clear" onclick="clearLocal();" />
</div>
And the Javascript,
//JQUERY SHOW/HIDE HISTORY
$(document).ready(function() {
$('#showHistory').click(function() {
$('.infoContainers').slideUp();
$('.history').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE DATA INPUT
$(document).ready(function() {
$('#showDataInput').click(function() {
$('.infoContainers').slideUp();
$('.dataInput').slideToggle("fast");
});
});
//JQUERY SHOW/HIDE INFO
$(document).ready(function() {
$('#showInfo').click(function() {
$('.infoContainers').slideUp();
$('.info').slideToggle("fast");
});
});
DEMO
I would use a hideAll function and call it on each element. this will simplify the logic a bit.
function hideAll(){
$('.info, .dataInput, .history').slideUp();
}
and then call it in each of your click events
$('#showInfo').click(function() {
hideAll();
$('.info').slideToggle("fast");
});
http://jsfiddle.net/GYru6/1/
<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JSfiddle
I'm guessing that I would store the form contents within a javascript function...
How do I contain a form within a bootstrap popover?
I would put my form into the markup and not into some data tag.
This is how it could work:
JS Code:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
HTML Markup:
the popover link
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
Demo
Alternative Approaches:
X-Editable
You might want to take a look at X-Editable.
A library that allows you to create editable elements on your page based on popovers.
Webcomponents
Mike Costello has released Bootstrap Web Components.
This nifty library has a Popovers Component that lets you embed the form as markup:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Demo
Either replace double quotes around type="text" within single quotes, Like:
"<form><input type='text'/></form>"
OR
Replace Double quotes wrapping data-content with single quote, Like:
data-content='<form><input type="text"/></form>'
<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>
just state data-html="true"
like this Working demo http://jsfiddle.net/7e2XU/21/show/#
* Update: http://jsfiddle.net/kz5kjmbt/
<div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JavaScript code:
$('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})
ScreenShot
You can load the form from a hidden div element with the Bootstrap-provided hidden class.
<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>
JavaScript:
$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});
Or try this one
Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div>
</div>
Open form
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>
A complete solution for anyone that might need it, I've used this with good results so far
JS:
$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});
HTML:
<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>
CSS:
.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}
I work in WordPress a lot so use PHP.
My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content.
$my-data-content = '<form><input type="text"/></form>';
along with
data-content='<?php echo $my-data-content; ?>'