As you can see here when you click a 'METAR' button one after the other, the previous button reappears when the next one is clicked.
However, when you click the 'Total Users Online on VATSIM' button, followed by one of the 'METAR' buttons, the 'Total Users Online on VATSIM' button does not reappear.
My code is located in this Pastebin.
The JavaScript for the 'Total Users Online on VATSIM' button is as follows:
<script type="text/javascript">
$(document).ready(function() {
var userButtons = $('.getUserButtons');
userButtons.click(function(){
var clickedButton = $(this);
$.ajax({
type: "POST",
url: "/online.php",
dataType: 'html',
success: function(data) {
$('#outputDiv').hide('slow', function() {
$(this).remove();
});
userButtons.show('slow');
var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
outputElement.hide();
outputElement.insertAfter(clickedButton);
clickedButton.hide('slow', function() {
outputElement.show('slow');
});
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
</script>
The code for the button itself is as follows:
<li><button style="height: 40px;" class="btn btn-primary getUserButtons hvr-float-shadow">Total Users Online on VATSIM</button></li>
Any assistance would be appreciated. I think I need to edit the code so that clicking one of the 'METAR' buttons then tells the 'Total Users Online on VATSIM' to reappear; I don't know how though.
Thanks!
add getMetarButtons class to Total Users Online on VATSIM as well
Finally fixed the issue. Here it is:
script type="text/javascript">
$(document).ready(function() {
var metarButtons = $('.getMetarButtons');
var userButtons = $('.getUserButtons');
metarButtons.click(function(){
var clickedButton = $(this);
$.ajax({
type: "POST",
url: "metarData.php",
data: { location: clickedButton.attr('data-location') },
dataType: 'json',
success: function(data) {
$('.metarOutput').hide('slow', function() {
$(this).remove();
});
$('#outputDiv').hide('slow', function() {
$(this).remove();
});
metarButtons.show('slow');
userButtons.show('slow');
var outputElement = $('<div id="outputDiv"' + data['location'] + ' style="color: white;" class="metarOutput">' + data['metar'] + '</div>');
outputElement.hide();
outputElement.insertAfter(clickedButton);
clickedButton.hide('slow', function() {
outputElement.show('slow');
});
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var metarButtons = $('.getMetarButtons');
var userButtons = $('.getUserButtons');
userButtons.click(function(){
var clickedButton = $(this);
$.ajax({
type: "POST",
url: "online.php",
dataType: 'html',
success: function(data) {
$('.metarOutput').hide('slow', function() {
$(this).remove();
});
$('#outputDiv').hide('slow', function() {
$(this).remove();
});
metarButtons.show('slow');
userButtons.show('slow');
var outputElement = $('<div id="outputDiv" style="color: white;">' + data + '</div>');
outputElement.hide();
outputElement.insertAfter(clickedButton);
clickedButton.hide('slow', function() {
outputElement.show('slow');
});
},
error: function(jqXHR) {
alert(jqXHR.responseText);
}
});
});
});
</script>
Related
I am appending a button to a row when adding via Ajax and PHP:
var addHistory = function()
{
var patient_medication = $("#patient_medicationn").val();
var disease = $("#disease option:selected").text();
var patient_side_effect = $("#patient_side_effect").val();
var pid = $("#pid").val();
var elem = '<button type="button" class="btn btn-danger btn-sm"
id="delete_disease" name="delete_disease"><i class="fa fa-remove"></i>
</button>';
$.ajax({
url: '../php/history.php',
data: {pid: pid, patient_medication: patient_medication, disease:
disease, patient_side_effect: patient_side_effect},
type: 'POST',
dataType: 'TEXT',
success:function(resp)
{
console.log(resp)
$("#after_th").after("<tr id='resp'><td>"+disease+"</td><td>"+patient_medication+"</td><td>"
+patient_side_effect+"</td><td>"+elem+"</td></tr>")
},
error:function(resp)
{
console.log(resp)
}
})
}
And on click:
$(document).ready(function()
{
$("#add_history").on('click', addHistory);
});
In my php file:
$addHistory = "INSERT INTO history(patient_medication, patient_side_effect, disease, patient_id, clinic_id)
VALUES(:patient_medication, :patient_side_effect, :disease, :patient_id, :clinic_id)";
$ExecAddHistory = $conn->prepare($addHistory);
$ExecAddHistory->bindValue(':patient_medication', $patient_medication);
$ExecAddHistory->bindValue(':patient_side_effect', $patient_side_effect);
$ExecAddHistory->bindValue(':disease', $disease);
$ExecAddHistory->bindValue(':patient_id', $pid);
$ExecAddHistory->bindValue(':clinic_id', $clinic_id);
$ExecAddHistory->execute();
$lastId = $ExecAddHistory->lastInsertId();
echo $lastId;
I am echoeing the last insert ID so I can append it to the newly added <tr> and then if directly the user clicked on the remove button, to delete directly if a mistake happened while adding the history.
Now everything working properly and the new row is appending, but it's remove button does not work at all.
The remove button of already existing rows works fine:
$("#delete_disease ").on('click', function()
{
var elem = $(this).closest('tr');
console.log(elem)
var patient_medication_id = $(this).closest('tr').attr('id');
var pid = $("#pid").val();
if(confirm("Are you sure that you want to remove the selected history?"))
{
$.ajax({
url: "../php/deleteDiseaseFromHistory.php",
type: 'POST',
data: { pmid: patient_medication_id, pid: pid},
dataType: 'TEXT',
success:function(resp)
{
if(resp="deleted")
{
elem.fadeOut(800, function() {
//after finishing animation
});
}
},
error:function(resp)
{
alert("Please try again");
}
});
}
});
You need
$(document).on('click', '#delete_disease ', function(event)
in place of
$("#delete_disease ").on('click', function()
Since the content has been loaded through AJAX.
Here is my JavaScript code for sending the post action:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ColorId = "1";
$( "#targetButton" ).click(function() {
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
var arr = data.msg.split(',');
arr.forEach(function(id){
$('#' + id.trim()).hide();
});
//$('#target').html(data.msg);
},
data: ColorId
});
});
});
</script>
<button type="button" id="targetButton">Send</button>
<div style="BlackAndWhite" id="24604682">24604682</div>
<div style="BlackAndWhite" id="24604682x">24604682x</div>
<div style="BlackAndWhite" id="24604679">24604679</div>
<div style="BlackAndWhite" id="24604621">24604621</div>
Here are the results from checkcolors.php:
24604603, 24604684, 24604640, 24604609, 24604682, 24604686, 24604681, 24604689, 24604602, 24604679, 24604680, 24604622, 24604685, 24604683, 24604621, 24604677, 24604688,
I can make them to be printed like this also:
24604603
24604684
24604640
24604609
24604682
24604686
24604681
24604689
24604602
24604679
24604680
24604622
24604685
24604683
24604621
24604677
24604688
I can make these numbers to be formated however i want.
What i have to do!
I have html div elements with the same ids that the result is returning.
When these numbers are returned i have to hide all div elements with the ids shown from checkcolors.php response.
How can i do that ?
Thanks in advance!
Here's a very crude way to do it:
<script type="text/javascript">
function send() {
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$('#target').html('sending..');
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
var arr = data.msg.split(',');
arr.forEach(function(id){
$('#' + id.trim()).hide();
});
//$('#target').html(data.msg);
},
data: person
});
}
</script>
Why style="BlackAndWhite" can be a class="BlackAndWhite" ???
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ColorId = "1";
$( "#targetButton" ).click(function() {
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
var arr = data.split(',');
var html = "";
arr.forEach(function(id){
html += "<div style='BlackAndWhite' id='" + id + "'>" + id + "</div>";
});
$('#target').html(html);
},
data: ColorId
});
});
});
</script>
<button type="button" id="targetButton">Send</button>
<div id="target"></div>
I have multiple textbox and calling jquery keyup on each text box its working
fine on the mozilla firefox and chrome.In internet explorer
Its working fine for the first text box its working perfectly as it should be but other textbox are not working properly ,i mean for them keyup are not calling.
.Below are my code:-
I have multiple textbox and calling jquery keyup on each text box its working
fine on the mozilla firefox and chrome.In internet explorer
Its working fine for the first text box its working perfectly as it should be but other textbox are not working properly ,i mean for them keyup are not calling.
.Below are my code:-
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var idloc=document.getElementById("state").value;
var type='p_school';
var dataString = 'locality='+ searchid+'&id='+ idloc+'&type='+ type;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "loaddata.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").on("click", ".show", function() {
var $name = $(this).find(".name").text();
var $id = $(this).find(".pid").text();
var type='state';
var pid='pid='+$id+'&type='+ type;
$.ajax({
type: "POST",
url: "load_state.php",
data: pid,
cache: false,
success: function(html)
{
//alert (html);
$('#p_school').show();
$('#p_school').html(html);
$('#p_school_old').hide();
}
});
$("#searchid").val($name);
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
if(searchid=='')
{
$('#searchid').click(function(){
jQuery("#result").fadeIn();
}); }
});
$(function(){
$(".search1").keyup(function()
{
alert ("hello second textbox");
var searchid1 = $(this).val();
var idloc1=document.getElementById("state1").value;
var type1='s_school';
var dataString1 = 'locality1='+ searchid1+'&id1='+ idloc1+'&type1='+ type1;
if(searchid1!='')
{
$.ajax({
type: "POST",
url: "loaddata.php",
data: dataString1,
cache: false,
success: function(html)
{
$("#result1").html(html).show();
}
});
}return false;
});
jQuery("#result1").on("click", ".show1", function() {
var $name = $(this).find(".name1").text();
var $id = $(this).find(".sid").text();
//var pid='pid='+ $id.+'&type='+ type;
var type='s_state';
var pid='pid='+$id+'&type='+ type;
$.ajax({
type: "POST",
url: "load_state.php",
data: pid,
cache: false,
success: function(html)
{
//alert (html);
$('#s_school').show();
$('#s_school').html(html);
$('#s_school_old').hide();
}
});
$("#searchid1").val($name);
//alert ("Danstring");
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_ss")){
jQuery("#result1").fadeOut();
}
});
if(searchid1=='')
{
$('#searchid1').click(function(){
jQuery("#result1").fadeIn();
}); }
});
</script>
//HTML Code
HTML are below:-
<input type="text" placeholder="Primary School" name="primary[]" autocomplete="off" class="search" id="searchid" style="margin-top: 7px; border: 1px solid #7B9E94; min-height: 29px;">
<input type="text" placeholder="Secondary School" name="secondary[]" autocomplete="off" class="search1" id="searchid1" style="margin-top: 7px; border: 1px solid #7B9E94; min-height: 29px;">
Thanks
Since your input elements have different class names, try changing this line:
$(".search").keyup(function()
to this:
$(".search, .search_ss").keyup(function()
This is my jQuery code to add html generated by a post in a div. The slidedown() function doesn't seem to be working right. Here is my script:
$(".expand").click(function(){
var button = $(this);
var id = $(this).attr("eid");
var url = "/get-complete/" + id + '/';
$.ajax({
type: "GET",
url: url,
success: function( data ) {
var obj = $.parseJSON(data);
var lang = '';
$.each(obj, function() {
lang += this['html'] + "<br/>";
});
button.siblings('.comment-expand').slideDown('slow', function(){
button.siblings('.comment-expand').html(lang);
});
button.attr('class', 'collapse');
button.html('Collapse');
},
});
return false;
});
Here is the html:
<a class="expand" href="/#" eid="{{ event.id }}">Expand</a>
<div class="comment-expand"></div>
This is the sample data returned by the GET request:
[{"html": "\n <div class=\"comment-count-bar\">\n</div>\n "}]
This is the code to collapse the post, but this isn't working either:
$("body").delegate(".collapse", "click", function(){
var button = $(this);
button.siblings('.comment-expand').slideUp('slow');
button.attr('class', 'expand');
button.html('Expand');
return false;
});
Try this:
$.ajax({
type: "GET",
url: url,
// setting the dataType to json, jQuery itself parses the response
dataType: 'json',
success: function(data) {
// Hiding the element and setting it's innerHTML
// before calling slideDown()
button.siblings('.comment-expand').hide().html(function() {
// Mapping the response and concatenating `html` properties
// If the response has only one array use:
// return data[0].html + '<br>'; instead
return $.map(data, function(v) {
return v.html + '<br>';
}).join('');
}).slideDown();
button.addClass('collapse')
.removeClass('expand')
.html('Collapse');
},
});
Edit: Since you are adding the class dynamically you should delegate the event:
$(document).on('click', '.collapse', function() {
// var button = $(this);
// ...
});
#cal div doesn't fade out after completion in jQuery.
<div id="main">
<div id="price"></div>
<div id="cal">Calculating...</div>
</div>
And here is my Javascript/jQuery code:
<script type="text/javascript">
$('#cal').hide();
$('#price_submit').click(function() {
var my_data = {
//successfully sends data
};
$('#price').fadeOut('fast', function(){
$('#cal').fadeIn();
});
$.ajax({
url: "proccess.php",
type: 'POST',
data: my_data,
success: function(msg){
$('#cal').fadeOut('fast', function() {
$('#price').fadeIn().html(msg);
});
}
});
return false;
});
</script>
at last it will successfully retrieve data and shows it but it still shows the #cal div bellow price. I'd appreciate your help.
I'll suggest you to stop previous animations and see:
$('#cal').stop().fadeOut('fast', function () {
$('#price').stop().fadeIn().html(msg);
});
I have just put your code
$('#cal').hide();
$('#price_submit').click(function() {
var my_data = {
//successfully sends data
};
$('#price').fadeOut('fast', function(){
$('#cal').fadeIn();
});
$.ajax({
url: "/echo/json",
type: 'POST',
data: my_data,
success: function(msg){
msg = '1134141234';
$('#cal').fadeOut('fast', function() {
$('#price').fadeIn().html(msg);
});
}
}
);
return false;
});
on
http://jsfiddle.net/pfpqv/ and it works just fine.
Can you give some more info to proper reproduce this your problem?