I would like to use slideDown() with my appendTo()
here is my present code
$(document).ready(function() {
var scntDiv = $('#add_words');
var wordscount = 1;
$("#add_words").on("keyup","input[type='text']",function(e) {
if($(this).attr("data-isused")!="true"){
$(this).attr("data-isused","true");
wordscount++;
$('<div class="line">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>').appendTo(scntDiv);
// i++
return false;
}
});
});
'
<div id="add_words">
<div class="line">Word 1<input class="input1" type="text" value="1" /></div>
</div>
my question is that Is there any possibility to apply slideDown() with my code ?
Make sure the newly appended element is hidden first:
$(element).hide().appendTo(someOtherElement).slideDown();
If you make the following changes it should work:
$('<div class="line" style="display:none">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>').appendTo(scntDiv).slideDown();
This makes it initially hidden allowing you to slide it down.
I guess you mean that you want to add the HTML to the DOM with appendTo and then use slideDown to show the added content, right?
In that case you need to make sure that the content is hidden when you append it to the DOM:
var html = '<div class="line">Word ' + wordscount + '<input type="text" class="input' + wordscount + '" value="' + wordscount + '" /></div>';
$(html).hide().appendTo(scntDiv).slideDown();
Note Took the liberty to break all your HTML out into a variable for the sake of readability
Related
Can someone help me out in inserting an image in the below function. I've used a json object that returns values for campaignid and campaignname.
<script>function searchedCampaigns(data) {
if (data[0].length > 0) {
var searchcmp = "";
for (var j = 0; j < data[0].length; j++) {
var input = document.createElement("input");
console.log(input.name);
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '/>' +
**// image to be inserted here**
+ data[0][j].campaignName + '<br/>'; // value
}
$("#newcamp").html(searchcmp);
}}</script>
output should be this
I'm getting the checkbox as well as the campaign name. I want the image in between these two.
As simple as this..
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '/>' +
'<img src="'+yourimageurlfromdata+'"/>'+
'data[0][j].campaignName + '<br/>';
I suggest you a code like this one:
<input type="checkbox"><img src="Image.PNG">Test</img></input>
Also, based on your code, it can be updated like this:
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '><img src=' + YOUR_URL_LOCATION + ' />' + data[0][j].campaignName + '</input><br/>';
Where YOUR_URL_LOCATION, can be in the JSON or somewhere else.
It's going to display something like this:
Basically I've had a headache trying to solve this, I want to create a few controls with JS (using jquery) but I also want to add a remove button for them, my attempt is below:
html:
<div class=col-lg-6>
<h1>Pieces</h1>
<form method=post>
<div id=pieces></div>
<button class='btn btn-success' id=addpiece>Add Piece</button>
<button class='btn btn-primary'>Submit</button>
</form>
</div>
And the JS:
$(document).ready(function(){
var counter = 1;
$("#addpiece").click(function (e) {
$("#pieces").append('<label>Piece ' + counter + ': </label><br>' +
'<p id=added'+counter+'><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' +
'<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' +
counter + '" required>cm x ' +
'<input min=0 step=0.1 style=width:70px; type="number" name="height' +
counter + '" required>cm x ' +
'<input min=0 step=0.1 style=width:70px; type="number" name="length' +
counter + '" required>cm</div></div>' +
'<div class=row><div class=col-lg-2><label>Weight:</label></div>' +
'<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' +
counter + '" required>KG<br>' +
'<input type=hidden name=counter value=' +
counter + '><button class="btn btn-danger" id="remove' + counter + '">X</button>\<script type="text\/javascript"\>' +
'$("#remove' + counter + '").click(function (e) { $( "#added'+counter+'" ).remove(); return false; } \<\/script\>' +
'</div></div></p><br>');
counter++;
return false;
});
});
Check out my fiddle for clearer view:
http://jsfiddle.net/c1Lv7ska/
Since you are dynamically creating the remove button, use event delegation to register the remove handler.
Also it is better if you have a container element which will contain all the elements for a piece, like the one I added(<div class="piece">) to wrap all the elements.
$(document).ready(function () {
var counter = 1;
$("#addpiece").click(function (e) {
$("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
counter++;
return false;
});
$("#pieces").on('click', '.remove', function(){
$(this).closest('.piece').remove()
})
});
Also read
Event binding on dynamically created elements?
Demo: Fiddle
I am using jQuery Mobile to display a table.
However when i append a new row using addMore button, the display is off! Why is it so? it is suppose to follow the first row. Ans also, it is displayed in black theme on my browser... but it is suppose to be white as in the fiddle. why?
Here is my fiddle: http://jsfiddle.net/BgxKW/1/
this is the code to add new row
var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
'<td class="small">' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="number_' + currentIndex + '">Response Number</label>' +
'<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
'</div></td><td>' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="label_' + currentIndex + '">Description</label>' +
'<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
'</div></td></tr>';
Also, how can i remove the row?
You want to do $(".config").trigger("create"); at the final to resolve style problem.
Updated fiddle link is
http://jsfiddle.net/BgxKW/7/
$("#addMore").click(function () {
currentIndex = $(".config tr:last td:first").text()
if(currentIndex == ""){currentIndex = 0}
currentIndex = parseInt(currentIndex) + 1
var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
'<td class="small">' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="number_' + currentIndex + '">Response Number</label>' +
'<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
'</div></td><td>' +
'<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="label_' + currentIndex + '">Description</label>' +
'<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
'</div></td></tr>';
++currentIndex;
$('#labels .config tr:last').after(addmore);
$(".config").trigger("create");
});
$("#remove").click(function(){
$(".config tr:last").remove();
});
Note: I fixed the style problem and remove function.
I am currently working with an Image uploader(Source Files). I am having difficulties creating duplicate preview fields. I am creating the preview image form but it is only displaying one thumbnail. How can i get the Js to give me two thumbnails? Here is a LIVE EXAMPLE and further explanation to my source code
This what I initially want to do:
Snippet of JS for creating the preview Image forms(thumbnails)
upLoaderPreviewer.js
<script>
function createImageForm(index) {
var form = '';
form += '<div><table cellspacing="0">';
form += '<tr><td class="label">'
+ '<label for="imageToUpload' + index + '">'
+ $.uploaderPreviewer.messages.imageLabel + ' ' + index + ':</label></td>';
form += '<td class="removeImageButton">'
+ '</td>';
form += '<td class="imageFormFileField">'
// BUG: If the "enctype" attribute is assigned with jQuery, IE crashes
+ '<form enctype="multipart/form-data">'
+ '<input id="imageToUpload' + index + '" type="file" />'
+ '<input type="hidden" name="currentUploadedFilename"'
+ ' class="currentUploadedFilename" /></form>'
+ '</td></tr>';
form += '<tr><td></td><td></td><td>'
+ '<div class="previewImage" style="float:left; margin:10px 10px 10px 0; "><img /></div>'
+ '<button type="button" class="small removeImage"></td></td></tr></table></div>';
return form;
};
</script>
try this:
replace the function 'displayImage' on the uploaderpreviewer.js with this:
function displayImage($previewDiv, imageUrl) {
//New
var yourCustomPreview = $('#custompreview');
var imageFilename = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);
$previewDiv
.removeClass('loading')
.addClass('imageLoaded')
.find('img')
.attr('src', imageUrl)
.show();
$previewDiv
.parents('table:first')
.find('input:hidden.currentUploadedFilename')
.val(imageFilename)
.addClass('imageLoaded');
$previewDiv
.parents('table:first')
.find('button.removeImage')
.show();
//New
yourCustomPreview.prepend('<img src="' + imageUrl + '"/>');
}
and add this where you whant to duplicate the thumb:
<div id="custompreview">
</div>
In my web application I have created a form that will allow users to insert stories to an online newspaper.
In order to do this I have created a hidden table which I clone to allow users to create new stories which I later catch on the submit event of my form.
Here I am facing a problem regarding the contents of the story's text.
For example, if the story contains double quotes on it, it will break my string when creating a new element on the submit event, like so;
$("form").submit(function () {
var myForm = $(this);
// begin cover stories process
var stories = $("#newsBlock").find("table");
if (stories != undefined) {
stories.each(function (index) {
var cNew = new CoverNew($(this).find('[name="news_id"]').attr("value"), $(this).find('[name="editionDate"]').attr("value"), $(this).find('[name="newsTitle"]').attr("value"), $(this).find('[name="newsLink"]').attr("value"), $(this).find('[name="newsAuthor"]').attr("value"), $(this).find('[name="newsSource"]').attr("value"), $(this).find('[name="newsDescription"]').attr("value"), $(this).find('[name="newsImageListing"]').attr("value"), $(this).find('[name="newsImageStory"]').attr("value"), $(this).find('[name="newsImageStory_Author"]').attr("value"), $(this).find('[name="newsImageStory_Description"]').attr("value"), $(this).find('[name="newsVideo"]').attr("value"), $(this).find('[name="newsText"]').val(), $(this).find('[name="newsOrder"]').attr("value"));
var ids = '<input name="Cover[' + index + '].id" id="Cover[' + index + '].id" type="text" value ="' + cNew.id + '" style="display:none;" />';
var title = '<input name="Cover[' + index + '].title" id="Cover[' + index + '].title" type="text" value="' + cNew.title + '" style="display:none;" />';
var editionDate = '<input name="Cover[' + index + '].edition_date" id="Cover[' + index + '].edition_date" type="text" value="' + cNew.editionDate + '" style="display:none;" />';
var link = '<input name="Cover[' + index + '].link" id="Cover[' + index + '].link" type="text" value="' + cNew.link + '" style="display:none;" />';
var author = '<input name="Cover[' + index + '].author" id="Cover[' + index + '].author" type="text" value="' + cNew.author + '" style="display:none;" />';
var source = '<input name="Cover[' + index + '].source" id="Cover[' + index + '].source" type="text" value="' + cNew.source + '" style="display:none;" />';
var description = '<input name="Cover[' + index + '].description" id="Cover[' + index + '].description" type="text" value="' + cNew.description + '" style="display:none;" />';
var menuPicture = '<input name="Cover[' + index + '].photo_in_list" id="Cover[' + index + '].photo_in_list" type="text" value="' + cNew.menu_picture + '" style="display:none;" />';
var story_picture = '<input name="Cover[' + index + '].photo_in_news" id="Cover[' + index + '].photo_in_news" type="text" value="' + cNew.story_picture + '" style="display:none;" />';
var story_picture_description = '<input name="Cover[' + index + '].photo_in_news_desc" id="Cover[' + index + '].photo_in_news_desc" type="text" value="' + cNew.story_picture_description + '" style="display:none;" />';
var story_picture_author = '<input name="Cover[' + index + '].photo_in_news_author" id="Cover[' + index + '].photo_in_news_author" type="text" value="' + cNew.story_picture_author + '" style="display:none;" />';
var video = '<input name="Cover[' + index + '].video" id="Cover[' + index + '].video" type="text" value="' + cNew.video + '" style="display:none;" />';
var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content + '" style="display:none;" />';
var order = '<input name="Cover[' + index + '].order" id="Cover[' + index + '].order" type="text" value="' + cNew.order + '" style="display:none;" />';
myForm.append(ids);
myForm.append(title);
myForm.append(editionDate);
myForm.append(link);
myForm.append(author);
myForm.append(source);
myForm.append(description);
myForm.append(menuPicture);
myForm.append(story_picture);
myForm.append(story_picture_description);
myForm.append(story_picture_author);
myForm.append(video);
myForm.append(content);
myForm.append(order);
index++;
});
}
});
In the above process, I collect the tables cloned by the user which contain stories.
Inside the variable content I place the text of the story.
But by the way I am concatenating it, if the text contains a double quote, the string will be broken at that point.
Is there anything I could do with javascript (even pure javascript) to fix this problem?
Yes - do var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content.replace(/"/g, """) + '" style="display:none;" />';
Use string Replace, for example:
cNew.story_picture_description.replace(/"/g, """);
Another and cleaner way would be to copy the whole table with cloneNode und delete the values in the new table.
use the javascript function to replace the " with "
var content = content.replace(/"/g, """);
You should definetely make use of some template engine. Even simple jquery template or micro-template will work fine.
// Template engine, yea that easy
function templ(str, data) {
for (var p in data)
str = str.replace(new RegExp('{'+p+'}','g'), data[p]);
return str;
}
var cNew = new CoverNew(...);
cNew.index = index;
var story = templ($('#story-content').html(), cNew);
myForm.append(story);
And also place all your html into container:
<script type="text/template" id="story-content">
<input name="Cover[{index}].id" id="Cover[{index}].id" type="text" value ="{id}" style="display:none;" />
<input name="Cover[{index}].title" id="Cover[{index}].title" type="text" value="{title}" style="display:none;" />
...
</script>
Of course it's a little bit more complecated. But your code becomes more maintainable and clean.