i am new to JQuery AJAX and i need help with my code. What i want is when i click the add button it will change to delete button. but what happens in my code is that it changes to delete button but when i click delete button, it does not change back to add button. i want it to look like some sort of toggle. here's my html code with javascript:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#add_button').click(function(){
var temp = $('#add_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
}
});
});
$('#delete_button').click(function(){
var temp = $('#delete_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
}
});
});
});
</script>
</head>
<body>
<div>
<button id="add_button" name="add" value="testing">Add</button>
</div>
</body>
and here's my php code:
<?php
if(isset($_POST["add_button"])){
echo "<button id='delete_button' name='delete' value='testing'>Delete</button>";
}
if(isset($_POST["delete_button"])){
echo "<button id='add_button' name='add' value='testing'>Add</button>";
}
?>
please help. thanks
You can try hiding the button clicked and show other button something like
$('#add_button').click(function(){
var temp = $('#add_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
$('#add_button').hide();
$('#delete_button').show();
}
});
});
$('#delete_button').click(function(){
var temp = $('#delete_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
$('#delete_button').hide();
$('#add_button').show();
}
});
});
Or you can use jquery toggle
$( "#add_button").toggle()
http://api.jquery.com/toggle/
Your solution wasn't working, because delete button event handler was being attached to DOM before the DOM element(delete button) was initialised.
So, one event for both buttons would be enough:
$('button').click(function(){
var button = $(this);
if(button.data('type') == 'add') {
var postData = {add_button: button.val()};
} else {
var postData = {delete_button: button.val()};
}
$.ajax({
url: "ajax_test.php",
type: "POST",
data: postData,
success: function(data){
$('div').html(data);
}
});
});
HTML:
<div>
<button data-type="add" name="add" value="testing">Add</button>
</div>
PHP:
<?php
if(isset($_POST["add_button"])){
echo "<button data-type='delete' name='delete' value='testing'>Delete</button>";
}
if(isset($_POST["delete_button"])){
echo "<button data-type='add' name='add' value='testing'>Add</button>";
}
?>
<script>
$(document).ready(function () {
$('div').on('click', '#add_button', function(){
var temp = $(this).val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
}
});
});
$('div').on('click', '#delete_button', function(){
var temp = $(this).val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
}
});
});
});
</script>
Your code won't work on dynamically added elements, while above code works.
Read http://api.jquery.com/on/ for more informations.
Try the below code:
Give a class name to button:
<button id="add_button" class="btnOp" name="add" value="testing">Add</button>
Then you can add a js click event to that classname and change its data accordingly:
$('.btnOp').on('click',function()
{
var text=$(this).text();
if(text==="Add")
{
var temp = $('#add_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {add_button: temp},
success: function(data){
$('div').html(data);
$('.btnOp').val('testing');
}
});
}
else
{
var temp = $('#delete_button').val();
$.ajax({
url: "ajax_test.php",
type: "POST",
data: {delete_button: temp},
success: function(data){
$('div').html(data);
$('.btnOp').val('testing');
}
});
}
});
This will help you to change button values and functionality on success of ajax and acts like kind of toggle
Related
I am showing default charts on my dashboard and there is a form also and I want to update/filter the charts after the form submission.
Js code:
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
}); });
A bracket inline 9 was preventing the execution of .submit function. Remove the bracket
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
});
});
I have this problem with assigning a certain array variable. When I post it to Codeigniter Controller, It produces this error Click to view Image.
View:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function submit() {
var TableData = {"table1":"sample1","table2":"sample2","table3":"sample3"};
var Data = JSON.stringify(myTableArray);
$.ajax({
type: "POST",
url: "http://janncomputing/tabulation/judges/save_Production",
data: {pTableData : Data},
success: function(result){ //retrieve data
alert('Success');
alert(result); //alert it
}//success
});
</script>
</head>
<body>
<div>
<button type="button" onClick="submit();">SUBMIT</button>
</div>
</body>
</html>
Controller:
public function save_Production()
{
$table = json_decode($_POST['pTableData'],true);
$msg = $table['table1'];
echo $msg;
}
try this
function submit()
{
var TableData = {"table1":"sample1","table2":"sample2","table3":"sample3"};
//var Data = JSON.stringify(TableData);
$.ajax({
type: "POST",
url: "http://janncomputing/tabulation/judges/save_Production",
dataType: 'json',
data: {pTableData : TableData},
success: function(result){ //retrieve data
alert('Success');
alert(result); //alert it
}//success
});
}
Am trying to make wikipedia viewer for my freecodecamp project. But the ajax request fails every time. It does not return anything.
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json&callback=?";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "json",
//jsonp: "callback",
success: function(data) {
console.log(data);
}
});
});
});
set dataType: 'jsonp'
remove &callback=? from the url (that's the default that jQuery will use anyway
example
var value = "google";
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+ value + '&format=json';
$.ajax({
type: 'GET',
url: url,
dataType: 'jsonp',
success: function (data)
{
console.log(data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" /><br /><br />
<button>Click here</button>
<script>
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
});
});
</script>
I am trying to post via link. But I think there is a problem. I am not good at Javascript.
I want to send attribute and show with div.
Here is my Code :
<script type="text/javascript">
$(document).ready(function() {
$("#slidingProduct").click(function() {
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
dataType: "POST",
data: {
"number1": aa
},
success: function(json) {
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
You can do something like this:
$(".slpd").on('click',function(){
var aa = $(this).data('urun_id');
var json={"number1":aa};
$.ajax({
url: "data.php",
type: "POST",
dataType:'JSON',
data: JSON.stringify(json),
success: function(result){
$("#result").html(result.number1);
}
});
});
As ids in DOM should be unique, you can specify similar class name to capture click event in a single go and
some modifications in html - It's good to use data-* property of html5:
A
B
O
$(document).ready(function() {
$("a").on('click', function(e) {
e.preventDefault(); // Stop redirection
var aa = $(this).attr('urun_id');
$.ajax({
url: "data.php",
type: "POST"
dataType: "JSON",
data: {
"number1": aa
},
success: function(response) {
$("#result").html(response.number1); // This depends on how you've sent response from server
}
});
});
});
$("#delete").click(function() {
deleterecord();
});
function deleterecord(){
var id = $("#iduser").val();
alert("aw"+id);
var id = $('#iduser').attr();
e.preventDefault();
pressed = "delete"
$.ajax({
type: "post",
url: "IngSave.php",
data: "&idshit="+ id,
data: "&gagawin="+ pressed,
success: function(){
alert("ATTENTION");
$("#usertbl").html(data);
}
});
return false;
}
I'm not getting the variables $_POST['idshit']; and $_POST['gagawin']; in IngSave.php file.
Try this:
$.ajax({
type: "post",
url: "IngSave.php",
data: {idshit:id,gagawin:pressed},
success: function(){
alert("bitch");
$("#usertbl").html(data);
}
});
You have two data params incorrectly in your ajax call, change it to
$.ajax({
type: "post",
url: "IngSave.php",
data: "idshit="+id+"&gagawin="+pressed, // or - { idshit:id,gagawin:pressed }
success: function(){
alert("bitch");
$("#usertbl").html(data);
}
});