i'm a newbie of JavaScript in particular of cytoscape.
I have that code :
<div id="graphicalEditor" class="tab-pane fade">
<br> Name: <input type="text" id="name"> <input
type="button" onclick="addnode('name');" value="add node">
<input type="button" onclick="cy.remove('node');" value="clear">
<input type="button" onclick="sendData()" value="send"> <br>
<br>
<div id="cy"
style="width: 60em; height: 30em; postion: absolute; border: 1px solid black;"></div>
<script type="text/javascript">
var cy = cytoscape({
container : document.getElementById('cy'),
layout : {
name : 'preset'
},
// so we can see the ids
style : [ {
selector : 'node',
style : {
'content' : 'data(id)'
}
} ]
});
</script>
<script type="text/javascript">
function addnode(p) {
var nome = document.getElementById(p).value;
var eles = cy.add([ {
group : "nodes",
data : {
id : nome
},
position : {
x : 100,
y : 100
}
}
]);
}
</script>
<script type="text/javascript">
function sendData() {
$.ajax({
type : 'GET',
dataType : 'json',
contentType : 'application/json',
url : "/testAjax",
data : cy.json()
});
}
</script>
</div>
Can someone explain me why the div of cytoscape works with js only after i resize the firefox window? After resizing all works fine.
I don't know if it's relevant but this div is in bootstrap nav-tabs.
You need to wrap your cytoscape initialization in a DOMContentLoaded eventListener
document.addEventListener("DOMContentLoaded", function() {
cy = cytoscape({..})
}
Try to asign a container to cytospace before load completely the page.
For example:
<script type="text/javascript">
var cy;
$(document).ready(function(){
cy = cytoscape({
container : document.getElementById('cy'),
layout : {
name : 'preset'
},
// so we can see the ids
style : [ {
selector : 'node',
style : {
'content' : 'data(id)'
}
} ]
});
});
</script>
Related
I have created a comment system using ajax and php with the usage of append system now I am looking to make it look more attractive so I want when ever a new comment is posted it should be highlighted background like background color fadein and then fadeout smoothly like whenever new answer is posted it is highlighted with an orange background color can anyone help me out how it would be done and what jquery function is used
my jquery
$(document).ready(function() {
$('#sub_comment').on('click', function() {
var comment = $('#comment').val();
var store_id = $('#store_id').val();
$(document).ajaxStart(function() {
$('#wait').css('display', 'block');
});
$(document).ajaxComplete(function() {
$('#wait').css('display', 'none');
});
$.ajax({
type : "POST",
data : {comment: comment, store_id: store_id, command: 'Comment'},
dataType : 'text',
url : "includes/get_data.php",
success : function(data) {
$('#comment').val('');
$('#comments').append($(data).hide().fadeIn(2000));
}
});
});
});
you can use the transition: background-color 1s linear; css property.
Set initial background to the comment div and add the above property. Then change the background (to orange) of the div, it will create a fadein effect and after some setTimeout remove this background, then it will create a fadeout effect.
Check this example for reference.
Another way is to use the animation property of CSS. An example is given here
Try this:
Javascript
$(document).ready(function() {
$('#sub_comment').on('click', function() {
var apend_data = '<div class="data orange"><p>Hello World</p></div>';
$('#comments').append($(apend_data).hide().fadeIn(2000));
setTimeout(function() {
$("#comments .data").removeClass('orange');
}, 1000);
});
});
Css
#comments {
width: 100%;
}
.data {
padding: 15px;
border: 1px solid #000;
margin: 10px auto;
}
.orange {
background-color: orange;
}
HTML
<div id="comments">
<div class="data">
<p>
Hello World
</p>
</div>
</div>
<button id="sub_comment">
Click Me
</button>
fiddle
$(() => {
var index = 1;
$('#btnSubmit').on('click', () => {
$("#conteiner").append('<p id="_' + index + '" style="display:none;width:50%" class="backColor"> ' + $('#txtComment').val() + ' </p>');
var id = "#_" + index + "";
$(id).fadeIn();
index++;
setInterval(function () {
$(id).removeClass('backColor');
}, 1000);
});
});
.backColor {
background-color:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class='row' id='conteiner' style="padding-left:50px">
</div>
<br />
<div class='row' style='width:50%;padding-left:50px'>
<form>
<div class="form-group">
<input type="text" class="form-control" id="txtComment" placeholder="comment">
</div>
<button type="button" class="btn btn-default" id='btnSubmit'>Submit</button>
</form>
</div>
</body>
</html>
Your code:
$('#comments').append($(data).hide().fadeIn(2000));
cannot work because data is text. You have to make something like
$('#comments').append(data).hide().fadeIn(2000);
but this will always hide all comments and show them again. A workaround is to put the new comment to a new container and only handle this one:
var comments = $('#comments').append('<div>' + data + '</div>');
$('div',comments).css('background-color','');
var newcom = $('div:last-child',comments);
newcom.hide().css('background-color','#ffff00').fadeIn(2000);
With the newcom object you can do any css transition or other things.
When a "project" is clicked, I want multiple images to be appended to a container element.
Projects and their image URLs are defined in a JavaScript object.
If I click a project, its images are correctly appended. But if I close the project viewer and click that project again, the images are all duplicated. I think this has something to do with append().
What am I doing wrong?
I made a demonstration below:
$(function() {
var projects = {
'project_1': {
'title': 'EduTravel For Credit',
'description': 'Innovative travel for credit.',
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
$.each(projectData.images, function(item) {
$('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
});
$('#project_images').html('');
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="project-images"></div>
View the live website
From the source code on your website, it seems that you might be attempting to remove images from the container before appending new images:
$('#project_images').html('');
However, that selector uses an underscore while the actual element uses a hyphen:
<div id="project-images">
Also, you are clearing the contents after appending images rather than before.
I suggest using jQuery's empty() on the container before appending new images:
$(function() {
var projects = {
'project_1': {
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
},
'project_2': {
'images': [
'http://lorempixel.com/400/30/abstract/3/',
'http://lorempixel.com/400/30/abstract/4/'
]
},
'project_3': {
'images': [
'http://lorempixel.com/400/30/abstract/5/',
'http://lorempixel.com/400/30/abstract/6/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
var id=jQuery(this).data('id'),
projectData=projects["project_"+id];
$('#project-images').empty();
$.each(projectData.images, function(item) {
$('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
});
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>
<div id="project-images"></div>
An alternate method is to concatenate a string of new images, and then set the HTML of the container without using append():
$(function() {
var projects = {
'project_1': {
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
},
'project_2': {
'images': [
'http://lorempixel.com/400/30/abstract/3/',
'http://lorempixel.com/400/30/abstract/4/'
]
},
'project_3': {
'images': [
'http://lorempixel.com/400/30/abstract/5/',
'http://lorempixel.com/400/30/abstract/6/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
var id=jQuery(this).data('id'),
projectData=projects["project_"+id],
html_string='';
$.each(projectData.images, function(item) {
html_string+='<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>';
});
$('#project-images').html(html_string);
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>
<div id="project-images"></div>
I am a newbie so my question is pretty simple and straight forward.
I have a simple html text. When I click on that html text, the text should change to input field with the value retained and when the user clicks outside the text box, the input text field now should change to html text.
<div class="myText"> Hellow World </div>
Can somebody do this in jquery/Meteor. I am actually building a meteor project
You can do that with the contenteditable attribute
<div class="myText" contenteditable="true"> Hellow World </div>
<!-- Your div is now editable -->
Updated DEMO jsFiddle
$(document).ready(function() {
$('.editable').on('click', function() {
var that = $(this);
if (that.find('input').length > 0) {
return;
}
var currentText = that.text();
var $input = $('<input>').val(currentText)
.css({
'position': 'absolute',
top: '0px',
left: '0px',
width: that.width(),
height: that.height(),
opacity: 0.9,
padding: '10px'
});
$(this).append($input);
// Handle outside click
$(document).click(function(event) {
if(!$(event.target).closest('.editable').length) {
if ($input.val()) {
that.text($input.val());
}
that.find('input').remove();
}
});
});
});
In my solution you need to add class="editable" to all editable divs.
You also need to set position: relative to these divs. May be you can update my code and edit the css:
.editable {
position: relative;
}
To correctly align the input inside the div, you need to remove the border or set the .css({}) of the input to left: -1px and top: -1px. The border actually pushes the input 1px left and 1px form the top.
Try this:
$(function() {
$('div.myText').on('click', function() {
var div = $(this);
var tb = div.find('input:text');//get textbox, if exist
if (tb.length) {//text box already exist
div.text(tb.val());//remove text box & put its current value as text to the div
} else {
tb = $('<input>').prop({
'type': 'text',
'value': div.text()//set text box value from div current text
});
div.empty().append(tb);//add new text box
tb.focus();//put text box on focus
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myText">Hello world</div>
<div class="myText">This is second</div>
Try this:
$(document).click(function() {
$('.myText').html("Hello World");
});
$(".myText").click(function(event) {
$('.myText').html("<input type='text' id='test' value='Hello World'/>");
$('#test').focus();
event.stopPropagation();
});
FIDDLE.
To do it very easily and understandable you can also make two elements instead of changing.
Working fiddle: http://jsfiddle.net/45utpzhx/
It does an onClick event and onBlur.
html
<div>
<span class="myText">Hello World</span>
<input class="myInput" />
</div>
jQuery
$(document).ready(function() {
$(".myText").click(function() {
$(this).hide();
var t = $('.myText').html();
$('.myInput').val(t);
$('.myInput').show();
});
$(".myInput").blur(function() {
$(this).hide();
var t = $('.myInput').val();
$('.myText').html(t);
$('.myText').show();
});
});
Replace the clicked element with an input with value equal to the clicked element's text
$(document).on('click', '.myText', function() {
var that = $(this);
var text = that.text();
that.wrap('<div id="wrp" />');
$('#wrp').html('<input type="text" value="' + text + '" />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myText"> Hellow World </div>
You can try this solution :
$('.myText').click(function(){
var m = $(this).text();
$(this).html('');
$('<input/>',{
value : m
}).appendTo(this).focus();
});
$(document).on('blur','input',function(){
var m = $(this).val();
$(this).parent().find('input').remove().end().html(m);
});
working DEMO
$('#text').on('click', function() {
$("#text").hide();
if ($("#text").text()=="Add New text"){
$('#in_text').val("");
}else{
$('#in_text').val($("#text").text());
}
$("#in_text").show();
});
// Handle outside click
$(document).click(function(event) {
if(!$(event.target).closest('.editable').length) {
if($("#text").css('display') == 'none'){
$("#in_text").hide();
if ($("#in_text").val()=="" ){
$('#text').text("Add New text");
$('#text').addClass("asd");
}else{
$('#text').removeClass("asd");
$('#text').text($("#in_text").val());
}
$("#text").show();
}
}
});
#in_text{
display:none;
}
.editable{
width:50%;
}
.asd{
border-bottom : 1px dashed #333;
}
#text{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable">
<div id="text" >Text in div</div>
<input type="text" placeholder="Add New Text" id="in_text"/></div>
I have a very basic php email contact page that is activated when the user submits from a modal popup window. Instead of redirecting to a "thank you.html" page, is it possible to populate the popup window with the 'thank you' message?
Here is the html:
<!DOCTYPE html>
<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>
</head>
<body>
Subscribe</div>
<!-- Subscribe Pop-Up Content -->
<div id="myModal" class="reveal-modal">
<form action="receiving.php" method="POST">
<input type="text" name="email" value="EMAIL" /><br>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</body>
</html>
Here is "receiving.php":
<?php
$email = $_POST['email'];
if(isset($_POST['submit']))
{
$from_add = "$email";
$to_add = "myname#mysite.com";
$subject = "New Subscriber";
$message = "Email: $email";
$headers = "From: $from_add \r\n";
$headers .= "Reply-To: $from_add \r\n";
$headers .= "Return-Path: $from_add\r\n";
$headers .= "X-Mailer: PHP \r\n";
if(mail($to_add,$subject,$message,$headers))
{
$msg = "Mail sent";
}
}
header("location: http://www.mysite.com/thankyou.html"); exit;
?>
And if it helps to see here is the javascript being used "jquery.reveal.js" Please note that I am very inexperienced with js and php. This code was my starting point and it is from here Reveal JQuery Modal:
(function($) {
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
//Extend dem' options
var options = $.extend({}, defaults, options);
return this.each(function() {
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);
You can do it this way . After mailing the user redirect the user to current page(where your pop up was)
header("location: http://www.mysite.com/#mailsuccess"); //with hash at the last
Now in Jquery get this hash match it and fire the pop up
Jquery
$(document).ready(function(){
var hash=window.location.hash;
if(hash==="#mailsuccess")
{
$('#successModal').reveal({ /* options */ }); //You can use same modal or different modal to show success message
}
});
USING SIMPLE AJAX
<!DOCTYPE html>
<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit','#mailform',function(e){
e.preventDefault(); //stop default form submit
var email=$('#mailform input[name="email"]').val(); //get email from form
$.ajax({
type: "POST",
url: "receiving.php",
data: "email="+email,
cache: false,
success: function(html){
if($.trim(html)==='success')
{
$('#myModal').trigger('reveal:close'); //close current modal
$('#successModal').reveal(); //open success modal
}
}
});
});
});
</script>
</head>
<body>
Subscribe</div>
<!-- Subscribe Pop-Up Content -->
<div id="myModal" class="reveal-modal">
<form action="receiving.php" method="POST" id="mailform"> //give a id to form
<input type="text" name="email" value="EMAIL" /><br>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
<div id="successModal" class="reveal-modal">
Mailed successfully
</div>
</body>
</html>
in your PHP remove header location
if(mail($to_add,$subject,$message,$headers))
{
echo 'success';
exit();
}
Here is a resource you can edit and use Download Source Code or see live demo here http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/
Add a Button or link to your page like this
<p>click to open</p>
“#inline” here should be the “id” of the that will contain the form.
<div id="inline">
<h2>Send us a Message</h2>
<form id="contact" name="contact" action="#" method="post">
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Enter a Message</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
</form>
</div>
Include these script to listen of the event of click. If you have an action defined in your form you can use “preventDefault()” method
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}
if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}
if(mailvalid == true && msglen >= 4) {
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<em>sending...</em>");
//This will post it to the php page
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
//Display a message on successful posting for 1 sec
$(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});
});
</script>
You can add anything you want to do in your PHP file.
Ya sure this is just add id to your form
like:
<form action="receiving.php" method="POST" id="yourformId">
user javascript function
don't use submit button user normal button like
<input type="button" name="submit" value="Submit" onclick="beforesubmit()" />
function beforesubmit()
{
/**open popup**/
return false;
}
onconfirm of popup execute code
$("#yourformId").submit();
I would like to have two buttons to open each one a diferent modal window with diferente content.
I am using this example from yui: http://yuilibrary.com/yui/docs/panel/panel-form-example.html
Things i try that did not work:
1. trying to duplicate the code
1. trying to duplicate the code and naming each div with a diferent name . Eg.:
Add and Add 1
and
This is the code from the example:
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.12.0/build/cssreset/reset-min.css&3.12.0/build/cssfonts/fonts-min.css&3.12.0/build/cssbase/base-min.css">
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<div id="dt"></div>
<p><button id="addRow">Add</button></p>
<div id="panelContent">
<div class="yui3-widget-bd">
</div>
</div>
<div id="nestedPanel"></div>
<script type="text/javascript">
YUI().use('datatable-mutable', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
dt.addRow({
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
panel.hide();
}
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
});
</script>
Thank's in advance
I just work out in an example wich works :
<!DOCTYPE html>
<html lang="en" class="yui3-loading">
<head>
<meta charset="utf-8">
<title>Using a panel to show a modal form</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.12.0/build/cssreset/reset-min.css&3.12.0/build/cssfonts/fonts-min.css&3.12.0/build/cssbase/base-min.css">
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<style type="text/css">
#desc {
margin-bottom: 20px;
border-bottom: 1px dotted #333;
}
#desc span {
background: #a3350d;
padding :2px;
color:# f27243;
}
.yui3-panel {
outline: none;
}
.yui3-panel-content .yui3-widget-hd {
font-weight: bold;
}
.yui3-panel-content .yui3-widget-bd {
padding: 15px;
}
.yui3-panel-content label {
margin-right: 30px;
}
.yui3-panel-content fieldset {
border: none;
padding: 0;
}
.yui3-panel-content input[type="text"] {
border: none;
border: 1px solid #ccc;
padding: 3px 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 100%;
width: 200px;
}
#addRow {
margin-top: 10px;
}
#dt {
margin-left: 1em;
}
#dt th, #dt td {
border: 0 none;
border-left: 1px solid #cbcbcb;
}
</style>
<h2>Using a panel to show a modal form</h2>
<div class="yui3-u-1">
<div id="dt"></div>
<p><button id="addRow">Add 1</button></p>
<p><button id="addRow2">Add 2</button></p>
<div id="panelContent">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p>
<label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder="">
</p>
<p>
<label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder="">
</p>
<p>
<label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$">
</p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel"></div>
<p></p>
<div id="panelContent2">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p>
<label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder="">
</p>
<p>
<label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder="">
</p>
<p>
<label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$">
</p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel2"></div>
</div>
<script type="text/javascript">
YUI().use('datatable-mutable', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
addRowBtn2 = Y.one('#addRow2'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
dt.addRow({
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
panel.hide();
}
// Define the removeItems function - this will be called when
// 'Remove All Items' is pressed on the modal form and is confirmed 'yes'
// by the nested panel.
function removeItems() {
dt.data.reset();
panel.hide();
}
// Instantiate the nested panel if it doesn't exist, otherwise just show it.
function removeAllItemsConfirm() {
if (nestedPanel) {
return nestedPanel.show();
}
nestedPanel = new Y.Panel({
bodyContent: 'Are you sure you want to remove all items?',
width : 400,
zIndex : 6,
centered : true,
modal : true,
render : '#nestedPanel',
buttons: [
{
value : 'Yes',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
nestedPanel.hide();
panel.hide();
removeItems();
}
},
{
value : 'No',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
nestedPanel.hide();
}
}
]
});
}
// Create the DataTable.
dt = new Y.DataTable({
columns: cols,
data : data,
summary: 'Price sheet for inventory parts',
caption: 'Price sheet for inventory parts',
render : '#dt'
});
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
panel.addButton({
value : 'Add Item',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addItem();
}
});
panel.addButton({
value : 'Remove All Items',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
removeAllItemsConfirm();
}
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
//custom
// Create the main modal form.
panel2 = new Y.Panel({
srcNode : '#panelContent2',
headerContent: 'Add A New New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn2.on('click', function (e) {
panel2.show();
});
});
</script>
</body>
</html>