Elements not appearing after emptying div and appending - javascript

I have a jquery function that on a click event empties a div, gets some json, and then appends to that cleared div. However, the check boxes I am trying to append to said div are not appearing. Here is my code:
$(function() {
$("#nwCol").click(function() {
$('#adDiv').empty();
$.getJSON('/_adv_detect_su', function(data) {
$(data.advanced).each(function(index, value) {
if (value.present === 'yes') {
$('#adDiv').append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
} else {
$('#adDiv').append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="adDiv"></div>
<div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
</form>
</div>
I have this working when not clearing the div, and using the .after function. However, this is not ideal.

If you are using any AD BLOCK Your div ID, starting with 'ad' will get #header_ads style from user agent browser, that set "display: none", so it appears to not work, even if it is working. As you can see here on this print screen http://storage1.static.itmages.com/i/17/0616/h_1497628218_1896684_0db84ac526.png
So I changed your div id to anotherID now it's working
Run the snippet below.
$(function() {
$("#nwCol").click(function() {
var anotherDiv = $('#anotherID');
anotherDiv.empty();
var data = {
advanced: [{present: 'yes', name: 'test1'}, {present: 'no', name: 'test2'}]
};
$(data.advanced).each(function(index, value) {
console.log(value);
if (value.present === 'yes') {
anotherDiv.append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
} else {
anotherDiv.append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="anotherID"></div>
<div id="saveao">
<button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button>
</div>
</form>
Test Click
</div>

Please see the snippet (looks like your button id selector was incorrect):
$(function() {
$("#svAoBtn").click(function() {
$('#adDiv').empty();
$.getJSON('https://api.myjson.com/bins/16qosb', function(data) {
$(data.advanced).each(function(index, value) {
var checkedInput = "";
if (value.present === 'yes') {
checkedInput = "checked='checked'";
}
$('#adDiv').append("<input name='aoCB' type='checkbox'" + checkedInput + ">" + value.name + "</input>");
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
<form id="advDet">
<div id="adDiv"></div>
<div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
</form>
</div>

Related

JQuery hide/show property is not working in my code

I have written code to upload multiple files by cloning input field in jquery.
Here the logic is; if #file_1 field is empty, the $('#addBtn').on('click', function () is supposed to go in else part of if condition and display the relevant hidden <p> tag. If first field is left empty, the add button (add more button) should not clone the field. Instead it should show a message to user to upload file in the first available field first and the click add button to upload more file. Here Jquery show()/hide function is not working.
Please have a look on my code, I'll be much obliged. Thank you!
console.log('objection page here');
var Index = 1;
// START CODE FOR BASIC DATA TABLE
$(document).ready(function () {
$('#addBtn').on('click', function () {
var uploadFieldVal = $('#file_'+ Index).val();
console.log(uploadFieldVal);
if(uploadFieldVal !="")
{
Index++;
var uFile = $('#file_1').clone();
//var id = "btnAdd_" + Index;
var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_" + Index + "'class='form-control'/> ; " +
"<p id='fileMsg_" + Index + "style='visibility: hidden; color: red'>Please attach file here first </p>;"
$('#fileDiv').append(fileItem);
}
else
{
console.log('fileMsg_'+Index);
$('#fileMsg_'+Index).show();
//$('#fileMsg_1).show(); //its also not working
}
});
});
<button class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i>
</button>
<div class="form-group" id="fileDiv">
<label for="file_1">File</label>
<input type="file" name="fileUpload[file][]" id="file_1" class="form-control"/>
<p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
.show() does not work on CSS for visibility.
The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
$(function() {
console.log('objection page here');
var Index = 1;
$('#addBtn').on('click', function() {
var uploadFieldVal = $('#file_' + Index).val();
console.log(uploadFieldVal);
if (uploadFieldVal != "") {
Index++;
var uFile = $('#file_1').clone();
var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_" + Index + "' class='form-control'/> ; ";
fileItem += "<p id='fileMsg_" + Index + "' style='visibility: hidden; color: red'>Please attach file here first </p>;"
$('#fileDiv').append(fileItem);
} else {
console.log('fileMsg_' + Index);
$('#fileMsg_' + Index).css("visibility", "visible");
}
});
});
<button class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i></button>
<div class="form-group" id="fileDiv">
<label for="file_1">File</label>
<input type="file" name="fileUpload[file][]" id="file_1" class="form-control" />
<p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
You need to change visibility to visible to "show" it.
See More: https://api.jquery.com/show/

jQuery UI draggable doesn't work on created element

Draggable function works on other already created elements, but not on the one i'm creating within a function after submit button.
I've checked if i'm adding an id to 'li' elements and it works, so why can't I drag it?
It works when I use it on whole 'ul' element.
HTML:
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div id='drag'>" + query + "</div>"
$("#list").append(registry)
$("#entry").val("");
return false; //also stops refreshing
console.log(registry);
}
})
$("#drag").draggable({
axis: "y"
});
You can only use an id once, so I would suggest that you use class for that. Furthermore, you should add the draggable to the element after creation, as Ferhat BAŞ has said.
https://jsfiddle.net/exqn1aoc/2/
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div class='drag'>" + query + "</div>"
$("#list").append(registry);
$('#list').children().last().draggable();
$("#entry").val("");
return false; //also stops refreshing
console.log(registry);
}
});
Just use class instead of id for multi pal created item to drag and put your draggable inside button click.
$("#entryButton").click(function() {
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div id='drag' class='drag'>" + query + "</div>"
$("#list").append(registry)
$("#entry").val("");
$(".drag").draggable({
axis: "y"
});
return false; //also stops refreshing
console.log(registry);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>
First you need to put the draggable() function inside your click function.
Second, do not use id . Duplicate id's are not valid HTML and that's what causing only the first #drag to be draggable. Use class instead
See snippet below
$("#entryButton").click(function() {
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div class='drag'>" + query + "</div>"
$("#list").append(registry)
$("#entry").val("");
$(".drag").draggable()
return false; //also stops refreshing
console.log(registry);
}
})
.drag {
height: 100px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>

Showing and hiding contents in a div

There is 4 "READ MORE" button.Clicking on each button shows its content in same div. Clicking twice should hide the content.But clicking on one button and then on next button should show the data of second button.How could I do this?
I tried using javascript,checking if content inside div is empty on button click.if empty show the data and if not document.getElementById("display_message").innerHTML="";
Notification Message:
<input type="button" class="btn btn-default" value="READ MORE" onclick="displayNotificationMessage();">
Verification Message
<input type="button" class="btn btn-default" value="READ MORE" onclick="displayVerificationMessage();">
<div class="container" id="display_message" >
</div>
<script>
function displayNotificationMessage()
{
var data="abcde";
var msg=document.getElementById("display_message").innerHTML;
if(msg!="")
{
document.getElementById("display_message").innerHTML="";
}
else
{
document.getElementById("display_message").innerHTML=data;
}
}
function displayVerificationMessage()
{
var data="bbjkhkjhkjlk";
var msg=document.getElementById("display_message").innerHTML;
if(msg!="")
{
document.getElementById("display_message").innerHTML="";
}
else
{
document.getElementById("display_message").innerHTML=data;
}
}
</script>
But clicking on one button and clicking on next button will not show contents.
How to do this?
Say you have, div with all texts div#content. In that div you place 4 divs, with separate texts, alle with class .sub-content and proper data attributes.
<div id="content">
<div class="sub-content" data-id="b1">Some text 1<div>
<div class="sub-content" data-id="b2">Some text 2<div>
<div class="sub-content" data-id="b3">Some text 3<div>
<div class="sub-content" data-id="b4">Some text 4<div>
</div>
and
<button id="b1">Button1<button>
<button id="b2">Button1<button>
<button id="b3">Button1<button>
<button id="b4">Button1<button>
Then it is as simple as.
$('button').click( function () {
if ( $('.sub-content[data-id=' + $(this).attr("id") + ']').css("display") == "hidden" ) {
$('.sub-content').hide();
$('.sub-content[data-id=' + $(this).attr("id") + ']').show();
} else {
$('.sub-content[data-id=' + $(this).attr("id") + ']').hide();
}
});

How to put a button active by default?

thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.

Replace div after form submit Jquery

I've created a form that when a user submits, the form the #search div is replaced by the #loading div that shows a loading image. So far it works fine.
The problem I have now is that I want the #loading div to be replaced by the #results 10 seconds after the #loading div is shown.
Can someone please help with the last few lines of code?
Here it is so far:
<div id="search">
<div id="search-area">
<h1>Heading Here</h1>
<form id="target" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="text" value="http://"/>
<input type="submit" value="Analyze"/>
<div class="clearfix"></div>
</form>
</div>
<div class="clearfix"></div>
</div>
<script>
$( "#target" ).submit(function( event ) {
$("#search").slideUp("slow", function() {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
});
$("#loading").delay(10000).slideUp("slow", function(){
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
event.preventDefault();
});
</script>
$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'><img src='/images/loading.gif'/></div>");
});
setTimeout(function () {
$("#loading").slideUp("slow", function () {
$(this).replaceWith("<div id='done'>Done!</div>");
});
}, 10000);
event.preventDefault();
});
The loading div is not available until after the first animation finishes, the second animation needs to be inside the callback:
$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
$("#loading").delay(10000).slideUp("slow", function () {
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
})
event.preventDefault();
});
DEMO

Categories

Resources