Hiding the first table when the second table is loaded - javascript

I am trying to drill down to detail rows when a user clicks on a cell in table R.So when a cell is clicked Table L is loaded and Table R has to be hidden . I tried to use $('#RegionTable').hide but it hides the table when it is loaded .but i want it to be hidden only on second click
`<script type="text/javascript">
$(document).ready(function($) {
$('#lsearch').click(function(){
makeAjaxRequest();
});
$('form').submit(function(e){
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'php/l_search.php?op=1',
data: {name: $('#l').val()},
type: 'get',
success: function(response) {
$('table#R tbody').html(response);
}
});
}
});
$(document).on('click','#loc_code',function() {
var url = $(this).text();
url = 'php/l_search.php?op=2&l_code='+url ;
$.ajax({
url: url,
type: 'get',
success: function(response) {
$('table#L tbody').html(response);
}
});
return false;
$('#R').toggle("slide", { direction: "right" }, 1000);
});
</script> `

Instead of:
.on('click')
do:
$('#loc_code').dblclick(function(){
https://api.jquery.com/dblclick/

actually I used $("#R").hide(); and it works

Related

document.getelementById("").value does not work in case of Ajax call?

I want to do search and it can search many times. when it is submitted, it will show value in textbox by using document.getelementById("").value. All work well but I added ajax for filter search, document.getelementById("").value couldn't work.
$(document).ready(function() {
$('#job_no').change(function() {
$.ajax({
type: 'POST',
data: {JOB_NO: $(this).val()},
url: 'select.php',
success: function(data) {
$('#input_na').html(data);
}
});
return false;
});
});
<script type="text/javascript">document.getElementById('input_na').value = "<?php echo $_POST['input_na'];?>";</script>
Try this:
$(document).ready(function() {
$('#job_no').change(function() {
var $this = $(this); //add this line
$.ajax({
type: 'POST',
data: {JOB_NO: $this.val()}, //change this line
url: 'select.php',
success: function(data) {
$('#input_na').html(data);
}
});
return false;
});
});
the 'this' in $.ajax(..) function will not refer to $('#job_no'), so it should be assigned to another variable "$this" for use inside the ajax function.

Add button to table row td when fetching data ajax java

For my course purpose I want to create a dynamic data table using ajax. Here's my Javascript code:
$("#submitcateg").click(function(){
var categ = $("#addcategname").val();
$.ajax({
type: "POST",
url: "ProcatServlet",
data: {"categ":categ, "id":"addcateg"},
success: function(data){
if(data=="true"){
$("#addcategname").hide();
$("#submitcateg").hide();
$("#categtable").show(function(){
$.ajax({
type: "GET",
url: "ProcatServlet",
data: {"id":"getcateg"},
success: function(responseJson) {
if(responseJson!=null) {
$("#categtable").find("tr:gt(0)").remove();
var tablebody = document.getElementById("categtable").getElementsByTagName("tbody");
$.each(responseJson, function(key, value){
var button = document.createElement("input");
button.type="button";
button.id="edit";
button.value="edit";
var rowNew = $("<tr><td></td><td></td></tr>");
rowNew.children().eq(0).text(value);
rowNew.children().eq(1).append(button);
rowNew.appendTo(tablebody);
});
}
}
});
});
$("#addcategtrigger").show();
} else {
alert("failed");
}
}
});
});
Using this code, I can show the data and assigned it to the table perfectly, but when I'm trying to add a button to the next column on the row, the button didn't appear. Please help me where I'm doing it wrong.

Targeting specific element jquery

I have searched this on the net however couldn't find a solution, simply I would like to replace the content inside button element with ajax response. The only problem I am facing is that, the whole divs are being changed not the one I click on. If I change the class to id only the first one changes not the specific button I want. So how do I replace the content of specific button?
PHP Code:
while($row = $result->fetch_assoc()){// there are four rows so I have 4 buttons.
echo "<button class=btn btn-primary test' value='."$row['id']".'>."$row['voteup']".</button>";
}
javascript code:
$(function() {
$('.test').on('click', function() { // attach the click to the button
var test_val = $(this).val(); // Grab the value from the button
$.ajax({
type: "GET",
url: "test.php", // Move ?tar=vrate to the data array.
data: {tar: 'vrate', test: test_val},
cache: false,
success: function(response)
{
$(".test").fadeIn('slow').html(response);//this is replacing all 4 buttons not just one, if I change the class to id, only the first one is being replaced with the response. I also tried $( .test", this) but no luck.
}
});
});
});
$(function () {
$('.test').on('click', function () {
var test_val = $(this).val();
$.ajax({
// -------v Set the context of the callback
context: this,
type: "GET",
url: "test.php",
data: {
tar: 'vrate',
test: test_val
},
cache: false,
success: function (response) {
// v--and use `this` here
$(this).fadeIn('slow').html(response);
}
});
});
});
Try to use the $(this) reference here to achieve what you want,
$('.test').on('click', function() { // attach the click to the button
var test_val = $(this).val(); // Grab the value from the button
var $this = $(this);
$.ajax({
type: "GET",
url: "test.php", // Move ?tar=vrate to the data array.
data: {tar: 'vrate', test: test_val},
cache: false,
success: function(response)
{
$this.fadeIn('slow').html(response);
}
});
});

Div doesn't fade out after completion in jQuery

#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?

How to pass extra parameter in jquery post request from outside click event?

Hi i have jquery request like below ,
$('#filterForm').submit(function(e){
e.preventDefault();
var dataString = $('#filterForm').serialize();
var class2011 = document.getElementById("2011").className;
//var validate = validateFilter();
alert(dataString);
if(class2011=='yearOn')
{
dataString+='&year=2011';
document.getElementById("2011").className='yearOff';
}
else
{
document.getElementById("2011").className='yearOn';
}
alert (dataString);
$.ajax({
type: "POST",
url: "myServlet",
data: dataString,
success: function(data) {
/*var a = data;
alert(data);*/
}
});
and my Form is like ,
<form method="post" name="filterForm" id="filterForm">
<!-- some input elements -->
</form>
Well, I am triggering jquery submit on submit event of a form ,(it's working fine)
I want pass one extra parameter inside form which is not in above form content but it's outside in page
it's like below
[Check this image link for code preview][1]
So how can i trigger above event , on click of , element with class yearOn ( check above html snippet ) and class yearOff , with additional parameter of year set to either 2011 or 2010
$(document).ready(function () {
$('#filterForm').submit(function (e) {
e.preventDefault();
var dataString = $('#filterForm').serialize();
if ($("#2011").hasClass('yearOn')) {
dataString += '&year=2011';
$("#2011").removeClass('yearOn').addClass('yearOff');
}
else {
$("#2011").removeClass('yearOff').addClass('yearOn');
}
$.ajax({
url: "/myServlet",
type: "POST",
data: dataString,
success: function (data) {
/*var a = data;
alert(data);*/
}
});
});
});
1.) If you are using jQuery already, you can use the $.post() function provided by jquery. It will make your life easier in most cases.
2.) I have always had a successful post with extra parameters this way:
Build you extra parameters here
commands={
year:'2011'
};
Combine it with your form serialize
var dataString=$.param(commands)+'&'+$("#filterForm").serialize();
Perform your post here
$.post("myServlet",data,
function(data) {
/*var a = data;
alert(data);*/
}
);
OR use $.ajax if you really love it
$.ajax({
type: "POST",
url: "myServlet",
data: dataString,
success: function(data) {
/*var a = data;
alert(data);*/
}
In the end, here is the full code the way you are doing it now
$('#filterForm').submit(function(e){
e.preventDefault();
var class2011 = document.getElementById("2011").className;
//var validate = validateFilter();
alert(dataString);
if(class2011=='yearOn') {
dataString+='&year=2011';
document.getElementById("2011").className='yearOff';
} else {
document.getElementById("2011").className='yearOn';
}
commands={
year:'2011'
};
var dataString=$.param(commands)+'&'+$("#filterForm").serialize();
alert (dataString);
$.ajax({
type: "POST",
url: "myServlet",
data: dataString,
success: function(data) {
/*var a = data;
alert(data);*/
}
});

Categories