Develop Reference

Data is not display after insertion through Bootstrap modal with jquery ajax in php Mysqli

Data is not display after insert through bootstrap modal with ajax in php mysqli.
jQuery Ajax code:
$(document).ready(function() {
fetch_data();
function fetch_data() {
var action = "fetch";
$.ajax({
url: 'action.php',
method: 'post',
data: {action: action},
success: function (data) {
$("#all_table_data").html(data);
}
});
}
});
function addData() {
var formData = new FormData($('#employee_insert_form')[0]);
formData.append('action', 'add');
$.ajax({
method: 'post',
url: 'action.php',
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (response) {
$("#all_table_data").html(response);
$('#empInsert').modal('hide');
fetch_data();
}
});
}

Your PHP code never return anything to your view. So try to echo result of select * from tbl_employee after the insertion

Saving tinyMCE value before submiting to php

I am trying to accomplish this. it does work but I have to submit the form twice before tinyMCE value get stored.
$("form#data").on('submit',function(e){
e.preventDefault();
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
var formData = new FormData($(this)[0]);
$.ajax({
url: 'includes/new_post.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
The Ajax part of the code works perfectly its just that the form like wise other forms but the tinyMCE text area wont submit on first go. if i click the button twice then it will save please assist.

Looks like you're doing the initializing in the wrong place.
The first time you submit the form, the tinymce gets initialized. Instead you should initialize it on page load.

you should do it like this:
tinymce.init({
selector: "textarea",
statusbar: false,
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
$("form#data").on('submit',function(e){
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'includes/new_post.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});

Insert a loading text message before a div gets populated?

I am tweaking my function below and had an issue. I'd like a loading text message to be inserted right before #project-container fills up with HTML and disappear once response has been inserted.
However, if I insert:
$('#project-container').html("my text here");
...right before:
$('#project-container').html(response);
Then, response doesn't show since the div is already populated with "my text here". Is there another method I can use?
function projectShow() {
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
success: function(response) {
$('#project-wrapper').addClass('activated');
$('#project-container').html(response); <---I want it inserted
$('.post-container').addClass('fadeInUp'); before this line.
$('.close-button').addClass('fadeOutDown');
$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}

If you need a 'Loading' message, show it upon beforeSend event, and hide it on success:
function projectShow() {
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
beforeSend: function() { $('#project-container').html("Loading, Please wait"); },
success: function(response) {
$('#project-wrapper').addClass('activated');
$('#project-container').html(response);
$('.post-container').addClass('fadeInUp');
$('.close-button').addClass('fadeOutDown');
$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
See Ajax Events

You should probably add the loading message just before the AJAX call. It makes no sense to do it in the success callback, since the two operations will happen in the same cycle and chances are you'll always see just one. This should do it:
function projectShow() {
// add the initial text here
$('#project-container').html("my text here");
// add the initial class here for height issues from the comments
// $('#project-wrapper').addClass('activated');
$.ajax({
type: 'POST',
cache: false,
url: ajaxURL,
data: {'action': 'load-content', post_id: post_id },
success: function(response) {
$('#project-wrapper').addClass('activated');
$('#project-container').html(response); <---I want it inserted
$('.post-container').addClass('fadeInUp'); before this line.
$('.close-button').addClass('fadeOutDown');
$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
As said in the comments, if you wish to keep the original text then append the response to it (either by using append(), or concatting them, or whatever method you like best).
See the both ways in action below:
function projectShow(keep) {
$('#project-container').html("my text here");
$.ajax({
type: 'POST',
cache: false,
url: 'http://hayageektest.appspot.com/cross-domain-cors/post.php',
//data: {'action': 'load-content', post_id: post_id },
success: function(response) {
//$('#project-wrapper').addClass('activated');
if (keep)
$('#project-container').append(response);
else
$('#project-container').html(response);
//$('.post-container').addClass('fadeInUp'); // before this line.
//$('.close-button').addClass('fadeOutDown');
//$('#project-wrapper .entry-title').shuffleLetters();
return false;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="projectShow()">Click me</button>
<button onclick="projectShow(true)">This one will keep the original! Click it. <br /></button>
<div id="project-container"></div>

How to replace text of element after AJAX request using Jquery

I'm using Jquery V1.11.1 and I want to replace a cell in a HTML table after a Jquery AJAX request. I want the result in the cell.
$(".permission").click(function(e) {
var acoPath = $(this).siblings('th').text();
var rowsLeft = $(this).prevUntil("th").length;
var aroGroup = $('.aro').eq(rowsLeft).text();
$.ajax({
url: "/permissions/update",
type: "POST",
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
$(this).html(html);
}
});
});
});
When I click on the text in the desired cell, nothing is replaced. How can i fix this?

You need to set the context in ajax call to current object. You can use context option from ajax to do that:
context: this,
Modified ajax call:
$.ajax({
url: "/permissions/update",
type: "POST",
context: this,
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
$(this).html(html);
}
});

Your context has changed. in the 'click' function this referce to the button. But in the callback function the context has changed. You should save the context to a variable first (var self).
$(".permission").click(function(e) {
var acoPath = $(this).siblings('th').text();
var rowsLeft = $(this).prevUntil("th").length;
var aroGroup = $('.aro').eq(rowsLeft).text();
var self = this;
$.ajax({
url: "/permissions/update",
type: "POST",
data: { aco : acoPath, aro : aroGroup },
cache: false,
dataType: "HTML",
success: function (html) {
self.html(html);
}
});
});
});

Going reusable with data attributes and jquery

I have many Bootstrap Type-ahead attached to my text-box.
I was using there id to select then and attach typeahead.
Sample
$("#SireTag").typeahead({
source: function (query, process) {
$.ajax({
url: '/Bull/GetSireTag',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
Now i decided to make it more readable and short by using a single java-script code to attach type ahead to all my text-boxes.
<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">
New Javascript
$('*[data-typeahead-url]')
.each(function () {
alert(this);
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
But its not working i am not so proficient with java-script anyone now whats wrong.
I tried developers tool ajax request is not made.

$('*[data-autocomplete-url]') doesn't select your elements because you're using data-typeahead-url.

You need to return the ajax result to the source, also don't use alert() to debug, use console.log() instead:
$('input[data-typeahead-url]').each(function () {
$(this).typeahead({
source: function (query, process) {
return $.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: { query: query },
dataType: 'json',
async: true,
success: function (resp) {
console.log(resp);
return process(resp);
}
});
}
});
});
Hope it helps.

$('*[data-typeahead-url]')
.each(function () {
var url = $(this).data("typeahead-url");
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: url,
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
Problem: The code was making ajax request but to the same address.
Diagnose: I tried log($(this).data("typeahead-url");) which gave desired output.
Solution: I created and stored the Url the used it as a parameter in ajax call
var url = $(this).data("typeahead-url");
Hope this help.