How to close the box if click anywhere?

How to close the box if click anywhere? - javascript

I have an code that the function is autosuggestion. This code works good. And I just want to ask You about how to close the box after I input text in the textbox. In my code when I try to click anywhere, it didn't close the box. So what I want to do is when I click anywhere so the box must be close.
Here is my jQuery:
$(document).ready(function() {
$(".text_search").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword=' + searchbox;
if (searchbox == '') {} else {
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
}
return false;
});
});
HTML:
<div class="search">
<form method="get" action="search.php" autocomplete="off">
<input class="text_search" type="text" name="q" id="q" value="Search people" onfocus="if (this.value == 'Search people') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search people';}">
</form>
</div>
<div id="display">
</div>

Just add a event handler on the document body and close the box if it's open. Put that at the end of your body :
<script>
$(window).ready(function(){
$('body').click(function(){
$("#display").hide();
});
});
</script>
EDIT :
If you want also to have the search launched again when you click the search box, change your script to this :
$(document).ready(function() {
var launchSearch = function() {
var searchbox = $(this).val();
var dataString = 'searchword=' + searchbox;
if (searchbox == '') {} else {
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html) {
$("#display").html(html).show();
}
});
}
return false;
};
$(".text_search").keyup(launchSearch).click(launchSearch);
$('body').click(function(){
$("#display").hide();
});
});

Try this:
$('body').click(function(){
$("#display").hide();
});

$(document).click(function(e) {
if($(e.target).parents("#display").length == 0 &&
$(e.target).attr("id") != "display") {
$("#display").hide();
}
});
You must check if click is not in display div

Try this
$(document).ready(function(){
$('body').click(function(){
$("#display").hide();
});
$(".text_search").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false;
});
});

Related

submit button is not working on first click

