I have a scoping problem that i cannot find a solution for in Google here is a simplified version of my code
jQuery.widget( "myNamespace.myPlugin", {
options: {},
_create: function() {
$main = this.element;
},
_init: function() {
$main.text('ajax running');
$.ajax({url:'some/url/path'})
.done(function(data) {
this._callback(data);
});
},
_callback: function() {
$main.text('ajax complete');
}
});
$('.widget_element').myPlugin();
<html>
<head>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
</head>
<div class="widget_element"></div>
</html>
The error i am getting is:
TypeError: this._callback is not a function
Is there a better way of performing this task in within the widget environment?
Thanks
As with most problems, a solution only rears its head AFTER you post a question on SO
Aparently self = this is perfectly valid
jQuery.widget( "myNamespace.myPlugin", {
options: {},
_create: function() {
self = this;
$main = this.element;
},
_init: function() {
$main.text('ajax running');
$.ajax({url:'some/url/path'})
.done(function(data) {
self._callback(data);
});
},
_callback: function() {
$main.text('ajax complete');
}
});
I hope this helps someone in the future
Related
Map is showing in all browsers like chrome,Firefox but the map is not showing in IE 11,this code is working in chrome but its not working in IE11 once add the load event and loop the data,answer is appreciable? but its working in chrome if i use load event also
<html>
<head>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js?1"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://www.highcharts.com/samples/maps/demo/all-maps/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
var mapData = Highcharts.maps['custom/world'];
var data = [{"Name": "Australia","status": "Live"}];
$('#container').highcharts('Map', {
chart: {
events: {
load: function() {
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach((el) => {
if (el['name'] == this.series[1].data[i].Name) {
if(this.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
series: [{
name: 'Countries',
mapData: mapData,
}, {
name: 'Countries options',
visible: false,
data: data
}]
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The answer is simple - you are using arrow function which is not supported in IE11: caniuse.com/#feat=arrow-functions
If you want to make your code working on IE11, it is not enough to change arrow function to normal function, because you will have different this. Using arrow function your this is the same this like in your load() function. But when you define a normal function() (instead of arrow function), your this will be changed. That's why you need to define var chart = this; in your load() function and replace this to chart in few places. Here you have working code:
chart: {
events: {
load: function() {
var chart = this;
for (let i = 0; i < this.series[1].data.length; i++) {
this.series[0].data.forEach(function(el) {
if (el['name'] == chart.series[1].data[i].Name) {
if(chart.series[1].data[i].status == 'Live'){
el.update({color: "lightgreen"});
}
}
return el
})
}
}
}
},
Working IE11 demo: https://codepen.io/raf18seb/full/RYjavx/
I'm using Select2 v4.0.3 and I populate the element using ajax.
$("#el").select2({
multiple: true
maximumSelectionSize: 1,
ajax: {
url: url,
data: function (params) {
return {
name: params.term
};
},
processResults: function (data) {
return {
results: $.map(data.results, function(obj) {
return {id: obj.id, text: obj.name, key: obj.key};
}
})
};
}
}
});
I want to redirect the client before a result is selected. The problem is I need the key attribute from the clicked result. To understand better what I want to do, I paste here a snippet that works after the selection is made.
$("#el").on("select2:select", function(e) {
var selected = $(this).select2('data')[0];
location.href = base_url + '?key=' + selected.key;
});
You can use event.params.args.data.id to get the key attribute from the clicked result. So, your code would probably work like:
$("#el").on("select2:select", function(e) {
var selected = event.params.args.data.id;
location.href = base_url + '?key=' + selected;
});
I slightly modified the official Github repositories example to show my point.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select class="js-data-example-ajax" style="width: 100%">
<option value="3620194" selected="selected">select2/select2</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: $.map(data.items, function(ghrepo) {
return {
text: ghrepo.archive_url,
id: ghrepo.archive_url
}
})
}
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1
}).on('select2:selecting', function(event, params) {
event.preventDefault();
repoId = event.params.args.data.id;
console.log(repoId);
});
</script>
</body>
</html>
I have such an issue, I am using few script like jquery carousel slider, jquery drop down menu but when I am trying to add jqueryui dialog all others scripts do not work. Here is my code:
Before I add JqueryUi dialog:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>
<script>
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
$('.boxgrid2.caption').hover(function(){
$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});
});
$('.boxgrid3.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
});
</script>
<script>
jQuery(document).ready(function($) {
jQuery('#mega-menu-1').dcMegaMenu();
});
</script>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
});
-->
</script>
Code with JqueryUi dialog:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='js/jquery.liquidcarousel.pack.js'></script>
<!--Dialog start-->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"
});
$( ".log-in" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<!--Dialog end-->
<script>
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
$('.boxgrid2.caption').hover(function(){
$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'240px'},{queue:false,duration:160});
});
$('.boxgrid3.caption').hover(function(){
$(".cover", this).stop().animate({top:'40px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
});
});
</script>
<script>
jQuery(document).ready(function($) {
jQuery('#mega-menu-1').dcMegaMenu();
});
</script>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#liquid1').liquidcarousel({height:129, duration:100, hidearrows:false});
});
-->
</script>
One more very strange thing for me is that when I add JqueryUi dialog script after all script (to the end of this code) it doesn't work at all.
Any ideas why?
I have used noConflict();
add to script $jQ = jQuery.noConflict(); then change all $ -> $jQ
<script>
$jQ = jQuery.noConflict();
$jQ .fx.speeds._default = 1000;
$jQ (function() {
$jQ ( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "fade"
});
$jQ ( ".log-in" ).click(function() {
$jQ ( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
I have the data table from the jquery plugin dataTables (http://datatables.net/) that I want to refresh upon ajax success. I tried the following code but its not working. Any help will be appreciated
$(document).ready(function() {
oTable = $('#mytable').dataTable();
var fa = 0;
$('#submit tbody td ').click(function() {
var gCard = $('#mytable tbody').delegate("tr", "click", rowClick);
});
function rowClick() {
fa = this;
var id = $("td:eq(1)", this).text();
cardNumber = $.trim(id);
$.ajax({
url : 'myurltopostto',
type : 'POST',
data : {
id : id
},
success : function(data) {
oTable.fnDraw(); //wanted to update here
},
error : function() {
console.log('error');
}
});
}
});
You can use : fnDeleteRow which will take care of refreshing the table html and data internally, look up API details here:
http://datatables.net/ref
oTable.fnDeleteRow( fa );
hello my dears programers... sorry... my inglish is very bad but I help you... my following is this:
<script type="text/javascript">
function Ajax()
{
var
$http,
$self = arguments.callee;
if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if ($http) {
$http.onreadystatechange = function()
{
if (/4|^complete$/.test($http.readyState)) {
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 10000);
$( this ).hide( "slow" );
}
};
$http.open('GET', 'cls_Noticias/last_noticias.php', true);
$http.send(null);
}
}
</script>
</head>
<body>
<script type="text/javascript">
setTimeout(function() {Ajax();}, 10000);
</script>
<div id="ReloadThis">Espere a que la pagina se actualice!</div>
</body>
good life!
I am suddenly getting a most unwelcome error on this page:
Error: $("#accordion").accordion is not a function
My jQuery code is as follows:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h4", autoHeight: false, collapsible: true });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
// controls the sidebar navigation action
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
$(window).ready(function() {
$('li.products ul').show();
$('li.technical ul').show();
$('li.tips ul').show();
});
});
</script>
I has worked for weeks and today...errors all the way.
I would appreciate any help in determining the cause of the error.
Thanks.
Found the problem:
This:
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
does not link to anything anymore.
The requested URL
/svn/tags/latest/ui/ui.accordion.js
was not found on this server.