Jquery code issue, is there a proper format? - javascript

I have this code in my .js file and ever since it's been added some other Jquery features have stopped working. Is the issue in how it is written? Thanks!
$(window).load ->
$('a[data-target]').click (e) ->
e.preventDefault()
$this = $(this)
if $this.data('target') == 'Add to'
url = $this.data('addurl')
new_target = "Remove from"
else
url = $this.data('removeurl')
new_target = "Add to"
$.ajax url: url, type: 'put', success: (data) ->
$('.cart-count').html(data)
$this.find('span').html(new_target)
$this.data('target', new_target)
$(window).load ->
$('#mycart .fi-x').click (e) ->
e.preventDefault()
$this = $(this).closest('a')
url = $this.data('targeturl')
$.ajax url: url, type: 'put', success: (data) ->
$('.cart-count').html(data)
$this.closest('.cart-movie').slideUp()

That's coffeescript, you'll likely need to convert it to javascript:
$(window).load(function() {
return $('a[data-target]').click(function(e) {
var $this, new_target, url;
e.preventDefault();
$this = $(this);
if ($this.data('target') === 'Add to') {
url = $this.data('addurl');
new_target = "Remove from";
} else {
url = $this.data('removeurl');
new_target = "Add to";
}
return $.ajax({
url: url,
type: 'put',
success: function(data) {
$('.cart-count').html(data);
$this.find('span').html(new_target);
return $this.data('target', new_target);
}
});
});
});
$(window).load(function() {
return $('#mycart .fi-x').click(function(e) {
var $this, url;
e.preventDefault();
$this = $(this).closest('a');
url = $this.data('targeturl');
return $.ajax({
url: url,
type: 'put',
success: function(data) {
$('.cart-count').html(data);
return $this.closest('.cart-movie').slideUp();
}
});
});
});

Related

Verification with ajax call

