Develop Reference

Create a div on click with class, header, paragraph, numbering and delete button via plain Javascript

I have this form:
#todos {
min-height: 300px;
max-width: 500px;
border: 1px solid;
}
<label>Todo Header:</label>
<input type="text" id="header">
<br>
<label>Todo Paragraph:</label>
<input type="text" id="paragraph">
<br>
<input type="submit" value="Create Todo!">
<br><br>
<div id="todos"></div>
and this divs:
* {
margin: 0;
padding: 0;
}
.todo {
border: 2px solid #EAEAEA;
max-width: 400px;
padding: 1em;
margin: 1em;
border-radius: 3px;
}
<div class="todo">
<div class="deleteTodo">x delete todo</div>
<p class="todoNumber">1</p>
<h1 class="todoHeader">Test Todo Header</h1>
<p class="todoDescription">Buy Groceries</p>
</div>
<div class="todo">
<div class="deleteTodo">x delete todo</div>
<p class="todoNumber">2</p>
<h1 class="todoHeader">Test Todo Header</h1>
<p class="todoDescription">Buy Groceries again</p>
</div>
<div class="todo">
<div class="deleteTodo">x delete todo</div>
<p class="todoNumber">3</p>
<h1 class="todoHeader">Test Todo Header</h1>
<p class="todoDescription">Buy Groceries again</p>
</div>
How could i create such a .todo in the #Todos div with Javascript that also contains the values of the inputs and a number for each and a delete button?
This is what i have tried so far:
function addTodo() {
var todoHeader = document.getElementById("header").value;
var todoParagraph = document.getElementById("paragraph").value;
var todo = document.createElement("div");
todo.innerHTML = todoHeader + "<br>" + todoParagraph;
document.getElementById("todos").appendChild(todo);
}
#todos {
min-height: 300px;
max-width: 500px;
border: 1px solid;
}
<label>Todo Header:</label>
<input type="text" id="header">
<br>
<label>Todo Paragraph:</label>
<input type="text" id="paragraph">
<br>
<input type="submit" value="Create Todo!" onclick="addTodo();">
<br><br>
<div id="todos"></div>
Short summary:
Div with the class todo should be created
Div should have a delete button
A numbering (such as: First todo = 1, second todo = 2 etc.)
A heading and a description taken from the inputs
I hope it's really not that much work for you but it really means a lot to me. That's why I wanted to thank you in advance!

You can create elements with document.createElement(), append them to other elements with append() and remove them with remove(). For example:
const delete_todo = document.createElement('div');
...
todo.append(delete_todo);
To get the todo number you have to count the existing todos. You can do this with childElementCount.
After creating the elements you can add class, innerHTML (or better textContent) and the event listener for the delete button. For example:
delete_todo.classList.add('deleteTodo');
delete_todo.textContent = 'x delete todo';
delete_todo.addEventListener('click', function() {
this.parentElement.remove();
});
Working example
const container = document.querySelector('#todos');
document.querySelector('#new_todo').addEventListener('click', function() {
const header_text = document.querySelector('#header').value;
const todo_text = document.querySelector('#paragraph').value;
const todo_count = container.childElementCount;
const todo = document.createElement('div');
const delete_todo = document.createElement('div');
const todo_number = document.createElement('p');
const todo_header = document.createElement('h1');
const todo_description = document.createElement('p');
todo.classList.add('todo');
delete_todo.classList.add('deleteTodo');
todo_number.classList.add('todoNumber');
todo_header.classList.add('todoHeader');
todo_description.classList.add('todoDescription');
delete_todo.textContent = 'x delete todo';
todo_number.textContent = todo_count + 1;
todo_header.textContent = header_text;
todo_description.textContent = todo_text;
delete_todo.addEventListener('click', function() {
this.parentElement.remove();
});
todo.append(delete_todo);
todo.append(todo_number);
todo.append(todo_header);
todo.append(todo_description);
container.append(todo);
});
* {
margin: 0;
padding: 0;
}
#todos {
min-height: 300px;
max-width: 500px;
border: 1px solid;
}
.todo {
border: 2px solid #EAEAEA;
max-width: 400px;
padding: 1em;
margin: 1em;
border-radius: 3px;
}
.deleteTodo {
cursor: pointer;
}
<label>Todo Header:</label>
<input type="text" id="header">
<br>
<label>Todo Paragraph:</label>
<input type="text" id="paragraph">
<br>
<input id="new_todo" type="button" value="Create Todo!">
<br><br>
<div id="todos"></div>

