How to remove Local Storage in another JS file - javascript

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.

Related

set Value of select mobius not working javascript

good afternoon, have all of you, I have this problem. I am using selectr mobius1 and when I click to edit data, the "Type of Service" field does not show me the value that it should show me.
my select is initialized like this
$selecttSE = new Selectr("#tipo_SAPIE",{});
I use this onchange so that when a product is chosen the list of services changes
$("#tipo_productoE").on('change', function() {
var tipoprod = $("#tipo_productoE option:selected").val();
var select_servapi = $("#tipo_SAPIE");
$.ajax({
url: '<?= base_url('productos/select_servicios') ?>',
type: 'get',
data: {
tipoprod: tipoprod
},
beforeSend: function(){
$selecttSE.removeAll();
},
success: function(response) {
if (response.length >2 ) {
select_servapi.attr('disabled', false);
$.each(JSON.parse(response), function(i, item) {
$selecttSE.add([{
value: item.servicioapiid,
text: item.alias+' '+item.moneda+''+item.costo}])
});
let select = $("#tipo_SAPIE").parents().children('small')[0];
$(select).empty();
$(select).html('Requerido');
$(select).addClass('badge badge-soft-danger');
} else {
select_servapi.attr('disabled', true);
}
},
});
});
And my function to get the data is this
function getProducto(idproducto) {
var idproducto = idproducto;
$.ajax({
url: '<?= base_url('productos/getProducto') ?>',
type: 'GET',
data: {
idproducto: idproducto
},
success: function(response) {
console.log(response)
$selecttSE.removeAll();
$.each(JSON.parse(response), function(i, item) {
document.getElementById("tipo_productoE").value = item.tipoproductoid;
$("#tipo_productoE").trigger('change');
$selecttSE.setValue(item.servicioapiid);
});
},
error: function(errors) {
},
});
}
Thank you for taking the time to see my post have a great afternoon and much success.

popup close event detect javascript

I want to know hot to detect popup close event, When i open popup close event automatically call, its i am using .close event.
function start() {
$.ajax({
type: "post",
dataType: "html",
url: 'client_get',
crossDomain: true,
data: {
'id': '123'
},
success: function(response) {
try {
var json = JSON.parse(response);
} catch (err) {
start();
}
jQuery(document).ready(function($) {
var close_interval = setInterval(function() {
var newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
if (newwindow.close) {
console.log("Closed");
clearInterval(close_interval);
}
}, 1000);
});
}
});
}
Capturing the close event of a window requires the onbeforeunload event handler:
var new_window = window.open('some url')
new_window.onbeforeunload = function(){ my code}
so in your case:
function start() {
$.ajax({
type: "post",
dataType: "html",
url: 'client_get',
crossDomain: true,
data: {
'id': '123'
},
success: function (response) {
try {
var json = JSON.parse(response);
} catch (err) {
start();
}
jQuery(document).ready(function ($) {
var close_interval = setInterval(function () {
var newwindow = window.open('https://www.example.com/key?v=' + json[0]['url'], 'key', 'width=800,height=600,status=0,toolbar=0');
newwindow.onload = function() {
newwindow.onbeforeunload = function() {
console.log("Closed");
clearInterval(close_interval);
}
}
}, 1000);
});
}
});
}

Jquery replaceWith in a Foreach loop

