After saving form data, need to load the div only not whole page refresh but it first goes to Main Page Action Controller and then the DIV Load Partial Action Controller. I am unable to find the reason why it is posting whole page.
I have added the preventDefault() command too.
$("#btnSave").click(function (e) {
e.preventDefault();
var url = "#Url.Action("Save", "Note")";
var id = "1";
var model = {
modelfields.....
};
$.ajax({
type: "POST",
data: JSON.stringify(model),
url: url,
contentType: "application/json",
success: function (data) {
if (data == "True") {
// Load div
var settings = { editUrl: '#Url.Action("Get", "Note", new { ID = "-1" })' };
settings.editUrl = settings.editUrl.replace("-1", id);
$("#divNoteDetails").load(settings.editUrl);
}
else if (data == "False") {
alert('not saved');
}
},
error: function () {
alert('error');
}
});
return false;
});
if your button is inside a form then its default type is submit. see the spec for details
try adding type="button" to the button, or event.preventDefault() on an event handler attached to the form itself.
Related
I'm developing a post comment system with PHP CodeIgniter framework.When a user comment for a post-it didn't get loaded without page refresh. Here is my ajax code.
var id = $(this).attr("data-id");
// check to see which events this comment already has
var events = $._data( this, 'events' ).keypress;
// Try to find if keypress has already been registered
// registering it twice causes duplicate comments
var hasEvents = false;
for(var i=0;i<events.length;i++) {
if(events[i].namespace == "") {
hasEvents = true;
}
}
if(!hasEvents) {
$.ajax({
url: global_base_url + 'feed/post_comment/' + id,
type: 'POST',
data: {
comment: comment,
csrf_test_name: global_hash,
page: global_page,
hide_prev: hide_prev
},
dataType: 'json',
success: function(msg) {
if (msg.error) {
alert(msg.error_msg);
return;
}
$('#feed-comments-spot-' + id).html(msg.content);
$('#feed-comments-' + id).html(msg.comments);
}
});
}
My form code is:
<div class="feed-comment-area" id="feed-comment-<?php echo $r->ID ?>">
I have an ajax function something like this:
function foo(e, e1, curc)
{
var sender = (e && e.target) || (window.event && window.event.srcElement);
$.ajax({
type: 'POST',
url: 'script.php',
dataType: 'json',
data: "id="+e+"&mod="+e1+"&curc="+curc,
beforeSend: function() {
$('#mform').show();
},
complete: function() {
$('#fountainG').hide();
},
success: function(data) {
document.getElementById("itog").innerHTML = data.d+data.a;
},
error: function(xhr) {
document.getElementById("itog").innerHTML = '123';
}
});
}
I need to show some modal form to user, and get the data from it in ajax script. I tried to add show function to ajax beforeSend - but I do not understand how to wait for user form submit, and get data from modal form. Ajax function call in html: href="javascript:void(0)" onclick="javascript:foo(3800064420557,1,138)
You just need to re-arrange your logic. Instead of trying to show the modal "within" the ajax request, hold off on sending the ajax request until you have gotten the necessary data from the modal. Here is a rough outline, presuming that your modal element $('#mform') has a form in it with an id of myform which is the form you want to get data out of.
function foo(e, e1, curc)
{
var sender = (e && e.target) || (window.event && window.event.srcElement);
var modal = $('#mform');
var form = $('#myform', modal);
form.on( 'submit', function(){
$('mform').hide();
// make your ajax call here the same way, and inside the
// onsuccess for this ajax call you will then have access to both
// the results of your ajax call and the results of the form
// data from your modal.
$.ajax({ ... });
});
}
To get form data, you can try with below code
function foo(e, e1, curc)
{
var sender = (e && e.target) || (window.event && window.event.srcElement);
form_values = {}
$('mform').show();
$('#myForm').submit(function() {
var $inputs = $('#myForm :input');
$inputs.each(function() {
form_values[this.name] = $(this).val();
});
console.log("form data:", form_values)
// with form_values continue with your coding
$.ajax({
type: 'POST',
url: 'script.php',
dataType: 'json',
data: "id="+e+"&mod="+e1+"&curc="+curc,
success: function(data) {
$('mform').show();
document.getElementById("itog").innerHTML = data.d+data.a;
},
error: function(xhr) {
document.getElementById("itog").innerHTML = '123';
}
});
});
}
Hope it will help you :)
I have chat and i am loading these by ajax
$.ajax({
type: "GET",
url: "chat/mini.php",
success: function(chat){
$('.chat-message').html(chat);
},
error: function(err) {
console.log(err);
}
});
And i Have in chat/mini.php link to delete
X
and script
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if (confirm("Sure you want to delete? There is NO undo!")) {
$.ajax({
type: "GET",
url: "chat/delete.php",
data: info,
success: function () {
}
});
}
return false;
});
And these cod working when i not loading chat with ajax but when i loading these with ajax these don't working. I must add something to work?
I am trying to send an ajax request to complete a task when a link is clicked. For some reason the e.preventDefault is not working and I still get sent to the page. Is there something I am missing?
It is simply supposed to go to the page set the check-box to checked (or unchecked) then redirect. But again it just goes to the page. Any help would be great!
here is the main.js
$(function() {
$('.ajax-task-complete').on({
click: function(e) {
e.stopPropagation();
e.preventDefault();
var href = $(this).attr('href');
$('<div></div>').load(href+' form', function() {
// Set Form
var form = $(this).children('form');
// Set Checkbox
var cb = form.find('input[type="checkbox"]');
// Taggle Checkbox
cb.prop('checked', !cb.prop('checked'));
// Form Action URL
var url = form.attr('action');
// Set Data
var data = form.serialize();
$.ajax({
url: url,
data: data,
method: 'post',
dataType: 'json',
cache: false,
success: function(obj) {
var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
},
complete: function() {
console.log('complete');
},
error: function(err) {
console.log(err);
}
});
});
}
});
});
here is the requested button
<td id="task-complete-{{ entity.id }}">
{% if entity.completed %}
<a class="check ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">✔</a>
{% else %}
<a class="uncheck ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">✔</a>
{% endif %}
</td>
This is your problem:
Uncaught ReferenceError: $ is not defined?
Read HERE from SO how you load your jQuery-plugin the right way.
you might need to stop bubbling depending on where the click event is occurring. Try adding this and see what happens.
e.stopPropagation();
**"$"**
is missing before (function() {
javascript pageload event should be like
$(function(){
//code here
});
or
function will be called by themself
(function(){
//code here
)}();
or
(function($){
//code here
})(jQuery)
You can check the fiddle here
Your scope is wrong, you are missing the () after (function)(). The function is never called :
(function() {
$('.ajax-task-complete').on({
click: function(e) {
e.stopPropagation();
e.preventDefault();
var href = $(this).attr('href');
$('<div></div>').load(href+' form', function() {
// Set Form
var form = $(this).children('form');
// Set Checkbox
var cb = form.find('input[type="checkbox"]');
// Taggle Checkbox
cb.prop('checked', !cb.prop('checked'));
// Form Action URL
var url = form.attr('action');
// Set Data
var data = form.serialize();
$.ajax({
url: url,
data: data,
method: 'post',
dataType: 'json',
cache: false,
success: function(obj) {
var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
},
complete: function() {
console.log('complete');
},
error: function(err) {
console.log(err);
}
});
});
}
});
})(); //Add () here
But is the scope really needed here?
Maybe you meant a ready handler, then it should be like this :
$(function); //Missing '$'
Try placing the preventDefault event at the end of the function as below
$('.ajax-task-complete').on({
click: function(e) {
//
//your code here then,
e.preventDefault();
e.stopPropragation();
});
I can't test if it works or not, as I'm on mobile.
I have wrote a webkit notification script on my web app to pull notifications from a database. The code is seen below:
function checkNotifications() {
if (window.webkitNotifications.checkPermission() == 1) {
window.webkitNotifications.requestPermission();
}
else {
$.ajax({
type: "GET",
dataType: 'json',
url: '/check_notifications',
success: function(data){
if (data){
var ticketId = data.ticket_id;
console.log(data);
var comment = data.comment;
var createdDate = data.created_at;
var notificationComment = data.comment;
var notificationId = data.notifcation_id;
var notification = window.webkitNotifications.createNotification('/pt_logo_small.png', 'Project Ticket '+ticketId+ ' Updated!', 'Ticket has been updated. Click here to see!');
notification.show();
console.log(notificationId);
notification.onclick = function(){
this.close();
console.log("NOTIFICATION WAS CLICKED!")
$.ajax({
type: "GET",
dataType: 'json',
url: '/read_notifications/' + notificationId,
success: function(){
window.location = '/pto/' + ticketId;
},
error: function(){
window.location = '/pto/' + ticketId;
}
});
console.log(ticketId, comment, createdDate);
};
}
}
});
}
setTimeout(checkNotifications, 20000);
}
For some reason. I if select another tab, or go to another path inside my webapp, the script still runs to display the notifications, however the .onclick event never triggers.
Anyone have any idea why the even wouldn't trigger?
According to Apple, onclick should bring the page which created the event to focus, which it does. However nothing inside my .onclick function triggers.