How to print or get the cell value from HTML TABLE(User Input) in html and javascript

I'm trying to grab the cell values from an HTML table so that I can display them into a table.
How do I grab the cell's value so that I can pass it to the table cells My JavaScript code below show a page not found?
Code:
function getValues() {
let item = itemName;
if (item == null)
alert("Please you need to fill all fields to continue");
else
alert("success")
//Data collection
var itemName = document.getElementsByName("itemName")[0].value;
var itemQty = document.getElementsByName("itemQty")[0].value;
var itemPrice = document.getElementsByName("itemPrice")[0].value;
var itemAmt = itemPrice * itemQty;
var itemDate = document.getElementsByName("itemDate")[0].value;
var total = "Your total amount of items bought is " + " " + "#" + itemAmt;
//data display
document.getElementById("tag").innerHTML = total;
document.getElementById("itemName").innerHTML = (itemName);
document.getElementById("itemQty").innerHTML = (itemQty);
document.getElementById("itemPrice").innerHTML = (itemPrice);
document.getElementById("itemAmt").innerHTML = (itemAmt);
document.getElementById("itemDate").innerHTML = (itemDate);
//conditional statement for empty field
// if ( itemAmt === true){
alert(total)
// }else{
// alert("Please you need to fill all fields to continue")
//}
}
body {
background: #fff;
}
.tag {
background: #ccc;
width: 100%;
height: 150px;
font-size: 20px;
transform: uppercase;
margin-top: 30px;
padding-top: 30px;
position: absolute;
justify-space: in-between;
}
#item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
}
.item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
.frame {
width: 90%;
height: 200px;
background: grey;
padding: 10px;
border-radius: 3px;
overflow-y: auto;
float: left;
position: relative;
color: #231ccb;
}
<div class="frame">
<p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>
<br>
<p><label> Quantity:<input type="text" name="itemQty" required> </label></p>
<br>
<p><label> Price :<input type="number" name="itemPrice" required> </label></p>
<!--<br>
<p><label> Amount: <input type="number" name="itemAmt" placeholder="#" required> </label></p>-->
<br>
<p><label> Date :<input type="Date" name="itemDate" required> </label></p>
</div>
<br>
<button onclick="getValues()"> Add Item </button>
</form>
<!--Table Header-->
<div class="tag">
<div id="item">Item Name</div>
<div id="item">Quantity</div>
<div id="item">Price</div>
<div id="item">Amount</div>
<div id="item">Date</div>
<!--Display item variable-->
<div class="item">
<p id="itemName"></p>
</div>
<div class="item">
<p id="itemQty"> </p>
</div>
<div class="item">
<p id="itemPrice"></p>
</div>
<div class="item">
<p id="itemAmt"> </p>
</div>
<div class="item">
<p id="itemDate"></p>
</div>
<br>
<br>
<br>
<p id="tag"> Hello world</p>
</div>

