Can't fadeOut div element with AJAX - mysql

I can't understand why I can't fade out div element. I'm trying to delete mysql entry, delete function working fine when I reload a page entry dissapears, but I need that entry dissapear without page refresh. tried to creat new empty div and fade out it after entry deletion, worked fine.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[id^='delete']").click(function() {
var numrow = $(this).attr("id");
numrow = numrow.substr(6);
var eil = 'id=' + numrow;
$.ajax({
type: 'POST',
url: 'trinti.php',
data: eil,
success: function() {
numrowas = "#d"+numrow;
$(numrowas).fadeOut();
}
});
});
});
</script>
<?php
require_once('db.php');
if (isset($_GET['list'])) {
$query = "SELECT * FROM zinutes";
mysql_query("SET NAMES 'UTF8'");
$uzklausa=mysql_query($query);
$i = 1;
while($lauk = mysql_fetch_array($uzklausa)){
$r = $lauk['id'];
echo '<div id="d$r">'.$i++.'. Name: '.$lauk['name'].' Message: '.$lauk['message'].' Delete</div>';
}
}
?>

try to do the fading from complete: block.
$.ajax({
type: 'POST',
url: 'trinti.php',
data: eil,
success: function() {
}
complete: function() {
numrowas = "#d"+numrow;
$(numrowas).fadeOut();
}
});

Related

in bootstrap popovers, how to obtain content from the results of a function

Maybe I'm not used to using functions, but I'm having trouble getting bootstrap popovers to return a string derived from a function. Can anyone help please?
$(".person").popover({
title: 'Default title value',
trigger: 'hover',
html: true,
content: function(){
var thisID = $(this).attr('id');
$.ajax({
type: 'GET',
url: "people.xml",
dataType: "xml",
success: function(xml) {
var xmlID = $(xml).find("id");
$(xmlID).each(function(id, item) {
if ($(item).text() == thisID) {
console.log($(item).parent().find('name').text()); //this is the correct name
return $(item).parent().find('name').text(); //but nothing appears in the popover content
}
});
}
});
}
});
I abandoned the idea of using xml and just used arrays instead:
$(".person").popover({
title: function(){
var thisID = $(this).attr('id');console.log(thisID);
thisID = thisID.replace("num","");console.log(thisID);
return arrNames[thisID];
},
trigger: 'hover',
html: true,
content: function(){
var thisID = $(this).attr('id');
thisID = thisID.replace("num","");
return arrTitles[thisID];
}
});

how to display data from database into an option tag html?

any one can help me with this?
i want to displaying my database data into a option tag but it not showing anything. i have try to make a code for that but that code not work to display my data into html option tag. someone please help me to solve my problem.
this is my code that i make
// JavaScript Document
// for make the option tag
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
});
// for call the data from my database
$(document).on('click','#nama_check',function(e){
$.ajax({
type:"POST",
url:"../php/absen/absen_karyawan_autocomplete.php",
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
$('#chkveg').val((list[i]['bagian']));
}
return false;
}
});
});
<script src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1" method="post">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
</select>
</div>
</form>
You have two issues here. Firstly to add values to the select you need to append new option elements to it, not repeatedly set the val(). Secondly, you should call multiselect() after the options have been added.
Also note that you can place all code within a single document.ready handler. Try this:
$(function() {
$(document).on('click','#nama_check',function(e){
$.ajax({
type: "POST",
url: "../php/absen/absen_karyawan_autocomplete.php",
dataType: 'json',
success: function(data) {
var html = '';
for(var i = 0; i < data.length; i++) {
html += '<option>' + data[i]['bagian'] + '</option>';
}
$('#chkveg').html(html).multiselect({
includeSelectAllOption: true
});
}
});
});
});
Use .append().
Try to check this documentataion: http://api.jquery.com/append/
dataType: 'json',
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
$('#chkveg').append($('<option>'+ list[i]['bagian'] +'</option>'));
}
return false;
}