When I execute the below code all the img with the id of imgg will be replaced because they are in a foreach loop, but I want to apply that to the clicked one only. Can any one help?
Html:
<button type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" style="width:100px;height:30px">
<p id="imgg">Add to Cart</p>
</button>
JS:
$(document).ready(function() {
$(document).on('submit', '#reg-form', function() {
var data = $(this).find("#post_id").val();
//var ln = $("#lname").val();
//var data = 'fname='+fn+'&lname='+ln;
// var data = $(this).serialize();
$.ajax({
type: 'POST',
url: '{{url("/ajax")}}',
data: {
'name': data,
'_token': $('input[name=_token]').val()
},
success: function(data) {
$(imgg).replaceWith('<img id=imgg src=img/ajax.gif> ');
setTimeout(function() {
$(imgg).replaceWith(' <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
}, 1300);
console.log(data);
},
error: function(data) {
alert("You must Login First");
}
});
return false;
});
});
Thanks everyone i found the solution But you da real MVP, here it is
$(document).ready(function()
{
$(document).on('submit', '#reg-form', function()
{
var imgid = $(this).find("#imgg");
var data = $(this).find("#post_id").val();
//var ln = $("#lname").val();
//var data = 'fname='+fn+'&lname='+ln;
// var data = $(this).serialize();
$.ajax({
type : 'POST',
url : '{{url("/ajax")}}',
data: {'name':data, '_token': $('input[name=_token]').val()},
success: function(data) {
$(imgid).replaceWith('<img id=imgg src=img/ajax.gif> ');
var thisForm = this;
setTimeout(function() {
$(imgg).replaceWith(' <p id=imgg>Add to Cart</p> ').hide('blind', {}, 500)
}, 1300);
console.log(data);
},
error : function(data)
{
alert("You must Login First");
}
});
return false;
});
});
</script>
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
Instead of using the $(imgg) use $(this), and you also missed the quotations when you where giving the id of iamge when you where using .replaceWith:
success: function(data) {
$(this).replaceWith('<img id="imgg" src="img/ajax.gif>" ');
var thisForm = this;
setTimeout(function() {
$(thisForm).replaceWith(' <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
}, 1300);
console.log(data);
},
Reason?
Simple. The this object doesn't change. It is the owner of the function. See more about why here: Jquery - When to use "this" and when to use "$(this)"?
EDIT2
Now i have to put that in the upper level so this:
$(document).ready(function() {
$(document).on('submit', '#reg-form', function() {
var vm = this //Upper Level
var data = $(this).find("#post_id").val();
$.ajax({
type: 'POST',
url: '{{url("/ajax")}}',
data: {
'name': data,
'_token': $('input[name=_token]').val()
},
success: function(data) {
$(vm).replaceWith('<img id=imgg src=img/ajax.gif> ');
setTimeout(function() {
$(vm).replaceWith(' <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
}, 1300);
console.log(data);
},
error: function(data) {
alert("You must Login First");
}
});
return false;
});
});
Please refer here about this particular problem:
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Jquery Ajax called 'click' called on an object that does not implement interface HTMLElement

I have the following javascript:
$('#edit_category').on('click','#btn_save_category_name',function(){
currently_edit.text($('#txt_edit_category').val());
edit_category_name(currently_edit,current_category_id);
$('#edit_category').modal('hide')
})
function edit_category_name(name, id){
$.ajax({
type: 'POST',
url: '/Category/edit_team_category',
dataType: 'json',
data: {
request: 'ajax',
name: name,
id: id
},
success: function (data) {
}
});
}
Now when i attempt this i get the following error: called 'click' called on an object that does not implement interface HTMLElement.
But if i comment the function line out aka : edit_category_name(currently_edit,current_category_id);
everything works fine.
Can anyone tell me why this is happening?
Update my full script
var mode = 'team';
var currently_edit = '';
var current_team_id = 0;
var current_category_id = 0;
jQuery(document).ready(function(){
//Main click function for Team (selection of team)
$('#team_wrapper').on('click', '.panel-heading', function () {
if(mode === 'team'){
current_team_id = $(this).siblings('small').text()
title = $(this).find('.text-white').text();
var i = 100;
$('#span_search').hide();
$('#btn_new_team').fadeOut();
$('.col-lg-3').each(function(){
$('.alt').toggle('slow');
$(this).fadeOut(300,function(){
$(this).remove();
});
});
$('#team_title').text('Select Category');
$('#btn_new_category').delay(500).fadeIn();
$('#selected_team_name').text(title);
$('#selected').delay(695).fadeIn();
$('#span_search').delay(500).fadeIn();
$('#back').delay(500).fadeIn();
generate_categories();
mode = 'category';
}else{
$(this).next('div').find('a')[0].click();
}
})
$('#team_wrapper').on('click', '.btn_administrate', function(){
current_team_id = $(this).next('.team_id').text();
load_team_members(current_team_id);
});
//Modal category:
//create
$('#btn_create_category').click(function(){
add_category($('#txt_create_category').val());
$('#group-form').modal('hide');
$('#txt_create_category').val('');
})
// edit
$('#team_wrapper').on('click','.team_category_edit',function(){
current_category_id= $(this).next('input').val()
edit_mode('txt_edit_category',$(this).closest("div").prev().find("h3"));
})
$('#edit_category').on('click','#btn_save_category_name',function(){
currently_edit.text($('#txt_edit_category').val());
edit_category_name(currently_edit,current_category_id);
$('#edit_category').modal('hide')
})
});
function edit_category_name(name, id){
$.ajax({
type: 'POST',
url: '/Category/edit_team_category',
dataType: 'json',
data: {
request: 'ajax',
name: name,
id: id
},
success: function (data) {
}
});
}
in this example:
var current_team_id = 1;
var current_category_id = 2;
What is the value of currently_edit? I am assuming this is a jQuery object not a text value. Try the following instead.
edit_category_name(currently_edit.text(),current_category_id);
Update
As Barmar mentioned, currently_edit.text(...) is invalid based on what you have shared. perhaps what you meant to do was:
currently_edit = $('#txt_edit_category').val();
Try changing this line currently_edit.text($('#txt_edit_category').val());
with this : currently_edit = $('#txt_edit_category').val();

TypeError: this.functionName is not a function

So I have created a small javascript class that is supposed to AJAX post something in a PHP file. The class is the following:
var cms = cms || {};
cms.load_view = (function() {
return {
change: function() {
jQuery("#layout-switch a").on('click', function()
{
jQuery('#layout-switch a').removeClass('current');
jQuery(this).addClass('current');
var column_number = jQuery(this).attr('data-name');
var category = jQuery("#cat_id").val();
var data = {mode: column_number, cid: category};
this.postChange(data);
});
},
postChange: function(data) {
jQuery.ajax({
type: 'post',
url: SITEURL + "/modules/digishop/loadcategory.php",
data: data,
beforeSend: function () {
jQuery('#digishop').animate({
opacity: 0
}, 250, function () {
jQuery(this).addClass(column_number);
jQuery(this).animate({
opacity: 1
}, 250);
});
},
success: function (html) {
jQuery("#digishop").html(html);
}
});
return true;
}
}
})(jQuery);
jQuery(document).ready(function() {
cms.load_view.change();
});
However, when I click the selector Firebug says that postChange is not a function when it is called in the first method, a.k.a. this.postChange(data);
Any ideas?
Thanks!
Inside the change function, this is a reference to the link you clicked. Replace this.postChange(data); with cms.load_view.postChange(data);.

Categories