You can use the exclamation mark (!) symbol, called a bang, which is the logical NOT operator.
Below is the demo code, you can take reference from here.
! will help us to find if any input is empty or null or undefined.
const btn = document.querySelector("#add-items");
btn.addEventListener("click", addItems);
function addItems() {
let itemName = document.querySelector("#item-name").value;
let itemQnt = document.querySelector("#item-quantity").value;
if(!itemName) alert("Please provide item name.");
else if(!itemQnt) alert("Please provide item quantity.");
else alert("Success");
}
<label for="item-name"> Item Name:
<input type="text" placeholder="Item Name" id="item-name" />
</label>
<br><br>
<label for="item-quantity"> Item Quantity:
<input type="number" placeholder="Item Quantity" id="item-quantity" />
</label>
<br><br>
<button type="button" id="add-items">Add Item</button>
Now, coming to your code, a few of these needs to be changed in your code.
You are checking for itemName for null, even before its value is been ready by your code.
Thus, every time even with correct data, your if condition will be evaluated, the corresponding alert will be triggered.
You need to put everything which is related to the calculation of total price and the display code, inside your else condition after the if condition fails to evaluate to true.
function getValues() {
var itemName = document.getElementsByName("itemName")[0].value;
var itemQty = document.getElementsByName("itemQty")[0].value;
var itemPrice = document.getElementsByName("itemPrice")[0].value;
var itemDate = document.getElementsByName("itemDate")[0].value;
if (!itemName || !itemQty || !itemPrice || !itemDate) {
alert("Please you need to fill all fields to continue");
} else {
alert("success")
var itemAmt = itemPrice * itemQty;
var total = "Your total amount of items bought is " + " " + "#" + itemAmt;
//data display
document.getElementById("tag").innerHTML = total;
document.getElementById("itemName").innerHTML = (itemName);
document.getElementById("itemQty").innerHTML = (itemQty);
document.getElementById("itemPrice").innerHTML = (itemPrice);
document.getElementById("itemAmt").innerHTML = (itemAmt);
document.getElementById("itemDate").innerHTML = (itemDate);
alert(total)
}
}
}
body {
background: #fff;
}
.tag {
background: #ccc;
width: 100%;
height: 150px;
font-size: 20px;
transform: uppercase;
margin-top: 30px;
padding-top: 30px;
position: absolute;
justify-space: in-between;
}
#item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
}
.item {
width: 19.35%;
height: auto;
background: pink;
float: left;
text-align: center;
font-size: 10px;
border: 1px solid black;
.frame {
width: 90%;
height: 200px;
background: grey;
padding: 10px;
border-radius: 3px;
overflow-y: auto;
float: left;
position: relative;
color: #231ccb;
}
<div class="frame">
<p><label> Item:<input type="text" name="itemName" placeholder="item" required> </label></p>
<br>
<p><label> Quantity:<input type="text" name="itemQty" required> </label></p>
<br>
<p><label> Price :<input type="number" name="itemPrice" required> </label></p>
<br>
<p><label> Date :<input type="Date" name="itemDate" required> </label></p>
</div>
<br>
<button onclick="getValues()"> Add Item </button>
</form>
<!--Table Header-->
<div class="tag">
<div id="item">Item Name</div>
<div id="item">Quantity</div>
<div id="item">Price</div>
<div id="item">Amount</div>
<div id="item">Date</div>
<!--Display item variable-->
<div class="item">
<p id="itemName"></p>
</div>
<div class="item">
<p id="itemQty"> </p>
</div>
<div class="item">
<p id="itemPrice"></p>
</div>
<div class="item">
<p id="itemAmt"> </p>
</div>
<div class="item">
<p id="itemDate"></p>
</div>
<br>
<br>
<br>
<p id="tag"> Hello world</p>
</div>

html form vertically split - submission issues

i have created a 2 pager website. It is basically a data gathering site.
On first page, i gather some information, in a form. I pass this to the second page using the "GET" method of the form submission.
On the second page, I parse the information and display it in readonly format. Alongside this information, there is another text field, which user is supposed to fill in.
the UI looks perfect, but the functionality is somehow broken.
Have a look at the code. I gotta paste more code here, as i do not know which part is responsible for functionality. It could be javascript functions, so including those. I have to include the css, as it is responsible for vertical splits, and bug might reside there and obviously html as well, as there might be few structural issues. Hence, this is the minimalistic code that can be there for the problem.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var part1;
var part2;
var part3;
function GetSimpleStory(){
document.getElementById("emotion").value = getParameterByName("emotion");
var part1 = getParameterByName("myInputs_1[]");
addInput("previousInput_1", "Input_1", "prevInputs_1", "input_1", part1);
var part2 = getParameterByName("myInputs_2[]");
addInput("previousInput_2", "Input_2", "prevInputs_2", "input_2", part2);
var part3 = getParameterByName("myInputs_3[]");
addInput("previousInput_3", "Input_3", "prevInputs_3", "input_3", part3);
}
function getParameterByName(name){
var url = decodeURIComponent(window.location.search);
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "=([^&#]*)", 'g');
var match, result = [];
while ((match = regex.exec(url)) !== null)
result.push(match[1]);
return result;
}
function addInput(divName, nextDiv, arrName, nextArray, contents){
contents.forEach(function (value, i){
value = value.replace(new RegExp('\\+', 'g'), ' ');
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' value='" + value + "' readonly>";
document.getElementById(divName).appendChild(newdiv);
var newdiv1 = document.createElement('div');
newdiv1.innerHTML = "<input type='text' name='" + nextArray + "[]' value='' required>";
document.getElementById(nextDiv).appendChild(newdiv1);
})
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 120%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.generatedEmotion
{
font-weight: bold;
background-color: #f9f99f;
font-size:2.4em;
}
.generatedEmotionHidden
{
font-weight: bold;
font-size:2.4em;
visibility: hidden;
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
border-radius: 4px;
overflow: hidden;
}
</style>
</head>
<body onload="GetSimpleStory()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<p id="demo"></p>
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<b>Emotion </b><br>
<input type="text" value="" id="emotion" class="generatedEmotion" readonly>
<div id="previousInput_1">
<textarea rows="4" cols="50" readonly class="floating-box">
John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea>
</div>
<div id="previousInput_2">
<div class="floating-box">Waiter shows John and Sally to their table.</div>
</div>
<div id="previousInput_3">
<div class="floating-box">John asks Sally, "Will you marry me?"</div>
</div>
</div>
</div>
<div class="window">
<div class="windowContent">
<br><br> <b>Interesting Version</b><br><br><br><br><br>
<div id="Input_1">
<textarea rows="4" cols="50" class="floating-box">
</textarea>
</div>
<div id="Input_2">
<textarea rows="2" cols="50" class="floating-box">
</textarea>
</div>
<div id="Input_3">
<textarea rows="1" cols="50" class="floating-box">
</textarea>
</div>
<input type="submit" value="Both parts completed, Submit story">
</div>
</div>
</form>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>some other text goes in this vertical div</b></font></p>
</font>
</div>
</div>
</div>
</body>
</html>
Problems:
After submitting form, first field, emotion is not submitted. I read on SO that if it is readonly, it should be submitted.
Entire second vertical div is not getting submitted. It is made up of arrays input_1, input_2 and input_3. I have no idea what is wrong, because the similarly "stuffed" prevInputs get submitted
FYI, I am submitting the information via formspree.io
PS: url to try->
soq.html?emotion=Surprise&myInputs_1%5B%5D=hello&myInputs_1%5B%5D=dear+reader&myInputs_2%5B%5D=thank+you+for&myInputs_2%5B%5D=reading+the+question&myInputs_3%5B%5D=and+trying+to+solve+the+probelm

Jquery event not being fired with IE8

I'm using blueimp's fileupload javascript widget and jQuery 1.9.0 for uploading files to a server and I have an event not being triggered in IE8, which is one of the required browsers for my project.
So because of this I can never open the window for browsing for the files. If I do a $('#fileupload').click() from the IE8 console, it works, but I didn't success in the code.
I think this is happening because of the bubbling of the event, but I'm showing you the code for deciding for yourselves. I think also that styles are importante to this issue because maybe the styled button I'm using over the real fileupload widget must be overlapping it. Maybe css styles like opacity and position matter.
Html:
<form id="supportForm">
<div class="formTable">
<div class="formRow">
<label>User:</label>
<input name="user" type="text" class="form-control validate[required]" placeholder="John Smith">
</div>
<div class="formRow">
<label>Phone:</label>
<input name="phone" type="tel" class="form-control validate[required]" placeholder="Ej: 881243989">
</div>
<!-- ... -->
<!-- Some inputs and stuff -->
<!-- ... -->
<div class="formRow">
<label>Attached files:</label>
<div class="formCell">
<span class="btn btn-default fileinput-button">
<span>Browse</span>
<input id="fileupload" type="file" name="files[]" data-url="../server/upload.html" class="submitFilesButton" multiple="">
</span>
</div>
</div>
<div class="formRow">
<label></label>
<div id="additional" class="formCell">
</div>
</div>
<div class="formRow">
<label></label>
<div class="formCell">
<button id="remedyButton" type="submit" class="btn btn-primary">Send</button>
<button id="resetButton" type="reset" class="btn btn-default">Clean</button>
</div>
</div>
</div>
</form>
Javascript:
$(document).ready(function() {
upload_comp = $('#fileupload')
.fileupload({ // Widget options
singleFileUploads : false,
autoUpload : false,
dataType : 'json'
})
.on("fileuploadadd",
function(e, data) { // Function for adding files after opening the browse window
if (data.files.length > 0) {
$('input[type=file]').css('color', 'transparent');
}
// Creating divs for the selected files in the previous browse window
for ( var i = 0; i < data.files.length; i++) {
var name = $('<div></div>').text(data.files[i].name);
var icon = $('<span class="fa fa-2x fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete">');
icon.click(function() {
// This handler creates a button for removing the actual file
for ( var k = 0; k < fileList.length; k++) {
if (fileList[k].name == $(this).parent().text()) {
fileList.splice(k, 1);
break;
}
}
$(this).parent().remove();
});
fileDiv = $('<div class="item">').wrapInner(name).append(icon);
fileDiv.appendTo($('#additional'));
fileList.push(data.files[i]);
}
//createTooltip($('.fa-trash'));
});
if (isNavigator(CONSTANTS.BROWSER.IE8)) {
// Maybe could use something here and force the click()
// But my current solution creates an infinite loop
}
});
Css:
/* These are specifically for IE8 and are located in ie8.css */
DIV.formRow > * {
width: auto;
}
INPUT[type=file] {
display : none;
}
/* These are for all browsers in another css file, also for IE8 when there is no rule in the previous file */
.formTable {
border-spacing:1em;
display: table;
width: 45em;
min-width:45em;
margin: 0 auto;
}
div.formRow {
display: table-row;
}
div.formRow > label, #additional {
width: 35%;
}
div.formRow > * {
display: table-cell;
width: 100%;
}
div.formCell {
display: table-cell;
width: 100%;
}
#fileupload {
float:left;
top: 0;
right: 0;
left: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
padding: initial;
}
.item {
border: 1px;
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: thin;
display: inline-block;
padding: 4px;
margin:0.25em;
}
.item div {
vertical-align:text-bottom;
display: inline;
}
.fa-trash {
margin-left: 1em;
cursor:pointer;
color: #428BCA;
}
#company {
display: inline-block;
width: 49%;
}
#warehouse {
float:right;
width: 49%;
display: inline-block;
}
.submitFilesButton {
opacity:0;
position:absolute;
}
.fileinput-button {
text-align:center;
white-space: nowrap;
position: relative;
}
#resetButton, #remedyButton {
margin: 0.4em;
float:right;
}
label {
vertical-align:top;
}