I know it has been answered but since Im ignorant with javascript and ajax, need help. I had found a code for crud operations. My problem is that html verification is not working. When the modal submits the form the required fields in html cannot block the form operation not to be submited. Can anyone help with the script? Here is the code for all operations:
$(document).on('click','#btn-add',function(e) {
var data = $("#user_form").serialize();
$.ajax({
data: data,
type: "post",
url: "save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#modal_task').modal('hide');
alert('Η εργασία καταχωρήθηκε με επιτυχία!');
window.location.reload(true);
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on('click','.update',function(e) {
var id=$(this).attr("data-id");
var name=$(this).attr("data-name");
var email=$(this).attr("data-email");
var phone=$(this).attr("data-phone");
var city=$(this).attr("data-city");
$('#id_u').val(id);
$('#name_u').val(name);
$('#email_u').val(email);
$('#phone_u').val(phone);
$('#city_u').val(city);
});
$(document).on('click','#update',function(e) {
var data = $("#update_form").serialize();
$.ajax({
data: data,
type: "post",
url: "backend/save.php",
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
$('#editEmployeeModal').modal('hide');
alert('Data updated successfully !');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
}
});
});
$(document).on("click", ".delete", function() {
var id=$(this).attr("data-id");
$('#id_d').val(id);
});
$(document).on("click", "#delete", function() {
$.ajax({
url: "backend/save.php",
type: "POST",
cache: false,
data:{
type:3,
id: $("#id_d").val()
},
success: function(dataResult){
$('#deleteEmployeeModal').modal('hide');
$("#"+dataResult).remove();
}
});
});
$(document).on("click", "#delete_multiple", function() {
var user = [];
$(".user_checkbox:checked").each(function() {
user.push($(this).data('user-id'));
});
if(user.length <=0) {
alert("Please select records.");
}
else {
WRN_PROFILE_DELETE = "Are you sure you want to delete "+(user.length>1?"these":"this")+" row?";
var checked = confirm(WRN_PROFILE_DELETE);
if(checked == true) {
var selected_values = user.join(",");
console.log(selected_values);
$.ajax({
type: "POST",
url: "backend/save.php",
cache:false,
data:{
type: 4,
id : selected_values
},
success: function(response) {
var ids = response.split(",");
for (var i=0; i < ids.length; i++ ) {
$("#"+ids[i]).remove();
}
}
});
}
}
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function(){
if(this.checked){
checkbox.each(function(){
this.checked = true;
});
} else{
checkbox.each(function(){
this.checked = false;
});
}
});
checkbox.click(function(){
if(!this.checked){
$("#selectAll").prop("checked", false);
}
});
});

How to remove Local Storage in another JS file

From below case, can someone help me to know how to remove localStorage which i have implemented below :
var serverSelectorDemo = function() {
loadrightdata();
function loadrightdata() {
$('#kt_datatable_fetch_display2').html(localStorage.rightdata);
};
$('#kt_datatable2').on('click','tr button', function() {
var id = $(this).data('id');
$.ajax({
type: 'post',
url: 'src/khu-pusat/compare/right-side/right-value.php',
data: {
'rowid': id
},
success: function(data) {
$('#kt_datatable_nodata2').addClass('hidden');
localStorage.rightdata = data;
$('#kt_datatable_fetch_display2').html(localStorage.rightdata);
return false;
}
});
}).click(function() {
$('#kt_datatable_fetch_display2').empty();
});
};
So far I can't find a way that can do this.

Javascript on change not working (Ajax to load filtered items)

I am in shopify and trying to Ajax a filter. I have a dropdown and the dropdown onchange should use Ajax to replace the contents of a bunch of products in the #collection div.
My onchange can't find my update products function. What is wrong with my syntax?
<script>
$(function() {
var popped = ('state' in window.history && window.history.state !== null),
initialURL = location.href;
//function to handle the scenarios where back and forward buttons used in browser
$(window).bind("popstate", function(e) {
// Ignore inital popstate that some browsers fire on page load
var initialPop = !popped && location.href == initialURL;
popped = true;
if (initialPop) {
return;
}
ajaxLoadPage(location.href);
});
//the ajax function that does the AJAX calls to get the products and load them into the grid
var ajaxLoadPage = function(url) {
$.ajax({
type: 'GET',
url: url,
data: {},
complete: function(data) {
$('#collection').html($("#collection", data.responseText).html());
history.pushState({
page: url
}, url, url);
}
});
}
}
function update_flavors(ajax_page) {
$.ajax({
type: "GET",
url: ajax_page + "?view=flavors-field",
success: function(html) {
$("#collection").html(html);
}
});
}
function update_products(ajax_page) {
$.ajax({
type: "GET",
url: ajax_page + "?view=products",
data: {},
success: function(html) {
$("#collection").html(html);
history.pushState({
page: ajax_page
}, "", ajax_page);
}
});
}
</script>

Ajax, prevent multiple request on click

I'm trying to prevent multiple requests when user click on login or register button. This is my code, but it doesn't work. Just the first time works fine, then return false..
$('#do-login').click(function(e) {
e.preventDefault();
if ( $(this).data('requestRunning') ) {
return;
}
$(this).data('requestRunning', true);
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
$(this).data('requestRunning', false);
}
});
});
Any ideas? Thanks!
The problem is here:
complete: function() {
$(this).data('requestRunning', false);
}
this no longer points to the button.
$('#do-login').click(function(e) {
var me = $(this);
e.preventDefault();
if ( me.data('requestRunning') ) {
return;
}
me.data('requestRunning', true);
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
me.data('requestRunning', false);
}
});
});
Use on() and off(), that's what they are there for :
$('#do-login').on('click', login);
function login(e) {
e.preventDefault();
var that = $(this);
that.off('click'); // remove handler
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize()
}).done(function(msg) {
// do stuff
}).always(function() {
that.on('click', login); // add handler back after ajax
});
});
In your ajax callbacks the context (this) changes from the outer function, you can set it to be the same by using the context property in $.ajax
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
context: this, //<-----
success: function(msg) {
//stuffs
},
complete: function() {
$(this).data('requestRunning', false);
}
});
You can disable the button.
$(this).prop('disabled', true);
I have also faced a similar problem.
Just adding $('#do-login').attr("disabled", true); gives me the solution.
$('#do-login').click(function(e) {
e.preventDefault();
$('#do-login').attr("disabled", true);
.........
.........
Here do-login is button id.
I've tried this and worked very fine for me, I was having trouble that $.ajax send more request until results return,
var settings = {
"url": "/php/auth/login.php",
"method": "POST",
"timeout": 0,
"async": false,
"headers": {
"Content-Type": "application/json; charset=utf-8"
},
"data": jsondata, //data pass here is in JSON format
};
$.ajax(settings).done(function (ress) {
try{
console.log(ress, "Result from Ajax here");
}
catch(error){
alert(error);
console.log(ress);
}
});
async : false worked for me.
Thanks.
Or you can do it by $(this).addClass("disabled"); to you button or link and after click is performed, you can $(this).removeClass("disabled");.
// CSS
.disabled{
cursor: not-allowed;
}
// JQUERY
$('#do-login').click(function(e) {
e.preventDefault();
$(this).addClass("disabled");
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
context: this,
success: function(msg) {
//do more here
$(this).removeClass("disabled");
},
});
});
P.S. If you use bootstrap css, you do not need the css part.
I found the approach useful. I've implemented it as a general purpose function for jQuery with ES6.
export default function (button, promise) {
const $button = $(button);
const semaphore = 'requestRunning';
if ($button.data(semaphore)) return null;
$button.data(semaphore, true);
return promise().always(() => {
$button.data(semaphore, false);
});
}
Because $.ajax() returns a promise, you simply pass in the promise and the function takes care of the rest.
Roughly speaking, here's the usage.
import preventDoubleClick from './preventdoubleclick';
...
button.click(() => {
preventDoubleClick(this, () => $.ajax()
.done(() => { console.log("success") }));
});
This function can help you with control multi Ajax requests and it's has timeout function which can return flag status to 0 after ex. 10sec (In case the server took more than 10 seconds to respond)
var Request_Controller = function(Request_Name = '', Reactivate_Timeout = 10000)
{
var a = this;
a.Start_Request = function(){
if(window.Requests == undefined){
window.Requests = {};
}
window.Requests[Request_Name] = {'Status' : 1, 'Time': + new Date()};
}
a.End_Request = function(){
if(window.Requests == undefined){
window.Requests = [];
}
window.Requests[Request_Name] = undefined;
}
a.Is_Request_Running = function(){
if(window.Requests == undefined || window.Requests[Request_Name] == undefined){
return 0;
}else{
var Time = + new Date();
// Reactivate the request flag if server take more than 10 sec to respond
if(window.Requests[Request_Name]['Time'] < (Time - Reactivate_Timeout))
{
return 0;
}else{
return 1
}
}
}
}
To use it:
var Request_Flag = new Request_Controller('Your_Request_Name');
if(!Request_Flag.Is_Request_Running()){
Request_Flag.Start_Request();
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
Request_Flag.End_Request();
}
});
}
for prevent multiple ajax request in whole site. For example: If use ajax request in other ajax page, Using ajax in php loop, etc, Give you multiple ajax request with one result. I have solution:
Use window.onload = function() { ... }
instead of
$(document).ready(function(){ ... });
on the main index.php page. Its will be prevent all multi request. :)