I have a submit button inside a form like-
jQuery(document).ready(function() {
$("#VEGAS").submit(function() {
$('#One').click(function() {
var form_data = $("#VEGAS").serialize();
var routeUrl = "<?= url('/') ?>/vpage";
$.ajax({
url: routeUrl,
type: "POST",
data: form_data + '&jegy=' + test,
success: function(result) {
$('#alert').html('successfully added!');
$('#msg-group').delay(1000).hide('slow');
}
});
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="One" type="submit" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button>
Every thing is working fine but above button is not working on first click. How can i get rid of this issue ?

$('#One').click(function(){...})
should be registered in
jQuery(document).ready(function () {...})
as
jQuery(document).ready(function () {
$('#One').click(function(){...})
});
since, in your code you are registering the $('#One').click() in $("#VEGAS").submit() therefore the $('#One').click() is registered when the $("#VEGAS").submit() gets called for the first time. Hence, in the first attemp this doesn't works but works in the second attempt.

Try this: you are binding click event handler for one button inside form submit hence it is binding click event handler on first click and on second click it is calling click handler.
You can remove click event for button and use below jquery code
HTML:
<button id="One" type="submt" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button>
jQuery:
jQuery(document).ready(function () {
$('#VEGAS').on("click",function (event) {
event.preventDefault();
var form_data = $("#VEGAS").serialize();
var routeUrl = "<?= url('/') ?>/vpage";
$.ajax({
url: routeUrl,
type: "POST",
data: form_data + '&jegy=' + test,
success: function (result) {
$('#alert').html('successfully added!');
$('#msg-group').delay(1000).hide('slow');
}
});
});

Inside submit() the .click() is unnecessary:-
Remove $('#One').click(function () {
Use either one (either .submit() or .click())
So:-
Either
<script>
jQuery(document).ready(function () {
$("#VEGAS").submit(function (e) {
e.preventDefault();
var form_data = $("#VEGAS").serialize();
var routeUrl = "<?= url('/') ?>/vpage";
$.ajax({
url: routeUrl,
type: "POST",
data: form_data + '&jegy=' + test,
success: function (result) {
$('#alert').html('successfully added!');
$('#msg-group').delay(1000).hide('slow');
}
});
return false;
});
});//missed in your code
</script>
Or
<script>
jQuery(document).ready(function () {
$('#One').click(function (e) {
e.preventDefault();
var form_data = $("#VEGAS").serialize();
var routeUrl = "<?= url('/') ?>/vpage";
$.ajax({
url: routeUrl,
type: "POST",
data: form_data + '&jegy=' + test,
success: function (result) {
$('#alert').html('successfully added!');
$('#msg-group').delay(1000).hide('slow');
}
});
});
return false;
}); //missed in your code
</script>
Note:-
if you have multiple id which are same then it's completely wrong. either covert them to class or give different id to each-one
Check your browser developer console to see all errors which are raised and rectify all of those

var routeUrl = "<?= url('/') ?>/vpage";
Here is the error. use static path here.
<script>
$(document).ready(function () {
$("#VEGAS").submit(function () {
var form_data = $("#VEGAS").serialize();
var routeUrl = "vpage";
$.ajax({
url: routeUrl,
type: "POST",
data: form_data + '&jegy=' + test,
success: function (result) {
$('#alert').html('successfully added!');
$('#msg-group').delay(1000).hide('slow');
}
});
return false;
});
});
</script>

Add one or two more PHP variables to the javascript code

I am a decent PHP programer and recently I got stuck in a javascript code.
I have the code below:
$(function () {
$('.more').live("click", function () {
var ID = $(this).attr("id");
if (ID) {
$("#more" + ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: "lastmsg=" + ID,
cache: false,
success: function (html) {
$("div#updates").append(html);
$("#more" + ID).remove();
}
});
} else {
$(".morebox").html('The End');
}
return false;
});
});
This code submit without problems one PHP variable to the process page loadmore.php using this input
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
<a href="#" class="more" id="<?php echo $load_id; ?>">
load more
</a>
</div>
How can put more variables in the input and the javascript code to work with them on the process page?
I want to set one or two more variables.
UPDATE:
I updated the code like this:
HTML input:
<div id="more<?= $load_id ?>" class="morebox" style="margin-bottom: 200px;">
load more</div>
JAVASCRIPT CODE:
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: {"lastmsg="+ ID, "act="+ ACT},
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>
I am not sure if the data lines was writed properly because the script looks like it's frozen now
SOLVED:
I just used a datastring like this
<script type="text/javascript">
$(function() {
$('.more').live("click",function()
{
var ID = $(this).attr("data-id");
var ACT = $(this).attr("data-act");
var dataString = 'lastmsg='+ ID + '&act=' + ACT;
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "scripts/loadmore.php",
data: dataString,
//data: {"lastmsg="+ ID, "act="+ ACT },
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
$(".morebox").html('The End');
}
return false;
});
});
</script>

Just send data as an object:
data: {
"lastmsg": "lastmsg="+ ID,
"anotherData": "someData"
}
You'll retrieve them in your PHP script as follows:
$_POST["lastmsg"];
$_POST["anotherData"];

loading div not working on jquery

my html:
<span id="loading"><img src="ajax-loader.gif" /> Please Wait</span>
#loading{display:none;}
my js:
var Progressajax = false;
$(function() {
$(".commentmoreview").click(function(){
if(Progressajax) return;
Progressajax = true;
var element = $(this);
var id = element.attr("id");
$('#loading').show();
var value = $('.pagecont'+id).val();
var info = 'id='+id+'&pagecont='+value;
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
success: function(data){
$('#loading').hide();
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});
});
});
what is wrong that loading span is not working?
thank you friends!

The best way to show loader image while making ajax calls is using Ajax Global Events
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});

can you change
$('#loading').show();
to
$('#loading').attr("display","block");
and try to use it like this
$.ajax({
type: "POST",
url: "php-comments/php/loadmorecomments.php",
data: info,
beforeSend: function(){
$('#loading').attr("display","block");
},
success: function(data){
$('#loading').attr("display","none");
Progressajax = false;
value = parseInt(value)+parseInt(5);
$('.pagecont'+id).val(value);
$(data).hide().prependTo('#loadmorecomments'+id).fadeIn(1000);
//$('#loadmorecomments'+id).prepend(data);
}
});

auto submit form to a url if textfield is not empty

I'm trying to auto submit a form when the username column is not null. i've got my script down there but since i'm new to jquery, i've got it missed up and its not working
$(function() {
var $username = $('#username'),
if ($username != null){
$("#form1").submit,function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "http://mysample.com/ans.php",
data: data,
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
});
});

Try to use on change listener, like
$(document).on('change', '#input_id', function(e) {
$('form_selector').submit();
});
$(document).on('submit', 'form_selector', function(e) {
//Your ajax submit logic
});

If you want to do an AJAX submission, just call $.ajax in the if:
$(function() {
var $username = $("#username").val();
if ($username != '') {
$.ajax({
type: "POST",
url: "/ans.php",
data: $("#form1").serialize(),
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
}
});
You don't need to define a $("#form1").submit() handler for this.

Issue with newElements function

I have a vote function in one of my projects. Please see following code.
$(function () {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
and I'm using jQuery infinite scroll to load rest of the pages/posts. I'm using following code in main page and second page which i load rest of the data
('#left').infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.post-box', //
}, function (newElements, data, url) {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
Issue is after 2nd 3rd or any other page load, vote function is triggering twice. How can I fix this issue. Any help will be appreciated.

Maybe if you unbind the click event and then bind it
function(newElements, data, url){
$(".vote").unbind( "click" );
$(".vote").click(function() {

You need to unbind the click event before binding it again.
[...]
$(".vote").unbind('click').click(function()
[...]
or
[...]
$(".vote").off('click').click(function()
[..]
depending on the version of jQuery you are using.

Develop Reference

JavaScript is the programming language of the Web.

How to close the box if click anywhere? - javascript

Try this: $('body').click(function(){ $("#display").hide(); });

$(document).click(function(e) { if($(e.target).parents("#display").length == 0 && $(e.target).attr("id") != "display") { $("#display").hide(); } }); You must check if click is not in display div

Related

submit button is not working on first click

Add one or two more PHP variables to the javascript code

loading div not working on jquery

auto submit form to a url if textfield is not empty

Issue with newElements function

Categories

Resources