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');
Related
I am using this jQuery plugin for making toggle, but I have an issue that when I make multiple toggles that have same ids and class so in that case I am not able to identify particular toggle for applying auto load ajax on changing value.
I would to ask that how I make same toggle with this same plugin but different ids or class or name so I make ajax function like when I click toggle it will update in PHP without submitting submit button.
The plugin I am using is this one
The code I am using is this:
HTML
<p>Default: <span class="easyswitch"></span></p>
<p>Checked: <span class="easyswitch" data-default="1"></span></p>
SCRIPT
<script>
$('.easyswitch').easyswitch();
</script>
AJAX
$('MY_CLASS_NAME').change(function(){
var mode= $(this).prop('checked');
$.ajax({
type:'POST',
dataType:'JSON',
url:'test.php',
data:'mode='+mode,
success:function(data)
{
$("body").html('Operation Saved');
}
});
You can not handle easyswitch's change event. you need to create click event of it, and from it you can get the status of current toggle.
$('.easyswitch').easyswitch();
$('.easyswitch').click(function () {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
// for all controlls.
$(".easyswitch").each(function() {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
function toogleStatus(mode)
{
if (!mode) {
alert('checked')
}
else {
alert('unchecked')
}
}
Try using callback option
$('.easyswitch').easyswitch({
callback: function(val, ele) {
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'test.php',
data: { mode: val },
success: function(data) {
$("body").html('Operation Saved');
}
});
}
});
I have two files. One PHP-file, which contains a SQL-Select statement and returns the output as html. The second file is my index file which contains a div with the class "loadMembers" and some jquery code:
$(document).ready(function () {
function startInterval() {
var refreshId = setInterval(function () {
$.ajax({
url: 'sidebars/members.php',
type: 'html',
success: function (resp) {
$("div.loadMembers").html(resp);
}
});
}, 5000);
}
startInterval();
});
I want to refresh the div with database data in a 5 seconds interval. I tried it also with .load()...
The request contains some data but nothing from my database...
Where's the problem?
Thanks for any help :)
your request type can be get or post, not html, it should be dataType
url : 'sidebars/members.php',
type: 'POST', // or GET
dataType : 'html',
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);
}
});
I have been researching for the last two days, and have found nothing.
structure:
index.php:
<head>
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<div>
<div>Show</div> *-->if I click this link data loads into DIV below by function.js without reloading*
<div id="producten"></div> *-->testpage.php loads here perfect,
the code of testpage.php makes by while loop other links.
Here I want to click on a link to load next data in div id=information
without reloading the index.php so the data in the first DIV stay visible
and I dont know how to do that*
<div id="information"></div> *-->testpage2.php have to load data from sql in this DIV*
</div>
</body>
function.js:
$(document).ready(function() {
$(".testcat").click(function() {
var testid = $(this).attr("id");
var datastring = 'id='+ testid ;
$.ajax({
type: "POST",
url: "testpage.php",
data: datastring,
cache: false,
success: function(res) {
$('#producten').html("<div class='loading'><img src='IMG/loading.gif' /></div>")
.hide()
.fadeIn(2000, function() {
$('#producten').html(res);
})
}
});
return false;
});
});
testpage.php and testpage2.php are PDO code for sql data.
You'll want to attach your click handlers with on so that dynamically added content still has the same ajax handlers available to them:
Add whatever information is needed to differentiate one click from the next, ie
<a href='...' data-resultdiv='production'
Then, cleaning up your handler a bit: I assume you want the ajax request to go to the href of the link, and that you want to show "loading" immediately (instead of waiting for the request to complete).
Finally, to cancel the anchor's default behavior of browsing to the page referenced by the href, you can return false;
$(document).on("click", "a", function() {
var href = $(this).attr("href");
var successDiv = $(this).data("resultdiv");
$('#' + successDiv).html("<div class='loading'><img src='IMG/loading.gif' /></div>");
$.ajax({
type: "POST",
url: href,
data: datastring,
cache: false,
success: function(res) {
$('#' + successDiv).hide().html(res).fadeIn(2000);
}
}
return false;
});
And of course if you only want this to run for certain anchors, you can put a selector on your call to on
$(document).on("click", "a.someClass", function() {
Hello I have a jQuery function that will send to a php file some info. The PHP file will do the stuff it has supposed to do and will generate some HTML code. I am fine until here.
The problem is that I have then to take the HTML results generated by this PHP file and write them in the page where the Ajax call has been created, simply by appending it after a DIV or inside a DIV or whatever.
This is the jQuery function I have so far:
$(document).ready(function() {
var idGenre = $("#txtGenre option:selected").val();
var html = $.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: "id=" + idGenre,
async: false
}).responseText;
});
The DIV that must be updated with the HTML results taken from the PHP file GetSubGenreData.php is:
<div id ="divSubGenre"></div>
Now lets say the PHP file will return a select box, something like this:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
etc...
</select>
This select box must be appended just after the DIV <div id ="divSubGenre"></div> or by simply replacing this DIV with the returned Select Box. Nothing impossible for a good jQuery developer. But I am not.
I just need the function to write the HTML results from the PHP file in the right DIV.
Thanks!!
in your success callback
success:function(html){
$("#divSubGenre").append(html);
}
if you want to replace the container div with the ajax response
success:function(html){
$("#divSubGenre").replaceWith(html);
}
if the div to which you are appending the results is not empty then to insert after the div use after
success:function(html){
$("#divSubGenre").after(html);
}
so your final code may look like this
$(document).ready(function() {
var idGenre = $("#txtGenre option:selected").val();
var html = $.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: {id:idGenre},
async: false,
success:function(html){
$("#divSubGenre").append(html);
}
});
});
jquery ajax
jquery replaceWith
jquery append
jquery after
update
$("#txtGenre").change(function(){
//get the update value here
var idGenre = $("#txtGenre option:selected").val();
$.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: {id:idGenre},
async: false,
success:function(html){
$("#divSubGenre").html(html);
}
});
});
jquery change
yet another update
about the comment to show the result on page load, if i have understood the scenario well you can have two divs on the page like
<div id="divSubGenre"></div>
<div id="divonLoad"></div>
on the page load do the ajax call and append the result to #divonLoad and in the success callback of your ajax call that is inside the change event handler do this
success:function(html){
$("#divonLoad").fadeOut("slow").remove(); removes the div that was holding the result on page load
$("#divSubGenre").html(html);
}
Add an HTML dataType and a success method to your AJAX call:
// No need to return the responseText as a variable
updateSelectHtml = function() {
$.ajax({
type: "POST",
url: "GetSubGenreData.php",
data: "id=" + idGenre,
async: false,
// Make sure the return is formatted as html
dataType: "html",
success: function(data) {
// The return HTML data is appended after the div.
$("#divSubGenre").html(data);
}
});
};
// Bind the function to #txtGenre onchange
$("#txtGenre").change(updateSelectHtml);