Ajax call not succeeding after function call

I am attempting to load dynamic data based on the specific URI segment thats on the page.
Heres my Javascript:
$(document).ready(function() {
$(function() {
load_custom_topics();
});
$('#topics_form').submit(function() {
var topic = document.getElementById('topics_filter').value
$.ajax({
type: "POST",
url: 'ajax/update_session_topic',
dataType: 'json',
data: { topic: topic },
success: function(){
load_custom_topics()
}
});
return false;
});
function load_custom_topics(){
$.ajax({
type: "POST",
url: 'ajax/load_custom_topics',
dataType: 'json',
data: {},
success: function (html) {
$('div.topics_filter').html(html['content']);
get_threads();
}
});
}
function get_threads(){
var page = document.getElementById('page').value
$.ajax({
type: "POST",
url: 'ajax/get_threads',
dataType: 'json',
data: {page: page},
success: function (html) {
$('div#thread_list').html(html['content']);
}
});
}
});
So, as you can see, on page load, it kicks off load_custom_topics which runs just fine. Its then supposed to call get_threads(). This is where the thing stops, and I get no data.
Get_threads()
public function get_threads()
{
$session = $this->session->userdata('active_topic');
if ($this->input->post('page') == '1')
{
$data['list'] = $this->right_model->thread_list_all();
$data['test'] = "all";
} else {
$data['list'] = $this->right_model->thread_list_other($session);
$data['test'] = "not all";
}
if ($data['list'] == FALSE)
{
$content = "no hits";
} else {
$content = $this->load->view('right/thread_list', $data, TRUE);
}
$data['content'] = $content;
$this->output->set_content_type('application/json')->set_output(json_encode($data));
}
While I create the 'page' dynamically, the HTML outputs to this:
<div name="page" value="1"></div>
Any reason why get_threads() is not running?
This does not have an ID. It has a name.
<div name="page" value="1"></div>
This means that your request for getElementById is failing. So this line of code should be showing a TypeError in your console.
var page = document.getElementById('page').value

Categories