Replace div after form submit Jquery - javascript

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

Related

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>

Elements not appearing after emptying div and appending

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>

how remove the text box one bye one in button click

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<div id="plusicondivbox"class="insidediv " style="margin-top:-53px;" >
<img class="mynasicondiv" src="vectorimages/mynas.svg" />
JS
$(function () {
$('.plusicon').on('click', function () {
var textBox = '<input type="text" class="textbox"/>';
var a = $(this).attr("id")
$('#'+a+"box").append(textBox);
var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>';
$('#' + a + "box").append(img);
$(function () {
$(document).on("click", ".mynasicondiv", function () {
$(this).parent('#' + a + "box").empty();
return
})
});
});
I have two buttons, plusicon button and mynesicon button. I want click the plusicon button add the textbox and image,also clicking the mynessicon button should remove the textboxs and images. My problem is that clicking the mynesicon corresponding textbox is only removing.
Use .each to remove all the elements and in order to remove use the .remove function on the targeted element.
$(function () {
var a;
$('.plusicon').on('click', function () {
var textBox = '<input type="text" class="textbox"/>';
a = $(this).attr("id")
console.log(a);
$('#'+a+"box").append(textBox);
var img = '<img class="mynasicondiv" src="vectorimages/mynas.svg"></img>';
$('#' + a + "box").append(img);
});
$('.mynasicondiv').on("click", function () {
$('#' + a + "box").each(function(index, v){
$(v).remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div><img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" /></div>
<div><img class="mynasicondiv" src="vectorimages/mynas.svg" /> </div>
<div id="plusicondivbox"class="insidediv " ></div>
</div>

How to hide div onclick and show onclick using jquery

I'm integrating a search suggest function in a oscommerce script. The function is working properly, but I need to create a div hide onclick and shown on input click using Jquery (with animation speed) since when i start typing the div appears but cannot be hidden (I have to refresh the web page to remove the search suggest div)
The events will be created under this div:
<div id="smartsuggest"></div>
Here is my code:
$data = '<div class="search">'."\n".
tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get', 'id="frmSearch"')."\n".// ' <label class="fl_left">'.MODULE_BOXES_SEARCH_HEADER_BOX_TITLE.': </label>' ."\n".
' '.tep_draw_button_search_top().tep_draw_button(MODULE_BOXES_SEARCH_HEADER_BOX_TITLE).tep_draw_button_search_bottom()."\n".
' <div class="input-width">'."\n".
' <div class="width-setter">'."\n".
tep_draw_input_field('keywords', MODULE_BOXES_SEARCH_HEADER_BOX_INPUT, 'id="txtSearch" onkeyup="searchSuggest(event);" autocomplete="off" size="10" maxlength="300" class="go fl_left" onblur="if(this.value==\'\') this.value=\''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'\'" onfocus="if(this.value ==\''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'\' ) this.value=\'\'"').''.tep_hide_session_id()."\n".
' </div>'."\n".
' <div id="smartsuggest" ></div> '.
' </div>'."\n".'</form>'."\n".
'</div>
<script type="text/javascript">
$(function(){
var mq = window.matchMedia( "(max-width: 480px)" );
if((mq.matches)) {
$(".input-width").click(function() {
$(this).animate({right: "0", width: "125px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "125px"}, 500);
});
}else{
$(".input-width").click(function() {
$(this).animate({right: "0", width: "360px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "190px"}, 500);
});
}
});
</script>
'."\n";
// MOD: BOF - SmartSuggest
if (SMARTSUGGEST_ENABLED != 'false') {
require(DIR_WS_CLASSES.'smartsuggest.php');
$smartsuggest = new smartsuggest();
$smartsuggest->output($data);
}
// MOD: EOF - SmartSuggest
By using Jquery hide() and show() methods you can do this..Try ...)
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

please give me the solution of this jquery

When I click on this link, nothing happens. What is the problem?
This is my jQuery:
$(document).ready(function () {
$(".link").click(function () {
var status = $(".link input[name=status]").val();
if (status == "delete") {
alert("it works.");
}
});
});
This is my html code:
<a href='#' class='link'>
<input name='status' value='delete' type='hidden'/>alert me!!
</a>
No issue found in you code. I just added jQuery and this code is working and showing alert.
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$(".link").click(function(){
var status=$(".link input[name=status]").val();
if( status=="delete" ) {
alert("it works.");
}
});
});
</script>
<a href='#' class='link'><input name='status' value='delete' type='hidden'/>alert me!!</a>

Categories

Resources