Here is my javascript. It was working well prior to conducting a Git Pull from my partner. On a click the hint loads with fancy box. The load does not work now.
Game = {
loadLevel: function(levelNum) {
$("#level").load("/level/" + levelNum + "/", function() {
// disable all hints except the first
$("#level .hint:not(:first)").prop('disabled', true);
// clicking a hint displays the hint
$("#level .hint").each(function(index, el) {
$(el).fancybox({
href : $(el).attr("data-url"),
type : 'ajax',
});
});
// enable next hint when clicking on a hint
$("#level .hint").on("click", function() {
$(this).next().prop('disabled', false);
});
// if answer is correct load next level
$("#answer").on("click", function() {
$.get("/answer/" + levelNum + "/", {
guess : $('.guess').val()
}, function(answer) {
console.log(answer);
if (answer) {
Game.loadLevel(levelNum+1);
}
});
});
});
},
}
From the error message, it sounds like your partner's code either has an infinatly looping recursive call somewhere or is calling too many functions deep.
Try this:
loadLevel: function(levelNum) {
if (levelNum > 5) return;
$("#level").load("/level/" + levelNum + "/", function() {
I think the problem might be here -- but it could be in code you don't show:
Game.loadLevel(levelNum+1);
This will recurse but there is no way to stop it.
Related
I have searched through here to find a javascript drop down that changes based on another drop down and the code I have works in Chrome. However, it doesn't work in IE 8.0.6 and I was wondering if anyone could highlight the part that isn't working, or suggest another workaround (JQuery, CSS etc).
When I load this in IE, the second drop down is completely blank. The first drop down has a variation of the arrays, when a user selects one of those, they are then presented with the options in the array. So if I select iAffordability, i will be presented with the three values in the array.
Here is the code I am using
iAffordability = new Array("Unable to Get Mortgage", "Cant Afford to Move", "Price");
iDisintruction = new Array("Branch Disinstructed");
iCourtOrder = new Array("Court Order");
iLackofComms = new Array("Marketing", "Viewings", "Offers");
iLackofOffers = new Array("Not Happy with Amount", "Not Happy with Quality");
populateSelect();
$(function () {
$('#WD').click(function () {
populateSelect();
});
});
function populateSelect() {
WD = $('#WD').val();
$('#Sub').html();
if (WD == 'iAffordability') {
$('#Sub').empty();
iAffordability.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
if (WD == 'iDisintruction') {
$('#Sub').empty();
iDisintruction.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
if (WD == 'iLackofComms') {
$('#Sub').empty();
iLackofComms.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
if (WD == 'iLackofOffers') {
$('#Sub').empty();
iLackofOffers.forEach(function (t) {
$('#Sub').append('<option>' + t + '</option>');
});
}
}
JS Fiddle
UPDATE:
The code worked, I just had to add in:
if (!window.console) console = {log: function() {}};
to my existing JS.
I'm going to suggest a refactoring and DRYing of your code:
var lists = {
iAffordability: ["Unable to Get Mortgage", "Cant Afford to Move", "Price"],
iDisintruction: ["Branch Disinstructed"],
iCourtOrder: ["Court Order"],
iLackofComms: ["Marketing", "Viewings", "Offers"],
iLackofOffers: ["Not Happy with Amount", "Not Happy with Quality"]
};
$(function () {
populateSelect();
$('#WD').change(function () {
populateSelect();
});
});
function populateSelect() {
var WD = $('#WD').val(), $sub = $('#Sub');
$sub.empty();
$.each(lists[WD] || ["Error"], function(_, t) {
$sub.append('<option>' + t + '</option>');
});
}
This should work even in older versions of IE because it uses the jQuery $.each function instead of Array.prototype.forEach - as RobG pointed out, this function was only added in IE9 (ah, if only IE forced itself to update like Chrome does...) and it should be much easier to expand in future.
Using tutorials found i'm currently loading new pages with this:
$("a.nav-link").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#userright');
$wrap
// removing old data
.html('')
// slide it up
.hide()
// load the remote page
.load(href + ' #userright', function () {
// now slide it down
$wrap.fadeIn();
});
});
This loads the selected pages perfectly, however the pages have forms that themselves use ajax to send the following:
var frm = $('#profileform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data)
}
});
However this is not sending the form as it did before the page itself was called to the parent page via ajax. Am I missing something? Can you not use an ajax call in a page already called by ajax?
I also have other issues, for example I disable the submit button unless there are any changes to the form, using:
var button = $('#profile-submit');
var orig = [];
$.fn.getType = function () {
return this[0].tagName == "INPUT" ? $(this[0]).attr("type").toLowerCase() : this[0].tagName.toLowerCase();
}
$("#profileform :input").each(function () {
var type = $(this).getType();
var tmp = {
'type': type,
'value': $(this).val()
};
if (type == 'radio') {
tmp.checked = $(this).is(':checked');
}
orig[$(this).attr('id')] = tmp;
});
$('#profileform').bind('change keyup', function () {
var disable = true;
$("#profileform :input").each(function () {
var type = $(this).getType();
var id = $(this).attr('id');
if (type == 'text' || type == 'select') {
disable = (orig[id].value == $(this).val());
} else if (type == 'radio') {
disable = (orig[id].checked == $(this).is(':checked'));
}
if (!disable) {
return false; // break out of loop
}
});
button.prop('disabled', disable);});
However this also doesn't work when pulled to the parent page. Any help much appreciated! I'm really new to ajax so please point out any obvious mistakes! Many thanks in advance.
UPDATE
Just an update to what i've found. I've got one form working by using:
$(document).on('mouseenter', '#profile', function() {
However the following:
$(document).on('mouseenter', '#cancelimage', function() {
$('#cancelimage').onclick=function() {
function closePreview() {
ias.cancelSelection();
ias.update();
popup('popUpDiv');
$('#imgForm')[0].reset();
} }; });
Is not working. I understand now that I need to make it realise code was there, so I wrapped all of my code in a mouseover for the new div, but certain parts still don't work, so I gave a mouseover to the cancel button on my image form, but when clicked it doesn't do any of the things it's supposed to.
For anyone else who comes across it, if you've got a function name assigned to it, it should pass fine regardless. I was trying to update it, and there was no need. Doh!
function closePreview() {
ias.cancelSelection();
ias.update();
popup('popUpDiv');
$('#imgForm')[0].reset();
};
Works just fine.
I have a jsTree using the dnd plugin to allow for drag and dropping of tree items to change their position. However I have noticed that the index is wrong depending on whether you drop the item before or after an object and after googling for many hours about how to fix the index issue, I have come to the conclusion that it would be easier to disable the after unless it is the last tree node of the subset
I am using the following code to call the configure the dnd plugin:
'dnd': {
'drop_finish': function (data) {
alert("hi");
},
'drag_check': function (data) {
alert('hi1');
if (data.r.attr('id') == 'RootNode') {
return false;
} else if (data.r.hasClass('jstree-last')) {
return {
after: true,
before: true,
inside: true
};
} else {
return {
after: false,
before: true,
inside: true
};
}
}
}
however, the hi1 never gets alerted (but the hi does after I have dropped the item) so I can still drop after elements. I have tried finding out how to get the drag check to be called and tried many things like adding the jstree-drop class and other things that have been suggested on this site but I just can't get the hi1 to be alerted.
Any help would be appreciated in solving this problem
Thanks
it looks like "dnd" plugin is using for external drag and drop.
You can use check_move to prevent moving to the last position in node:
"crrm": {
"move": {
"check_move": function(m) {
var length = $(m.np).find("ul:first > li").length,
afterLast = length == m.cp;
if (length > 0 && afterLast) {
return false;
}
return true;
}
}
Concerning the following site
Pretty simple, but none the less I seem to be falling at the first hurdle on this.
Using the following code currently to try and obtain a track name and artist from the currently active soundcloud player (of which there are 4 ,with the class SCiframe)
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget(iframeElement);
widgets.bind(SC.Widget.Events.READY, function () {
widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
for one, the console is registering 'iframeElement is not defined' as an inital error.
But all in all, I cant seem to get any useful data out of this to process.
Where am i going wrong here?
Kindest regards to the community.
You have the variable names incorrect, they have "$" at the begining,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
EDIT:
getElementsByClassName returns an array of results. So if there is only one iframe with "SCiframe" classname, you should pass first index of $iframeElement as paramater in SC.Widget, try this,
$(function () {
var $iframeElement = document.getElementsByClassName('SCiframe');
var $widgets = SC.Widget($iframeElement[0]);
$widgets.bind(SC.Widget.Events.READY, function () {
$widgets.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
$widgets.getCurrentSound(function (currentSound) {
$('#trackInfo').append('Current Track: ' + currentSound.get('') + '');
});
});
});
});
I am using the Nov version of the AjaxControlToolkit, and I found a logic error, but I am trying to figure out the best way to fix this, by Saturday, so that the program will work on IE.
This problem only has an error on IE, it works on Firefox3.5.
I have a AsyncFileUpload component on a tab that appears to not be visible when this function runs, and so the offset width is zero.
The problem is in the file AsyncFileUpload.pre.js, in function _app_onload, and this line:
this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";
I don't want to compile it from the source, but this may end up being my best option, so I can fix the error.
But, this is probably going to be my fix:
this._innerTB.style.width = ((this._inputFile.offsetWidth == 0) ? 200 : this._inputFile.offsetWidth) - 107) + "px";
But, I don't know if there is a better solution.
I could just write a new prototype function in my javascript class and just fix the logic error, which is better than recompiling. If I fix it in the code, then whenever I do an update I will need to keep replacing that line, until it gets fixed in the codebase.
But, I am trying to figure out if there is a way for an element to know that it has just become visible, as anytime you need to know the actual width of an element then you can't really set it up until it is displayed. I can't think of a way to know that, so what I tend to do is fix the elements on the tab the first time the tab is selected, but, for a generic library that is not a possible solution.
Location of the main question
So, before I send in a bug report about this I am curious if there is a better way to do it, rather than having it done when the page has been loaded, and assuming a minimum width that is probably wrong. <-- Question located here
I am using the follow code to create the element:
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload"
OnClientUploadComplete="UploadComplete"
CompleteBackColor="Lime" UploaderStyle="Modern" Width="400px"
ErrorBackColor="Red" ThrobberID="Throbber"
onuploadedcomplete="AsyncFileUpload1_UploadedComplete"
UploadingBackColor="#66CCFF" />
And if it makes any difference I am using this as the ToolkitScriptManager seemed to introduce other errors, but that may have been my error:
<ajax:AjaxScriptManager ID="scriptmanager1" runat="server" EnablePartialRendering="true" ></ajax:AjaxScriptManager>
I am not certain if LoadScriptsBeforeUI would be useful, but I believe that I want the UI done before the scripts are loaded actually.
I find it interesting that the width I set isn't actually set when the dom tree is completed.
try add this attribute to your scriptmanager
LoadScriptsBeforeUI="true"
I have download the source code and fix the codeline,but it still not working,
then I add this attr to the scriptmanager,it works !!
check this page for detail if U wanna change the source code
http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d
This is the solution that's worked for me:
Apply CssClass on ajaxToolkit:AsyncFileUpload like "imageUploaderField"
Write Css .imageUploaderField input{width:100%!important;}
Source: http://ajaxcontroltoolkit.codeplex.com/workitem/27429
This isn't the ideal solution, but it does work, hopefully someone will have a better solution, as this is something I cannot submit to fix the bug. I added this to a javascript file of mine, but it is a hack, not a good solution. I had to replace the second function because of the line I commented out.
$(document).ready(function() {
Sys.Extended.UI.AsyncFileUpload.prototype._app_onload = function(sender, e) {
this.setThrobber(false);
if (this._inputFile != null) {
if (this._onchange$delegate == null) {
this._onchange$delegate = Function.createDelegate(this, this._onchange);
$addHandlers(this._inputFile, {
change: this._onchange$delegate
});
}
if (Sys.Browser.agent == Sys.Browser.Firefox) {
this._inputFile.size = 0;
var width = this._inputFile.offsetWidth;
this._inputFile.style.width = "";
while (this._inputFile.offsetWidth < width) {
this._inputFile.size++;
}
}
if (this._innerTB != null) {
this._inputFile.blur();
var inputFile = this._inputFile;
setTimeout(function() { inputFile.blur(); }, 0);
this._innerTB.style.width = ((this._inputFile.offsetWidth == 0 ? 200 : this._inputFile.offsetWidth) - 107) + "px";
this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
$addHandlers(this._inputFile, {
mouseup: this._onmouseup$delegate
});
}
}
}
};
Sys.UI.DomEvent.prototype._removeHandler = function (elements, eventName, handler) {
Sys._queryAll(elements, function(element) {
var browserHandler = null;
// if ((typeof (element._events) !== 'object') || !element._events) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
var cache = element._events[eventName];
if (!(cache instanceof Array)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
for (var i = 0, l = cache.length; i < l; i++) {
if (cache[i].handler === handler) {
browserHandler = cache[i].browserHandler;
break;
}
}
if (typeof (browserHandler) !== 'function') throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
if (element.removeEventListener) {
element.removeEventListener(eventName, browserHandler, false);
}
else if (element.detachEvent) {
element.detachEvent('on' + eventName, browserHandler);
}
cache.splice(i, 1);
});
}
My Solution... probably not the best but works.
_app_onload: function(sender, e) {
this.setThrobber(false);
if (this._inputFile != null) {
if (this._onchange$delegate == null) {
this._onchange$delegate = Function.createDelegate(this, this._onchange);
$addHandlers(this._inputFile, {
change: this._onchange$delegate
});
}
if (Sys.Browser.agent == Sys.Browser.Firefox) {
this._inputFile.size = 0;
var width = this._inputFile.offsetWidth;
this._inputFile.style.width = "";
while (this._inputFile.offsetWidth < width) {
this._inputFile.size++;
}
}
if (this._innerTB != null) {
this._inputFile.blur();
var inputFile = this._inputFile;
setTimeout(function() { inputFile.blur(); }, 0);
if ((this._inputFile.offsetWidth - 107) >= 1) {
this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";
this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
}
if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
$addHandlers(this._inputFile, {
mouseup: this._onmouseup$delegate
});
}
}
}
},
have forked at http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks/keyoke/AyncFileUploadFix