Load json data after ajax submit success - javascript

i try to create tags form with textextjs
but i have a problem with ajax to call new data after another ajax success submit
this is my code to call json
var tagload = $('#textarea')
.textext({
plugins : 'autocomplete filter tags ajax',
ajax : {
url: "<?= base_url() ?>admin_ajx/tags_ajx/data_tags",
dataType : 'json',
cacheResults : true
}
});
and this is my code to submit new data to json
$(document).ready(function(){
$(".save_new_tags").click(function(){
var data = $('.add_new_tags').serialize();
$.ajax({
type: 'POST',
url: "<?= base_url() ?>admin_ajx/tags_ajx/add_tags",
data: data,
success: function() {
$(".add_new_tags")[0].reset();
alert("Post Success!");
tagload.ajax.reload();
}
});
});
});
how to load new data, after success submit new data
i thinks the problem is here
cacheResults : true
i'am still looking for solution

There is not AJAX property on the returned jQuery selection in tagload.
The example with cacheResults property set to true assumes that the backend is returning all possible results.
Since you're allowing for updates to the possible values, this isn't the situation any longer.
Removing cacheResults option or set it to false should have your tag suggestions updated.
You could also keep the cacheResults option set to true and update the suggestions on the Textext instance after fetching the tags using $.ajax.
var opts = {
url: "<?= base_url() ?>admin_ajx/tags_ajx/data_tags",
dataType : 'json',
cacheResults : true
}
var tagload = $('#textarea')
.textext({
plugins : 'autocomplete filter tags ajax',
ajax : opts
});
$(document).ready(function(){
$(".save_new_tags").click(function() {
//...
$.ajax(opts).done(function(suggestions) {
var textExts = $('#textarea').textext()[0]
textExts.ajax()._suggestions = suggestions
});
});
});

Related

call a function after multiple ajax request is performed

So in my program, i have two tabs i am performing a post ajax request using form.
On load of ajax two different kinds of json will appear
the code is as below:
$('#myForm').submit(function () {
$.ajax({ // create an AJAX call...
data : $(this).serialize(), // get formdata
dataType : "json",
//async : false,
//timeout : 55000,
type : $(this).attr('method'), // GET or
// POST
url : url.A, // the file to call
success : function ( json ) {
// on success..
$('.ajaxloader').css("visibility", "hidden");
Graph = json;
draw(Graph);
}
});
$.ajax({ // create an AJAX call...
data : $(this).serialize(), // get formdata
dataType : "json",
type : $(this).attr('method'), //POST
url : url.B, // the file to call
success : function ( json ) {
// on success..
table= json;
plot(table);
}
});
}
Now on josn s arrival i am first showing the table, to view my other tab, i am writing a onclick event this way..
$(init);
function init () {
$('body').on('click', 'a.all',function(){
plot(table);
})
.on('click', 'a.domain',function(){
draw(Graph);
});
}
Now my problem is if i click on domain, the json would have still not loaded hence throwing a error,
How do i resolve this..
So far i tried async:false (it works fine but it shows a deprecated warning)
AjaxStop, works well the first time then when switching tabs it just shows no response
I also tried when but since i am new to java script I didn't understand the usage at all
You could try to use an Ajax global event like ajaxComplete().
var ajaxCounter = 0;
$(document).ajaxComplete(function(){
ajaxCounter++;
if(ajaxCounter == 2){
$(init);
}
});

pass data($post) to php file using javascript without callback

I need to pass data from HTML page to PHP page But without data callback ....
i'm used two method but One of them did not succeed
1)
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x },
success: function(data)
{
alert("success! X:" + data);
}
});
2)
$.post("getClassStudent.php",
{
},
function(data){
$("#div_id.php").html(data);
}
);
as i can understand, you just want to send info to a php script and don't need the response, is that right?
try this
$.post("phpexample.php", {voteid:x});
or simply remove the "succes" function from the equation if you feel more confortable using $.ajax instead of $.post
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x }
});
your fisrt example is correct, the second is not well formed.
more info:
http://api.jquery.com/jquery.post/
EDIT: to help you some more :)
<button type="button" id="element-id">click</button>
<button type="button" class="class-name">Click</button>
$(document).ready(function(){
//if you are marking ans element by class use '.class-name'
$(".class-name").click(function(){
$.post("getClassStudent.php");
});
//if marking by id element use '#id-name'
$("#element-id").click(function(){
$.post("getClassStudent.php");
});
});
be carefful with the markings, for debuggin try to use "console.log()" or "alert()" so you can see where is the problem and where the code crushes.
var formData = {
'voteid' : 'x',
};
$.ajax({
type : 'POST',
url : 'phpexample.php',
data : formData, // our data object
dataType : 'json',
encode : true
}).done(function(data) {
console.log(data);
});

How to send a parameter in data attribute of $.ajax() function in following scenario?

