Hi All I have a an AJAX query as seen below:
function buttonCallback(obj){
var id = $(obj).attr('id');
$.ajax({
type: "POST",
url: "/project/main/passid",
data: { 'id': id },
success: function(msg){
$("#reloadtable").html("result reloaded successfully"); //? reload?
}
});
}
the query successfully runs - I was hoping to reload a table I have created in html after the query runs - I took some code from another post but it doesn't seem to run - my table body tag is:
<tbody class = "tablereload">
I am entirely new to JS so I apologise if this question is stupid or incorrect - but I am hoping to reload the body of the table after the query has run - is this possible? or refreshing the whole page - without redirect?
The page /project/main/passid should return html like (echo it if it is php page)
<tr>
<td>.....</td>
</tr>
And changes to you Ajax call:
function buttonCallback(obj){
var id = $(obj).attr('id');
$.ajax({
type: "POST",
url: "/project/main/passid",
data: { 'id': id },
success: function(msg){
$(".tablereload").html(msg); //? reload?
}
});
}
Your have a ID selector and in the html you have a class for the tbody.
You can put the Id for the tbody
<tbody id = "tablereload">
or change the script
$(".reloadtable").html("result reloaded successfully");
Related
$(".content-short").click(function() {
$(".content-full").empty();
var contentid=$(this).parent().find(".content-full").attr('data-id');
var content=$(this).parent().find(".content-full");
alert(contentid);
var collegename = $(this).attr('data-id');
$.ajax({
type: "post",
url: "contenthome.php",
data: 'collegename=' + collegename,
dataType: "text",
success: function(response) {
$content.html(response);
}
});
});
here the alert displays the specific data-id but
content=$(this).parent().find(".content-full");
this didn't displays data in content-full div with that specific data-id
anything wrong in the code or something else?
the query displays data if i use(."content-full"); instead of
$(this).parent().find(".content-full");
Inside the ajax callback you are using $content, but you declare your variable as content. May that be the problem?
Your question is not clear. What are you trying to achieve?
I am processing my html form with jquery / ajax request. It's calling by jquery 'change()'. So when request is success it's showing me success result which is
Successfully Updated
Well, but if it again request it's showing
Successfully UpdatedSuccessfully Updated
It's just added last success result text to new one. I want to show only onnce. Can you tell me why it's happening ?
my code:
$("#corp_www_eng, #domestic_www_japaness").change(function(){
var cid = $("#cid").val();
var corp_www_eng = $("#corp_www_eng").val();
var domestic_www_japaness = $("#domestic_www_japaness").val();
$.ajax({
url: 'edit_companyinfo.php',
type: 'POST',
dataType: 'html',
data: {
"cid" : cid,
"corp_www_eng" : corp_www_eng,
"domestic_www_japaness" : domestic_www_japaness,
},
}).done(function ( data ) {
$('#result').append(data);
$('#result').show();
$('#result').delay(3000).fadeOut('slow');
});
});
Try substituting .html() for .append()
$("#result").html(data);
I believe it is because your are appending the data to the #result div. You could try adding
document.getElementById('result').innerHTML = '';
This would clear that div of any content before appending the new content.
$(document).on('click', '.manage', function (event)
{
var userid = $(this).data('userid');
$.ajax(
{
type: "POST",
dataType:'html',
url:"../user/ajax/doclist.php",
async:true,
data:{userid:userid,task:'view'},
success:function(html)
{
$('.doclistdiv').html(html);
},
error:function(request,errorType,errorMessage)
{
alert ('error - '+errorType+'with message - '+errorMessage);
},
complete:function(html)
{
}
});
});
as above code shown i'm loading ajax data(as a html) to my page.
in among those data i have table.i want to after loading that table convert to table as table in datatable.js(www.datatables.net/)
i think because data come as a html there server side processing is not working
Try the following in your success section:
var root = $('.doclistdiv');
root.html(html);
root.find('table').dataTable();
I have two views main.php and details.php. In main.php there are numerous content and under each content there is a "view more" button. If somebody clicks view more an ajax call will dynamically load rest of the content from details.php which will fetch the data from database w.r.t the ID of the content. And it's a list style view in details.php.
In the header of main.php my main script file contains this code snippet to fetch data from details.php -
$('.view_more').click(function(e) {
$.ajax({
type: 'POST',
url: '/path/to/my/controller/method',
dataType: 'html',
success: function (html) {
$('#details_container').html(html);
}
});
});
Data is loading perfectly. But the problem is there is a add content button in details.php along with each content which has been loaded dynamically is not working. The content adding script is in my main.js added in main.php. But I have to add this particular jquery code snippet of adding the content in details.php, otherwise it's not working. So, whenever view more is being clicked it is returning html data along with a ....code for adding the content.... stick with it. Which is not at all desired.
How to solve this issue? Please help. Thanks in advance.
Here is the code of adding the content.
<script type="text/javascript">
$('.add_this').click(function(){
var t = jQuery(this);
var id_add = t.attr("id");
var content_category_id = t.attr("rel");
var add_content_id = id_add.substring(id_add.indexOf('_')+1);
var content_creator_id = t.attr("data-clip-id");
$.ajax({
type: "POST",
url: "/path/to/my/controller/method",
data: add_content_id,
cache: false,
success: function(response){
if(response)
{
$("#"+id_clip).text("Clipped");
}
}
});
});
</script>
I want to add again I am able to add the contents but to do so I have to embed this code snippet in details.php that I dont want to do. I need torun from my main script file.
This should work:
$(document).on('click','.add_this',function(){
var t = jQuery(this);
var id_add = t.attr("id");
var content_category_id = t.attr("rel");
var add_content_id = id_add.substring(id_add.indexOf('_')+1);
var content_creator_id = t.attr("data-clip-id");
$.ajax({
type: "POST",
url: "/path/to/my/controller/method",
data: add_content_id,
cache: false,
success: function(response){
if(response)
{
$("#"+id_clip).text("Clipped");
}
}
});
});
I am having a table in which data is being populated through the database.Now what i want is that as soon as i click on one of the row a alert message displays and the READSTATUS of that row become true in my database that is database gets updated .
Now my problem is where to write the code for updating the database as i dont want to move to a different page to do so.
Like my table is something like this :
<input type=hidden name="notifyidd" id="notifyidd" value="<%=messageid%>"/>
<tr bgcolor="#5D1B90" color="#FFFFFF" onmouseover="ChangeColor(this, true,false);" onmouseout="ChangeColor(this, false,false);" onclick="DoNav('shownotification.jsp?mid=<%=messageid%>');">
<td><input type="checkbox" name="" onclick="DoRemove(event);" width="20" class="select_all_mail" value=<%=messageid%>></td>
<td callspan="3" width="1000px"><%=messagesubject%> at <%=sendingtime%></td>
</tr>
and in onclick method of each row i had called the alert.But how to update the database now ?
function DoNav(theUrl)
{
var tt = document.myinbox.notifyidd.value;
alert(tt);
//document.location.href = theUrl;
}
As if i uncomment this line then it will move to next page.But i want to do it on same page only.Please help
EDIT :
I wrote a ajax code to do it.But it gives error.Please help
$(document).ready(function() {
$('#myrow').click(function ()
{
$.ajax({
type: "post",
url: "shownotification.jsp", //this is my servlet
data: {
notifyidd: $('#notifyidd').val()
},
success: function(msg){
if(msg == "success")
alert('Data updated.');
}
});
});
});
Here i assign myrow as id to my table row.Also i removed doNav function now
My error image clicked :
http://postimg.org/image/vix1vzvq5/
Though the error is resolved but this ajax call is not functioning.For test i make my shownotification.jsp as :
<body>
<% String notifyid = request.getParameter("notifyidd");%>
success
</body>
The error message says the server-side code is failing when looking for the attribute "groupid". The post you are sending has notifyidd instead. The server code has no way of knowing if this should map to groupid or not.
Try this. If it doesn't work, update us with the error.
$(document).ready(function() {
$('#myrow').click(function ()
{
$.ajax({
type: "post",
url: "shownotification.jsp", //this is my servlet
data: {
groupid: $('#notifyidd').val()
},
success: function(msg){
if(msg == "success")
alert('Data updated.');
}
});
});
});