Ajax call - Which button pressed?

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
txtname=$("#btn1").val();
$.ajax({url:"doSome.php",data:{name:txtname},success: function(ajaxresult){
$("#ajaxrequest").html(ajaxresult);
}});
});
});
</script>
</head>
<body>
<button id="btn1" value="myButton">Click to send1</button>
<button id="btn2" value="myButton2">Click to send2</button>
<div id="ajaxrequest"></div>
</body>
</html>
How can I recognize which button pressed in line: $("#btn1").click(function(){
without having to write again the same code for btn2?
You can use a selector on all buttons and then get back the ID when clicked
$('button').click(function()
{
alert( $(this).attr('id') ); // Button ID clicked
});
You can use
$( '#btn1' ).click(function(){
submitForm( 'btnOne' );
});
$( '#btn2' ).click(function(){
submitForm( 'btnTwo' );
});
And then pass your parameter in a single function:
function submitForm( type ){
var dataString = $('#form_confirm_delete').serialize();
dataString += "&type=" + type;
$.ajax({
type: "POST",
url: "doSome.php",
data: dataString,
dataType: 'json',
cache: false,
success: (function(response)
{
alert('Yes');
})
});
}
Actually, simply use multiple selectors:
$('#btn1, #btn2').click(function(e) {
var btn1Clicked = $(this).is('#btn1');
var btn2Clicked = $(this).is('#btn2');
});

Google Maps info window not displaying on first mouse over

I have a Google map that pulls data from a database. Everything works like it's supposed to, except for the info window that pops up when you mouse over a certain point on the map (this point is part of a set that gets pulled from a database. So there can be any number of points at any given stage).
My code looks like this:
function getwindow(id) {
if(infowindows[id] == null || infowindows[id] == '') {
$.ajax({
url: "view/"+id,
type: "post",
async: true,
beforeSend: function() {
},
success: function(data) {
data = JSON.parse(data);
if(data.success) {
infowindows[id] = '<b>Info For: </b>' + data.Clinic.official_clinic_name + '<br/>' +
'{{image}}<br/>' +
'Tel: ' + data.Clinic.telephone;
} else {
alert('error');
}
}
});
}
}
var infowindow = new google.maps.InfoWindow({
content: ''
});
<?php foreach($jsdata as $data) : ?>
infowindows[<?php echo $data['id'];?>] = '';
google.maps.event.addListener(marker_<?php echo $data['id'];?>, 'mouseover', function() {
getwindow(<?php echo $data['id'];?>);
infowindow.setContent(infowindows[<?php echo $data['id'];?>]);
infowindow.open(map,marker_<?php echo $data['id']?>);
});
google.maps.event.addListener(marker_<?php echo $data['id'];?>, 'mouseout', function() {
infowindow.close();
});
<?php endforeach; ?>
The issue I'm having is that the popup info window does not display the first time. If I hover over it a second time, it works perfectly. How do I make it so it shows up the first time?
Because of asynchronous $.ajax call infoWindow content is not available at the time of the first mouseover event. You have to move definition of event handler into success: part of code.

Stop a recursive AJAX call on a button click and start it again on a button click

I am calling ajax after each 5 secs to update my data and I need to stop that call when a button is clicked.
My ajax function is:
function get_text(){
var text = $.ajax({
type: "POST",
url: "getIt.php",
async: false
}).complete(function(){
setTimeout(function(){get_text();}, 5000);
}).responseText;
$('#editor_Content').html(text);
}
this function is called at
$(document).ready(function(){
new get_text();
}
I need to stop this call when a button is clicked and start this call again when the same button is clicked again. Any suggestions?
My button click code is
function editit(){
var myVar = document.getElementById("editor_Content").getAttribute("contenteditable");
if(myVar=='true'){
document.getElementById("editor_Content").setAttribute("contenteditable", "false");
document.getElementById("editbtn").setAttribute("value","Edit Text");
} else{
document.getElementById("editbtn").setAttribute("value","Done Editing");
document.getElementById("editor_Content").setAttribute("contenteditable", "true");
}
}
You need to save the result of setTimeout and use it in a call to the clearTimeout function like so:
function get_text(){
var text = $.ajax({
type: "POST",
url: "getIt.php",
async: false
}).complete(function(){
window.getTextTimeoutId = setTimeout(function(){get_text();}, 5000);
}).responseText;
$('#editor_Content').html(text);
}
$(document).ready(function(){
get_text();
}
function editit(){
var myVar = document.getElementById("editor_Content").getAttribute("contenteditable");
if(myVar=='true'){
if(window.getTextTimeoutId){
window.clearTimeout(window.getTextTimeoutId)
window.getTextTimeoutId = null;
}
document.getElementById("editor_Content").setAttribute("contenteditable", "false");
document.getElementById("editbtn").setAttribute("value","Edit Text");
} else{
document.getElementById("editbtn").setAttribute("value","Done Editing");
document.getElementById("editor_Content").setAttribute("contenteditable", "true");
if(!window.getTextIntervalId) //edited for not to create another call. fixed!
window.getTextTimeoutId = setTimeout(get_text, 0);
}
}
But for your purposes I think setInterval and clearInterval would work better. Here is what your new code would look like:
function get_text(){
var text = $.ajax({
type: "POST",
url: "getIt.php",
async: false
}).responseText;
$('#editor_Content').html(text);
}
$(document).ready(function(){
window.getTextIntervalId = window.setInterval(get_text, 5000);
}
function editit(){
var myVar = document.getElementById("editor_Content").getAttribute("contenteditable");
if(myVar=='true'){
if(window.getTextIntervalId){
window.clearInterval(window.getTextIntervalId)
window.getTextIntervalId = null;
}
document.getElementById("editor_Content").setAttribute("contenteditable", "false");
document.getElementById("editbtn").setAttribute("value","Edit Text");
} else{
document.getElementById("editbtn").setAttribute("value","Done Editing");
document.getElementById("editor_Content").setAttribute("contenteditable", "true");
if(!window.getTextIntervalId) //edited for not to create another call. fixed!
window.getTextIntervalId = setInterval(get_text, 5000);
}
}