I've written one AJAX function code as follows :
$('#form').submit(function(e) {
var form = $(this);
var formdata = false;
if(window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
type : 'POST',
url : 'manufacturers.php',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
success: function(response) {
if(response != 'error') {
//$('#messages').addClass('alert alert-success').text(response);
// OP requested to close the modal
$('#myModal').modal('hide');
} else {
$('#messages').addClass('alert alert-danger').text(response);
}
}
});
e.preventDefault();
});
Now here in data attribute I want to send some additional parameters with values in data attribute. How should I send these parameters to PHP file?
For clear understanding of my issue refer the following AJAX function code that I've written previously :
function GetPaymentRequest(status){
var status = $('#status_filter').val();
$.ajax({
type: "POST",
url: "view_payment_request.php",
data: {'op':'payment_request_by_status','request_status':status},
success: function(data) {
// alert(data);
}
});
}
In above function code you can see that I've passed few parameters with values viz. 'op':'payment_request_by_status','request_status':status in data attribute.
Exactly same parameters I want to pass in first AJAX function code. The already mentioned parameter "formdata ? formdata : form.serialize()" should also be there.
How should I do this? Can someone please help me in this regard?
Thanks in advance.
Add by using $.param
form.serialize() + '&' + $.param({'op':'payment_request_by_status','request_status':status});
or use serializeArray() and push new items
var data = form.serializeArray();
data.push({name:'op',value:'payment_request_by_status'}).push({name:'request_status',value:status});
then pass data
What you can do is, add two hidden fields to your already existing form, name one of them as op and set the value as payment_request_by_status and another one as request_status and the value based on the status.
When the form is serialized, it will automatically send these values also.

Passing array with Ajax to PHP script results in empty post

I want to pass an array from a HTML site to a PHP script using AJAX
JS
function selectPictures() {
//selected Pictures is my JS array
var jsonArray = JSON.stringify(selectedPictures);
var request;
request = $.ajax({
url: "selectedPictures.php",
type: "POST",
data: {
data: jsonArray
},
cache: false
success: function () {
alert('OK');
}
});
}
HTML
href="selectedPictures.php" onclick="selectPictures();"
PHP
if (isset($_POST['data'])) {
$data = json_decode(stripslashes($_POST['data']));
foreach($data as $d) {
echo $d;
}
}
Actually I want to send the data to another HTML page and then include the PHP script, but I don't understand why this example does not even work. The $_POST['data'] is not set.
UPDATE
Ok, the Ajax post is actually working, as I see the HTTP request is successful BUT: I cannot access the variable instantly. I need to access the values of the passed array at once to execute another PHP script. When I want to do this, I get an undefined index error. Also at the time when the isset function is executed, it returns false (despite the successful HTTP request).
HTML
click
JS
$(function(){
$('#selectPictures').click(function(){
var jsonArray = JSON.stringify(selectedPictures);
var request = $.ajax({
url: "selectedPictures.php",
type: "POST",
data: {data: jsonArray},
cache: false,
success: function(data){alert(data);}
});
});
});
Use f12 in chrome to see errors, you forgot to add a comma after the "cache: false"

load view using ajax symfony2

I'm very new to symfony2 and I'm getting some problems to load a view using ajax when the user clicks on a div. Using firebug I can see the data is returned but I can not append the result in the page.
My Code:
//Default Controller
public function indexAction($num, Request $request)
{
$request = $this->getRequest();
if($request->isXmlHttpRequest()){
$content = $this->forward('PaginationBundle:Default:ajax');
$res = new Response($content);
return $res;
}
return $this->render('PaginationBundle:Default:index.html.twig', array('num' => $num));
}
public function ajaxAction()
{
return $this->render('PaginationBundle:Default:page.html.twig');
}
}
My Js:
When clicking on #target, I'd like to load page.html.twig in my div
$("div#target").click(function(event){
t = t +1;
$.ajax({
type: "POST",
cache: "false",
dataType: "html",
success: function(){
$("div#box").append(data);
}
});
});
I'm using isXmlHttpRequest() in my controller to detect if it's an ajax request to load ajaxAction. I get that view on firebug but it's not appended in my div#box. div#box exists in index.html.twig
Thanks everybody in advance
In your
$("div#target").click(function(event) event you didn't specify the url parameter in ajax call, and another thing is you must specify an argument inside the 'success'
parameter of ajax call.
$("div#target").click(function(event){
t = t +1;
$.ajax({
type: "POST",
url: "{{path('yourpath-means header name in routing.yml')}}",
cache: "false",
dataType: "html",
success: function(result){
$("div#box").append(result);
}
});
});
Hope this helps...
Happy coding
This has nothing to do with symfony but with your ajax options. Pece is right though: You can use the return from §this->forward directly as it is a Response object.
The problem lies within your ajax options. You must pass the data object within your inner function or data is simply null. Try this:
success: function(data){
$("div#box").append(data);
}
I don't get your forward to treat AJAX call. Try this :
if($request->isXmlHttpRequest()){
return $this->forward('PaginationBundle:Default:ajax');
}
Controller::forward() already returns a Response object ;)

Categories

Resources