This has been open long enough. It looked like #Sampson was right and IE8 didn't support the JS API for files.

disable jQuery removing javascript tags

Best all,
I'm trying to debug our CMS (what is mostly AJAX) but jQuery removes all the script tags, what makes me unable to debug the JavaScript, how do I disable this behaviour?
I thought I would find it after a simple Google search but no success :(
Thank you,
EDIT
my Page before:
<script>
jQuery(function(){
inter = null;
jQuery('#parse').click(function(){
jQuery('#answer').load(f(),{"POST":jQuery("#POST").val(),"start":((jQuery('#start').val()-1)*10)},function(){
alert("Burrrnnnnnnn")
console.log("Laten we is kijken: " + inter);
clearInterval(inter);
});
inter = setInterval(function(){
jQuery.getJSON("/googlemonster/backend/status-test",function(json){
setProgressBar(json);
});
},200);
return false;
});
});
function
function setProgressBar(obj){
var g;
jQuery("#progress-bar,#progress-text-alt-wrapper").animate({"width":(((g=obj["%"])==0?1:g)*2) + "px"},{queue:false});
jQuery("#progress-text,#progress-text-alt").text(obj["%"] + "% " + obj["status"]);
}
</script>
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text" />
<br>
Pagina
<input value="1" id="start"
type="number" />
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>
The page after
<style>
#progress-text-alt-wrapper {
height: 30px;
position: absolute;
z-index: 2;
width: 1%;
overflow: hidden;
}
#progress {
border: solid black 1px;
padding: 1px;
text-align: center;
height: 20px;
width: 200px
}
#progress-bar {
background-color: green;
width: 1%;
height: 100%;
}
.progress-bar-text {
padding-top: 3px;
text-align: center;
width: 200px;
position: absolute;
}
#progress-text {
color:green;
}
#progress-text-alt {
color:#eee;
}
</style>
Query:
<input id="POST" type="text">
<br>
Pagina
<input value="1" id="start" type="number">
<br>
<button id="parse">Look</button>
<div>
<div id="progress">
<div id="progress-text-alt-wrapper">
<div class="progress-bar-text" id="progress-text-alt">0% Nothing</div>
</div>
<div class="progress-bar-text" id="progress-text">0% Nothing</div>
<div id="progress-bar"></div>
</div>
</div>
<div id="answer"></div>

You are right – it is a feature of jQuery to strip out script tags. You need to use the basic JavaScript methods instead.
See: Can't append <script> element
Scripts will be evaluated first, and then discarded.
http://api.jquery.com/append/

after some research I finnaly could fix the problem thanks to the guys here,
I made a little plugin for jQuery for it, now the script tags are not getting, removed but executed.
(function($){
$.fn.loadDebuggable = function(url){
data = typeof(arguments[1]) == "object"?arguments[1]:{};
success = arguments[2]||typeof(arguments[1]) == "function"?arguments[1]:function(){};
return $.ajax(url,{
"context":this,
"success":[function(data){
var div = document.createElement('DIV');
div.innerHTML = data;
this[0].innerHTML = "";
while (div.firstChild)
{
this[0].appendChild(div.firstChild);
div.removeChild(div.firstChild);
};
},success],
"type":"GET",
"data":data
});
}
})(jQuery);
Thanks,