I have dialog box which I load list of groups. each group can edit /delete. and bottom new groups also can added.
both group list and add group option are in same form, I want to update the group list whenever user add a group or edit list.
I don't get your AJAX code correctly, But here is the shell of the idea of what you want.
First, You put your AJAX code for view inside a fucntion like
function view() {
//AJAX Request for `SELECT SQL Query` PHP Page
}
then you do your onclick functionality normally as you did and put the function inside of it.
$("#id-selector-for-delete").click(function(){
function view() {
$.ajax({
type: "GET",
cache: false,
url: "??",
data: {??},
success: function (data) {
//JQuery HTML Attribute.
}
});
}
//AJAX Request for `DELETE SQL Query` PHP Page
$.ajax({
type: "POST",
cache: false,
url: "??",
data: {??},
success: function (data) {
view() //Calling the AJAX view functionality again after deletion success.
}
});
Related
pls i'm trying to use jquery mobile page event to trigger ajax each time a profile page is loaded, the profile.php is a single file accepting GET variable which is the username, my problem is that the code execute once.
var page = $('.profile').attr('data-username');
$(document).on("pageshow",' .profile_'+page+'', function(){
var id = $('.profile_'+page+'').attr('data-id');
function pin (){
$.ajax({
method : 'POST',
url: 'pin.php',
data: {user_id: id},
success: function(data){
$('#pinned_m_box_'+id+'').html(data);
}
})
}
pin()
})
I would like to delete a comment via Ajax in background, without refreshing a page.
I made a button with onclick function which will pass the id of the comment:
<button type="button" class="btn btn-primary" onClick="return delete_comment(<?=$data['comment_id']; ?>);">Delete comment</button>
and I am not sure how to pass a comment id to PHP function:
<script>
function delete_comment(comment_id)
{
if (confirm("Delete?")) {
$.ajax({
type: 'post',
url: '/comments/delete/' + comment_id,
data: $('form').serialize(),
success: function () {
alert("Deleted.");
}
});
}
return false;
}
</script>
To delete a comment I need to call PHP script like: /comments/delete/comment_id
I'm assuming, the mistake you are making is, the type. If you use GET type. Then we can post the Javscript paramter to the PHP form using the page /comments/delete/123123.
But,since you are using POST. Specificing the comment id in the URL is not going to pass the variable into the PHP form. For which, you will have to use the following ajax.
$.ajax({
type: 'POST',
url: '/comments/delete/',
data: {
id: comment_id
},
success: function () {
alert("Deleted.");
}
});
Method 2
If you are not particular about the POST method. Then, you can change your PHP form to GET and the ajax type to GET
$.ajax({
type: 'GET',
url: '/comments/delete/' + comment_id,
data: $('form').serialize(),
success: function () {
alert("Deleted.");
}
});
Thank all you guys for help.
The problem seems to be a PHP script not the mentioned HTML with Ajax
I've posted the same question before, but I didn't get any feedback!However, I still can't solve this problem.
So I have an index.php which displays users in my database. I'm using a jquery UI dialog form to add new user.The problem is that I want to display a message when a new user is added and show it in the table that displays the user. I succeeded to add records to the database, but I have to refresh the entire page to make the new items added visible in the table. Here is my table :
<div id="users">
<tr>
<td>//users's informations</td>
</tr>
</div>
the jquery code that adds the users :
//some vars
dataString = //dataString
$.ajax({
type: "POST",
url: "create.php",
data: dataString,
success: function () {
$(#users).load("index.php", function () {
display_message("user added");)
};
}
});
$(this).dialog("close");
return false;
So when I click to create a new user ;it just shows me a blank page of index.php loading. Please help, thank you.
you have forgotten to place " around the selector
success: function() {
$("#users").load("index.php", function() {
-------------------^
display_message("user added");
)};
}
EDIT:
but I have to refresh the entire page to make the new items added visible in the table.
if you want to refresh the whole page either in the success callback or after the dialog close put this line
location.reload(true);
Assuming you are retreiving user's info from your ajax's request:
success: function(userinfos) {
$("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
display_message("user added");
}
In your create.php, format the div with html. Make sure this html is printed in the page and not stored in a variable.
This is the format which you want to show in index.php. Then on your success function write it in the below way.
$.ajax({
type: "POST",
url: "create.php",
data: dataString,
success: function (data) {
$("#users tr td").html(data);
}
});
this is an ajax method that inserts the data into a db and should supposedly display the new content.
<script type = "text/javascript">
$(document).ready(function() {
$('#submit').live('click', function(eve) {
eve.preventDefault() ;
var form_data = {
title: $('#title').val()
};
$.ajax({
url: "http://localhost/ci/index.php/chat/comment",
type: 'POST',
data: form_data,
success: function(msg) {
alert(msg);
}
});
});
});
</script>
However in my /chat/comment, i am loading the view again, i.e, user submits a comment, load the view again and the comment should be there. My response from server is the view's HTML. However the view comes with all the divs and there are many of them. I need to retrieve only part of the div, say, #commentspace from the ajax on success.
Look at the jQuery $.load() function?
Example
Inside "firstpage.html"
$('#content').load('secondpage.html #content');
I'm pretty new to ajax and I applied it succesfully to a Drupal site. But I was wondering, how do I get an URL to a page where part of the content is loaded through ajax. Is this even possible? The JSON object is retrieved on click, so how do I make it work when retrieving a certain URL?
I realize this is a very broad questionany, any help would be greatly appreciated.
Thanks in advance!
My JS looks like this:
Drupal.behaviors.ajax_pages = function (context) {
$('a.categoryLink:not(.categoryLink-processed)', context).click(function () {
var updateProducts = function(data) {
// The data parameter is a JSON object. The films property is the list of films items that was returned from the server response to the ajax request.
if (data.films != undefined) {
$('.region-sidebar-second .section').hide().html(data.films).fadeIn();
}
if (data.more != undefined) {
$('#content .section').hide().html(data.more).fadeIn();
}
}
$.ajax({
type: 'POST',
url: this.href, // Which url should be handle the ajax request. This is the url defined in the <a> html tag
success: updateProducts, // The js function that will be called upon success request
dataType: 'json', //define the type of data that is going to get back from the server
data: 'js=1' //Pass a key/value pair
});
return false; // return false so the navigation stops here and not continue to the page in the link
}).addClass('categoryLink-processed');
}
On the begining of the page load ajax based on hash part of the url page#id,
$(document).ready(function() {
$.ajax({
type: 'POST',
url: "/path/to/page",
success: updateProducts,
dataType: 'json',
data: 'id=' + window.location.replace(/.*#/, '')
});
$('a.categoryLink:not(.categoryLink-processed)', context).click(function () {
$.ajax({
type: 'POST',
url: "/path/to/page",
success: updateProducts,
dataType: 'json',
data: 'id=' + this.href.replace(/.*#/, '')
});
});
Or you can use jquery-history but I didn't test it.
I don't know what exactly you are trying to do. But unless you have a module that creates the JSON data you need to do it yourself.
You would need to create a menu callback with hook_menu. In the callback function you can return json data by using drupal_json.
If you create the menu callback etc yourself, the URL will be whatever you make it to. Else you just have to use the URL defined by the module you want to use.