My web + Jquery plugins is working well on Firefox, Chrome, Safari (win & Osx) & Android also. But it sucks with Windows + Internet Explorer because it does not load some js. I am going crazy because it works in all scenarios but IE.
IE shows me 3 errors warnings. My question is. Must IE compile perfect all these 3 errors before showing well the page? For example I have a real time search using jquery, but it does not work on IE due it shows me an error with that code.
Please could you help me validate this "valid" code? Thank you all in advance
$(function() {
// find all the input elements with title attributes
$('input[title!=""]').hint();
}
);
(function ($) {
$.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur'; }
return this.each(function () {
// get jQuery version of 'this'
var $input = $(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = $(this.form),
$win = $(window); function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass); }
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass); }
}
).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove); $win.unload(remove); // handles Firefox's autocomplete
}
}
); }; }
)(jQuery);
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value,
data) {
window.open('ITEM.PRO?&token=#AVP'navegante'&S=' + value.substring(value.length - 4)); }
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
onSelect : onAutocompleteSelect, }; a = $('#query').autocomplete(options); }
);
Next code in your example maybe have some errors:
original code:
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value,
data) {
window.open('ITEM.PRO?&token=#AVP'navegante'&S=' + value.substring(value.length - 4)); }
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
onSelect : onAutocompleteSelect, }; a = $('#query').autocomplete(options); }
);
changed code:
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value, data) {
// in next line added plus signs before and after *navegante*
window.open('ITEM.PRO?&token=#AVP'+navegante+'&S='+value.substring(value.length-4));
}; // semicolon added
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
// in next line removed comma. I think: it generate error in IE
onSelect : onAutocompleteSelect //,
};
a = $('#query').autocomplete(options);
});
I tried several j queries in my website .. Most common problem i faced was this and there was nothing wrong with j query but i had to download the latest >jquery.js file and rename it also with the jquery.js ..
Related
I have two codemirror editors on one page. A drop down list of items and radio group to target the correct editor.
What I want to do is on change of the drop down list insert the value of the item into the targeted editor (deleted by the radio group).
my code is as below: however the function isnt working. When I alert the item value and the target I get expected results, however the function to insert the text is failing:
<script type="text/javascript">
function editor(id) {
var editor = CodeMirror.fromTextArea(id, {
continuousScanning: 500,
lineNumbers: true
});
editor.setSize(null, 550);
}
var config_id = document.getElementById('id_config')
var config = editor(config_id);
var remote_config_id = document.getElementById('id_remote_config')
var remote_config = editor(remote_config_id);
function insertStringInTemplate(str, target) {
if (target== "id_config") {
var doc = config
} else {
var doc = remote_config
}
var cursor = doc.getCursor();
var pos = {
line: cursor.line,
ch: cursor.ch
}
doc.replaceRange(str, pos);
}
$(function(){
// bind change event to select
$('#template_vars').on('change', function () {
var var_data = $(this).val(); // get selected value
var var_target = $('input[name=target]:checked').val();
insertStringInTemplate(var_data, var_target)
return false;
});
});
$("#template_vars").chosen({no_results_text: "Oops, nothing found!"});
</script>
however the function to insert the text is failing
That function (i.e. insertStringInTemplate()) is working good/properly; however, the problem is with the editor() function, where you forgot to return the editor (i.e. the CodeMirror instance).
So a simple fix would be:
function editor(id) {
var editor = CodeMirror.fromTextArea(id, {
continuousScanning: 500,
lineNumbers: true
});
editor.setSize(null, 550);
return editor; // <- here's the fix
}
Demo on CodePen.
However in that demo, I added an if block to the insertStringInTemplate() function, as in the following code:
function insertStringInTemplate(str, target) {
if (target== "id_config") {
var doc = config
} else {
var doc = remote_config
}
// If there's a selection, replace the selection.
if ( doc.somethingSelected() ) {
doc.replaceSelection( str );
return;
}
// Otherwise, we insert at the cursor position.
var cursor = doc.getCursor();
var pos = {
line: cursor.line,
ch: cursor.ch
}
doc.replaceRange(str, pos);
}
I've downloaded this script for use conditional fields in forms:
(function ($) {
$.fn.conditionize = function(options) {
var settings = $.extend({
hideJS: true
}, options );
$.fn.showOrHide = function(is_met, $section) {
if (is_met) {
$section.slideDown();
}
else {
$section.slideUp();
$section.find('select, input').each(function(){
if ( ($(this).attr('type')=='radio') || ($(this).attr('type')=='checkbox') ) {
$(this).prop('checked', false).trigger('change');
}
else{
$(this).val('').trigger('change');
}
});
}
}
return this.each( function() {
var $section = $(this);
var cond = $(this).data('condition');
// First get all (distinct) used field/inputs
var re = /(#?\w+)/ig;
var match = re.exec(cond);
var inputs = {}, e = "", name ="";
while(match !== null) {
name = match[1];
e = (name.substring(0,1)=='#' ? name : "[name=" + name + "]");
if ( $(e).length && ! (name in inputs) ) {
inputs[name] = e;
}
match = re.exec(cond);
}
// Replace fields names/ids by $().val()
for (name in inputs) {
e = inputs[name];
tmp_re = new RegExp("(" + name + ")\\b","g")
if ( ($(e).attr('type')=='radio') || ($(e).attr('type')=='checkbox') ) {
cond = cond.replace(tmp_re,"$('" + e + ":checked').val()");
}
else {
cond = cond.replace(tmp_re,"$('" + e + "').val()");
}
}
//Set up event listeners
for (name in inputs) {
$(inputs[name]).on('change', function() {
$.fn.showOrHide(eval(cond), $section);
});
}
//If setting was chosen, hide everything first...
if (settings.hideJS) {
$(this).hide();
}
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}(jQuery));
I'm trying this because I need to use conditionize() in one of my tabs and when I reload the tab, all works but if I go to other tab and I return to the previous tab(where I need this works), I get that error.
When I change tabs, I'm only reloading one part of the page.
When I load the page this works perfectly, but if I try to call function again from browser console, it tells me that TypeError: $(...)conditionize() is not a function.
I have included the script in header tag and I'm calling it with this script on the bottom of body:
<script type="text/javascript">
$('.conditional').conditionize();
</script>
EDIT:
I have written
<script type="text/javascript">
console.log($('.conditional').conditionize);
setTimeout(function () {console.log($('.conditional').conditionize);}, 2);
</script>
and this print me at console the function, and when 2 milliseconds have passed, it print me undefined
I have found the solution.
Because any reason, the $ object and jQuery object are not the same in my code.
I have discovered it using this on browser console:
$===jQuery
This return false (This was produced because in other JS, I was using the noConflict(), which give me the problem)
Explanation: noConflict()
So I have solved it changing the last line of my JS by:
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}($));
Putting the $ instead of 'jQuery'
Every time when I try to run this code in visual studio I get the above error. I am not sure what is going on. I know it's question like this, but I did not see this error in the answered in the solutions to this problem. Can anyone help me with this?
// display the lightbox
function lightbox() {
var insertContent = "<div id='chartCon'>Test</div>";
// jQuery wrapper (optional, for compatibility only)
(function ($) {
// add lightbox/shadow <div/>'s if not previously added
if ($('#lightbox').size() == 0) {
var theLightbox = $('<div id="lightbox" class="highcharts-container"/>');
var theShadow = $('<div id="lightbox-shadow"/>');
$(theShadow).click(function (e) {
closeLightbox();
});
$('body').append(theShadow);
$('body').append(theLightbox);
//$().keydown(function (e) {
// if (e.which == 27) {
// closeLightbox();
// }
//});
}
// remove any previously added content
$('#lightbox').empty();
// insert HTML content
if (insertContent != null) {
$('#lightbox').append(insertContent);
}
//create chart
var chart = $('#ChartContainer').highcharts('StockChart');
var annots = chart.exportData()
window.chartwidth = $('#ChartContainer').width();
//chart.destroy();
window.chartops.series = window.seriesOptions;
$('#lightbox').highcharts('StockChart', window.chartops);
$('#lightbox').highcharts('StockChart').importData(annots);
// move the lightbox to the current window top
$('#lightbox').css('top', $(window).scrollTop());
// display the lightbox
$('#lightbox').show();
$('#lightbox-shadow').show();
})(jQuery); // end jQuery wrapper
}
// close the lightbox
function closeLightbox() {
// jQuery wrapper (optional, for compatibility only)
(function ($) {
//export possibly changed annotations and reset chartwidth
var chart = $('#lightbox').highcharts('StockChart');
var annots = chart.exportData()
$('#ChartContainer').highcharts('StockChart').removeAllAnnotations();
$('#ChartContainer').highcharts('StockChart').importData(annots);
window.chartwidth = $('#ChartContainer').width();
// hide lightbox/shadow <div/>'s
$('#lightbox').hide();
$('#lightbox-shadow').hide();
// remove contents of lightbox in case a video or other content is actively playing
$('#lightbox').empty();
})(jQuery); // end jQuery wrapper
}
Sorry, this is the function giving me the error
init: function (chart) {
var rangeSelector = this,
options = chart.options.rangeSelector,
buttonOptions = options.buttons || [].concat(rangeSelector.defaultButtons),
selectedOption = options.selected,
blurInputs = rangeSelector.blurInputs = function () {
var minInput = rangeSelector.minInput,
maxInput = rangeSelector.maxInput;
if (minInput) {
minInput.blur();
}
if (maxInput) {
maxInput.blur();
}
};
Using jQuery with IE doesn't work for me.
I have ajax response:
{"update":{"WaterLever":null},"missing":["WaterBallast"]}
Firing different functions upon response:
$.post(...
...
function(data) {
markMissing(data['missing']);
fldUpdate(data['update']);
}
all is working in chrome/FF but only fldUpdate in IE.
IE doesn't find the elements in the object, tried .indexOf, (val in data) etc...
function markMissing(data) {
//loop all fields in form..
$('[id^=cont]').each(function() {
var s = this.id;
//discard prefix 'cont_' in id.
var fld = s.substring(5);
if(fld in data) { //this doesn't work
//if(data.indexOf(fld)) { //this neither.
$(this).addClass('missing');
} else {
$(this).removeClass('missing');
}
});
}
Thanks for any input
I'm trying to lazy load options into a select with jquery. This code works in all browsers I've tested except IE9. (IE7, IE8, FF, Chrome all work)
function LazyLoadOptionsIntoSelect($select, options) {
//get current option
var selectedOptionVal = $select.val();
var selectedOptionDisplay = $select.find("option:selected").text();
//repopulate options
if (selectedOptionDisplay === "--Select a File--"
|| selectedOptionDisplay === "----------") {
$select.html("");
$("<option>").val("").text("--Select a File--")
.appendTo($select);
}
else {
$select.html($("option:selected", $select));
$("<option>").val("").text("----------")
.appendTo($select);
}
$.each(options, function () {
var item = this;
$("<option>").attr("name", function () { return item.display; })
.val(item.value)
.text(item.display)
.appendTo($select);
});
//select previous val
$select.val(selectedOptionVal);
}
$(document).on("focus", ".html-select", function () {
LazyLoadOptionsIntoSelect($(this), HtmlOptions);
});
$(document).on("focus", ".txt-select", function () {
LazyLoadOptionsIntoSelect($(this), TxtOptions);
});
$(document).on("focus", ".xml-select", function () {
LazyLoadOptionsIntoSelect($(this), XmlOptions);
});
I've been trying to solve this for hours but nothing is working.. any solutions or do I need to write a different way to load options in IE9?
options is an array of objects containing value, and display.
This works in simpler use cases, but this apparently is too much for Microsoft to handle. <_<
After hours of fiddling, I tried changing the css to see if redrawing the element worked. It did.
$(document).on("focus", ".html-select", function () {
LazyLoadOptionsIntoSelect($(this), HtmlOptions);
if ( $("body").hasClass("ie9") )
{
$(this).width($(this).width());
}
});