I am trying to join two blocks of html code with javascript and call a dialog afterwards. I have done some research and tried concat and + but that doesnt work. Here is a simplified version of my code:
var html =
"<div class=\"dialog-form\" title=\"Edit\">" +
"<form class=\"insertaplato\" method=\"POST\" action=\"edit.php\">" +
"<fieldset>" +
"<label>Plate: </label> <input type=\"text\" value=\"" + plate + "\" >" +
"<label>Price: </label><input type=\"text\" value=\""+ price +"\" >";
"Spicy: <br> ";
if (spicy==1)
{var varP=
"<label> Yes </label><input value= \"yes\" type=\"radio\" checked>"+
"<label> No </label><input value=\"no\"><br><br>";
} else {
var varP=
"<label> Yes </label><input value=\"yes\" type=\"radio\">"+
"<label> No </label><input value=\"no\" checked type=\"radio\"><br><br>";
}
var html2 = "<br>"+
"<br><input id=\"insert\" type=\"submit\" value=\"Edit\" name=\"send\"> " +
"</fieldset>"+
"</form>"+
"</div>";
var div = $(html)+$(varP)+$(html2);
div.dialog(
{
title:"Edit Plate",
close: destroy_this_dialog
});
As it is right now the dialog doesnt come up. If I do this with only the first html variable it come up Ok but when I try to add or concatenate the others nothing happens. I am evidently not using these variables as I should. Any ideas?
Concatenate the strings and not the jQuery objects
var div = $(html + varP + html2);
div.dialog(
{
title:"Edit Plate",
close: destroy_this_dialog
});
Remove the $ where you're appending the pieces together. You want to append the strings into a single object.
var div = $(html + varP + html2);
intead of
var div = $(html)+$(varP)+$(html2);
div.dialog(
{
title:"Edit Plate",
close: destroy_this_dialog
});
try this:
var div = html+varP+html2;
$('.dialog-form').dialog(
{
title:"Edit Plate",
close: destroy_this_dialog
});
Related
I'm working with jQuery Mobile in a google web app and just having some issues selecting a tag. More specifically, I have content that is loaded from an external source so need to have a loading page initially. Once the external source is available I then update the page with the content using jQuery. Included in this content is an input tag. The issue is when I update the page, I cannot then cannot find the value of this input tag.
Here is my code below:
(intial html - Before content is loaded)
<div class="ui-body ui-body-a">
<div id="googleList" >
<fieldset data-role="controlgroup" data-mini="true" >
<input type="checkbox" name="checkbox-v-6a" id="checkbox-1-a">
<label for="checkbox-v-6a">Loading . . . </label>
</fieldset>
</div>
</div>
Here is my jQuery to update the code above when the new content comes in:
function showTaskList(tasks)
{
//Generate HTML
var htmlToInsert = "<fieldset data-role=\"controlgroup\" data-mini=\"true\" >";
for(var i = 0; i < tasks.length; i++)
{
htmlToInsert += "<input type=\"checkbox\" data-id=\"" + tasks[i][1] + "\" name=\"checkbox-" + i + "-a\" id=\"checkbox-" + i + "-a\" class=\"custom taskCheckBox\" ";
if(tasks[i][2] != undefined)
htmlToInsert += "checked=\"checked\"";
htmlToInsert += " />";
htmlToInsert += "<input id=\"currency-controlgroup1\" data-id=\"" + tasks[i][1] + "\" type=\"text\" value=\"" + tasks[i][0] + "\" data-wrapper-class=\"controlgroup-textinput ui-btn\" class=\"taskinputBox\">";
}
//Insert HTML into site
$("#googleList").html(htmlToInsert + "</fieldset>");
//Refresh List
$("#googleList").trigger("create");
}
Here is my code to get the input tag value
$(document).ready(function(){
function processTaskList()
{
console.log("Test");
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("data-id");
console.log("CheckBox:" + checkBoxId );
});
}
});
CheckBoxId keeps coming back undefined when I click on one of the checkboxes. I want to be able to read the data-id value. I'm not sure how to fix this? Any help is appreciated.
I tested the code below again, and it works - Thanks for your help
$(document).on('click', '.taskCheckBox', function (event, ui) {
var checkBoxId = $(this).data("id");
console.log("CheckBox:" + checkBoxId );
});
I am adding new div when user clicks the blue button but everytime user click button, content of whole html is getting dissappeared i need a solution for it.
Also, is it possible to add an animation to it?
here is the demo just press blue button, type something and hit blue button again.
https://jsfiddle.net/61tbq4q6/2/
This is html part:
<input type="button" id="ebookParts" value="" class="custBut">
<div id="myContainerDiv">
</div>
This is the JS:
var i = 1;
$( "#ebookParts" ).click(function() {
var container = document.getElementById("myContainerDiv");
var html = document.getElementById('myContainerDiv').innerHTML;
html = html + "<div class=\"col-sm-12\">"
+ "<div class=\"form-group\">"
+ "<div class=\"col-sm-6\"><label>Name</label><input class=\"form-control\" type=\"text\" name=\"display_name[]\"></div>"
+ "<div class=\"col-sm-2\"><label>Part</label><input class=\"form-control\" type=\"text\" name=\"part[]\" value=" + i + "></div>"
+ "<div class=\"col-sm-2\"><label>Pages between</label><input class=\"form-control\" type=\"text\" name=\"pages[]\"></div>"
+ "<div class=\"col-sm-2\"><label>price</label><input class=\"form-control\" type=\"text\" name=\"price[]\"></div>"
+ "</div>"
+ "</div>";
container.innerHTML= html;
i++;
return false;
});
If you're saying the problem is that whatever the user manually typed into an input is disappearing, it's because you're destroying those inputs and replacing them with new ones when you do container.innerHTML = html. Your original assignment to var html = ... only captures actual attributes, not JS properties.
What you need to do if you're going to append new DOM elements using HTML, while keeping the old content, is to use .insertAdjacentHTML instead of .innerHTML.
This way, instead of taking the existing DOM, converting it to HTML markup, adding more HTML to it, and replacing the old DOM elements with new ones generated from the HTML, you'll be simply creating the new ones from the HTML and adding them where you want them.
var i = 1;
$( "#ebookParts" ).click(function() {
var container = document.getElementById("myContainerDiv");
var html = "<div class=\"col-sm-12\">"
+ "<div class=\"form-group\">"
+ "<div class=\"col-sm-6\"><label>Name</label><input class=\"form-control\" type=\"text\" name=\"display_name[]\"></div>"
+ "<div class=\"col-sm-2\"><label>Part</label><input class=\"form-control\" type=\"text\" name=\"part[]\" value=" + i + "></div>"
+ "<div class=\"col-sm-2\"><label>Pages between</label><input class=\"form-control\" type=\"text\" name=\"pages[]\"></div>"
+ "<div class=\"col-sm-2\"><label>price</label><input class=\"form-control\" type=\"text\" name=\"price[]\"></div>"
+ "</div>"
+ "</div>";
// The "beforeend" parameter inserts the new content inside the
// container after the existing content.
container.insertAdjacentHTML("beforeend", html);
i++;
return false;
});
It's because you getting html, than changing it an then inserting again in your page. When you copying your html, you don't copying values, which already passed in inputs. Instead of this you need to use .appendChild() method, and you will also need document.createElement()
If you need only to add the div one time. Then check with a "if" before add the div.
var isAdded=false;
$( "#ebookParts" ).click(function() {
if(!isAdded){
//your code
}
});
I use popover of the bootstrap and then the problem. when I write javascript for append data add to the table .
The data it can not be called a popover ,
but the first Table written, it can be called popover .
This a function code add table.
function myFunction() {
var addTable = "<tr>" +
"<td><a style='cursor:pointer' data-toggle='popover' title='Vat Detail' data-html='true' " +
"data-content='Vat <input type=\"text\" id=\"txtVat[]\" name=\"txtVat[]\" size=\"8\"> </br> " +
"Invoice <input type=\"text\" id=\"txtVatInvoice[]\" name=\"txtVatInvoice[]\" size=\"8\"> </br> " +
"DATE <input type=\"text\" id=\"txtVatDate[]\" name=\"txtVatDate[]\" size=\"8\"></br> '>" +
"VAT </a> </td>" +
"</tr>";
$("#myTable tbody").append(addTable);
};
Try to trigger the popover using Javascript, look here.
This could get the job done:
$(function () {
$('[data-toggle="popover"]').popover()
});
I added textbox value as Baker's Basket, Pune, Maharashtra, Indiasd but on click event in textbox it only shows Baker's
I want to display whole text Baker's Basket, Pune, Maharashtra, Indiasd in the textbox.
JS FIDDLE EXAMPLE
// Try to Enter text given bellow
//Baker's Basket, Pune, Maharashtra, Indiasd
$("#clk").on('click', function () {
$("#cnt_div").empty();
var getTxt = $("#txt_n").val();
var addContent = "<input type='text' value=" + getTxt + " />";
$("#cnt_div").append(addContent);
});
without editng addContent variable
Edited:
JS FIDDLE SAMPLE TWO
$("#clk").on('click', function () {
var gData1 = $("#txt_1").val();
var gData2 = $("#txt_2").val();
var gData3 = $("#txt_3").val();
var cnt_1 = "<span class='lbl_normal_mode'>" + gData1 + "</span><input class='txt_edit_mode' value=" + gData1 + " type='text'/>";
var cnt_2 = "<span class='lbl_normal_mode'>" + gData2 + "</span><input class='txt_edit_mode' value=" + gData2 + " type='text'/>";
var cnt_3 = "<span class='lbl_normal_mode'>" + gData3 + "</span><input class='txt_edit_mode' value=" + gData3 + " type='text'/>";
var content_Data = "<div class='chunk_div_holder'><div style='float:left:width:100%'>" + cnt_1 + "</div><div style='float:left:width:100%'>" + cnt_2 + "</div><div style='float:left:width:100%'>" + cnt_3 + "</div></div>";
$(".dynmic_cntt").append(content_Data);
});
You should better append the element and its properties dynamically as an object:
$('<input>', {
type: 'text',
value: $("#txt_n").val()
}).appendTo($("#cnt_div").empty());
This will solve the problem of extra spaces (no quotes for value=Baker's Basket), wrong string escape (if the value will have quotes) for value attribute and other caveats.
N.B.: There is no textbox type for <input> element. It should be text instead.
DEMO: http://jsfiddle.net/ZyMCk/11/
Add the field in two stages:
add the field as you are already
set the value of the field using .val()
It is because you aren't escaping ' single quote.
Instead you can replace
this line
var addContent="<input type='textbox' value='"+getTxt+"' />";
with
var addContent=$("<input type='textbox' />").val(getTxt);
or
var addContent="<input type='textbox' value=\""+getTxt+"\" />";
Value attribute should enclose in quotes. In your case, its better to use double quotes, because Baker's Basket, Pune, Maharashtra, Indiasd already have a single quote in it.
$("#clk").on('click',function(){
$("#cnt_div").empty();
var getTxt=$("#txt_n").val();
var addContent="<input type='textbox' value=\""+getTxt+"\" />";
$("#cnt_div").append(addContent);
});
Fiddle
Edit
$("#clk").on('click',function(){
$("#cnt_div").empty();
var getTxt=$("#txt_n").val();
var addContent=$("<input/>",{type:"text",value:getTxt});
$("#cnt_div").append(addContent);
});
Updated fiddle
change "+getTxt+" to '"+getTxt+"'
fiddle
OR
change "+getTxt+" to \""+getTxt+"\"
Heres a better way of doing this...
var addContent=$("<input type='textbox' />").val(getTxt);
http://jsfiddle.net/ZyMCk/9/
Basically, if creating an element to append to the DOM your better off doing this as a jQuery object. This way we can take advantage of methods such as val() for adding the value.
UPDATE
Ive simplified things a bit for you...
JSFIDDLE: http://jsfiddle.net/ZyMCk/22/
$("#clk").on('click', function () {
$('.dynmic_cntt').empty();
$('.form-text').each(function(){
var $div = $('<div style="float:left:width:100%;"></div>');
var $span = $('<span class="lbl_normal_mode">'+ $(this).val() +'</span><input class="txt_edit_mode" value="'+$(this).val() +'" type="text"/>');
$('.dynmic_cntt').append( $div.append( $span ) );
});
});
I want the variable inputname to go up by 1 every time a new <input /> is added
e.g.
<input name="1" />
<input name="2" />
<input name="3" />
---html---
<p class="add">Add</p>
<div class="added"></div>
---jQuery/javascript---
$(document).ready(function() {
$("p.add").click(function() {
var inputname = somevar;
var added = "<input type=\"text\" name=\""+inputname+"\" />";
$("div.added").append(added);
});
});
here it is on jsfiddle.net if it helps -> http://jsfiddle.net/gamepreneur/54kzw/
Set inputname like this:
var inputname = $('.added input').length + 1;
This gets the total number of added inputs and increments by one, resulting in the new name.
Change the variable scope
Use this:
// declare your variable here so it exists throughout every call, instead of being
// delcared new with every call.
var inputname = somevar;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type=\"text\" name=\""+(inputname++)+"\" />";
$("div.added").append(added);
});
});
Alternatives:
Grab the number of inputs ($('div.added input').length) and use that for a counter.
Grab the id of the last item $('div.added input:last').prop('name')) and increment it.
You need to declare inputname in the global scope so that it lasts longer than just the duration of the click function and then you need to increment it each time you use it.
I modified your fiddle to this: http://jsfiddle.net/jfriend00/54kzw/2/
var inputname = 1;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type='text' name='" + inputname++ + "' />";
$("div.added").append(added);
});
});
Try
$(document).ready(function() {
$("p.add").click(function() {
var inputname = $('input', $("div.added")).length + 1;
var added = "<input type=\"text\" name=\"" + inputname + "\" />";
$("div.added").append(added);
});
});
Consider adding some other selectors to choose those inputs (like a class selector)