We Keep Coding

Handle errors when loading content into a Kendo UI KendoWindow

I have a KendoWindow that loads content into an iFrame from a JSP.
I've attached error-handlers at every position yet when the JSP isn't available, none of these error handlers are called.
What is the proper way to handle errors when loading content into a KendoWindow?
win.kendoWindow({
width : "860px",
modal : true,
height : "680px",
iframe : true,
resizable : false,
content : {
url: "access/lookup/Source.jsp",
failure: function(err) {
console.log(e.status);
console.log(e.xhr);
},
error: function(err) {
console.log(e.status);
console.log(e.xhr);
}
},
error: function(err) {
console.log(e.status);
console.log(e.xhr);
}
});

If you dig into the source code, you see:
if (!showIframe) {
// perform AJAX request
that._ajaxRequest(options);
} else {
iframe = element.find("." + KCONTENTFRAME)[0];
// Edited for clarity
iframe.src = url || iframe.src;
}
showIframe, if not set in options, is defined as:
showIframe = !isLocalUrl(url);
So only the code execution branch that does the ajax request uses your error handlers. The else branch just does an iframe and lets the browser handle it.
Adding iframe: false to the content options, as shown here, should help.

Colorbox loads only once - Uncaught TypeError: $.colorbox is not a function(…)

Ok, first thing would be to check if path to colorbox JS file ir correct and if reference the colorbox file is after the jquery file. They both are!
The real mystery comes from fact that colorbox works on first time but the the error appears. And the funniest is that it used to work but then suddenly didn`t.
Here is the function that calls for colorbox:
function loadJsonMap(map, data){
var markers_data = [];
$.each(data, function(key, val){
if (val.latitude != undefined && val.longitude != undefined) {
markers_data.push({
lat : val.latitude,
lng : val.longitude,
details : {
holder_id : val.holder_id
},
click : function(e){
if(e.details.holder_id !== undefined){
var url = baseurl + 'index.php/products/colorbox/' + e.details.holder_id;
$.colorbox({
open : true,
href : url,
iframe : false,
innerWidth : 400,
innerHeight : 400,
close : 'Aizvert'
});
}
}
});
}
});
map.addMarkers(markers_data);
}
This function is used to add marker on Gmap. Two days ago I could click how many markers I wanted and every time a new colorbox would show up but now I get to do that only once before getting error on $.colorbox({ line. I am 99% sure that I haven`t changed anything associated with this. Really do not know how to understand this error.
UPDATE:
The error seems to be caused by colorbox but affects jQuery. After first colorbox is opened every jQuery call is not a function. Now I get error on :
$(function() {
$('#contact-link').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this), 'contactpop');
} else {
$(this).addClass('selected');
$('.contactpop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Uncaught TypeError: $(...).slideFadeToggle is not a function(…)
but before clicking marker and opening colorbox I could call slideFadeToggle multiple times...

Putting 'document' vs 'the selector itself' in jQuery?

Guys I have 2 questions which is i think related in some ways I guess. First:
What is the difference between these two:
$(document).on('click','#someselector', function() {
//do something
});
vs this
$('#selector')on('click', function(){
/do something
});
Sometimes both works, sometimes it doesn't.
Number 2 question:
I created a jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
So as you can see, the id is passed to the function, many will call this dialog and pass a unique id to it. The id will then be assigned only to the Ok button.
So when i call this function to load a unique dialog:
add_section_complete_reopen_dialog('my-unique-dialog-id'); //passing the id
$('#div-id-for-the-dialog').html("I have a unique dialog now? ok?");
When i press ok with this code:
$(document).on('click','#my-unique-dialog-id', function () {
//Do some ajax call here
});
I get this JS error: TypeError: s is undefined
But the ajax is successful. I just want to know what that error is.
So when I say it is related to the first question is because when i replace the click code with this:
$('#my-unique-dialog-id').on('click', function () {
//Do some ajax call here
});
It doesn't work anymore.
Thanks

$(document).on('click', 'someselector', function() ...);
is delegation syntax. It allows you to bind a handler to elements that may not exist at the time that you execute the code. See:
Event binding on dynamically created elements?
$('someselector').on('click', function() ...);
only binds the handler to the element(s) matching the selector at the time you execute this code.

I marked the first answer correct because I know I did not put enough info on how to debug the second question, but In case someone might encounter the same error i had, I found out why. So when you initialize your jQuery UI dialog like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok'
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}
Make sure to include the click event of the buttons like this:
function this_dialog(id) {
$("#div-id-for-the-dialog").dialog({
autoOpen : false,
modal : true,
draggable : false,
width : 400,
buttons : [{
id : id,
text : 'Ok',
click : function () {
//include the click event, even if you have nothing to put here.
}
},{
text : 'Cancel',
click : function () {
$("#div-id-for-the-dialog").dialog('close');
}
}]
});
}

How can i activate a second joyride tour

I have a problem with my joyride tour ,When i finsish one tour i want to start a second one .What i try to do is execute a seconde tour in the postRideCallback ,but i end up looping the first tour .Does somebody knows how to fix this?
function preview(){
$('#joyRideTipContent').joyride({
autoStart : true,
preStepCallback : function(index, tip) {
console.log(index);
},
postStepCallback : function(index, tip) {
},
postRideCallback : function(index, tip) {
console.log("stop1");
preview2();
console.log("stop1.1");
},
tipLocation:"left",
modal : true,
expose : true
});
}
function preview2(){
console.log("stop2.0");
$('#joyRideTipContent2').joyride({
preStepCallback : function(index, tip) {
console.log("stop21.0");
},
postStepCallback : function(index, tip) {
console.log("stop22.0");
},
postRideCallback : function(index, tip) {
console.log("stop23");
alert("tada")
},
tipLocation:"left",
modal : true,
expose : true
});
console.log("stop2.1");
}
in my code (see above) preview is the function that i use to start the joyride tour and the console.log's are just for testing and do not hava a specific meaning

I know this is an old question, but I added a check that calls joyride's destroy method to remove the previous tutorial contents before starting another one.
function tutorial1(){
if($('.joyride-tip-content')) {
$.fn.joyride('destroy')
}
$('#joyRideTutorial1').joyride({
modal:true,
autoStart : true,
expose: true
});
}
function tutorial2(){
if($('.joyride-tip-content')) {
$.fn.joyride('destroy')
}
$('#joyRideTutorial2').joyride({
modal:true,
autoStart : true,
expose: true
});
}
Seems to be working well so far.

Where are you starting joyride?
Can you post all your source code?
If you did not do that, try:
function preview(){
$('#joyRideTipContent').joyride({
autoStart : true,
preStepCallback : function(index, tip) {
console.log(index);
},
postStepCallback : function(index, tip) {
},
postRideCallback : function(index, tip) {
console.log("stop1");
preview2();
console.log("stop1.1");
},
tipLocation:"left",
modal : true,
expose : true
}).foundation('joyride', 'start');
}

Why don't you just add a query variable to your pages URL? e.g.
yoursite.com/page?tour=1
yoursite.com/page?tour=2
When you finish tour 1, you can have a link on your last tour popup that links to ...?tour=2.
What you will need to do is check the query variable on your server (assuming this is where your html is generated) and do a simple if/else to output the relevant code in your html page e.g.
if ($tour == 1) {
// add tour 1 markup and script here
}
elseif ($tour == 2){
// add your 2 markup and script here
}
This will mean that the html output will only ever have one tours info. The way you are doing it now is a little messy as the tours are clashing with each other. Using this simple method will ensure that only one tour is ever loaded into your html

Any way to prevent "select_node.jstree" from being called when node closed in the jstree?

When you open nodes, it's fine. The "select_node.jstree" is not called. However, when you select a node and then close its' parent, jstree fires "select_node.jstree" for that parent node for some strange reason. Is there any way around this or is that just a flaw with jstree? I'd appreciate the help! Here's my code:
$("#RequirementsTree")
.bind("select_node.jstree", function(event, data) {
ReqNode = data.rslt.obj;
$("#req_tree_modal").dialog({ height: 400, width: 600, modal: true, closeOnEscape: true, resizable: false, show: "blind" });
$("#RMSDoc_ParentNodeID").val(data.rslt.obj.attr("id").substring(4));
if(is_requirement_node(data))
{
dispEditRequirementView();
var ReqCheck = data.rslt.obj.attr("name");
#* This is a REQUIREMENT *#
if(ReqCheck == "requirement")
{
// Ajax call to Server with requirement id passed in
$.ajax({
type: "POST",
url: '#Url.Content("~/RMS/getRequirementStateByID")',
data: {
ReqID : data.rslt.obj.attr("id").substring(4)
},
success: function(new_data) {
if(new_data == 1){
$("#RMSDoc_ReqEnabled").attr("checked", "checked");
$("#RMSDoc_ReqEnabled").val("true");
}
else if(new_data == 0) {
$("#RMSDoc_ReqEnabled").removeAttr("checked");
$("#RMSDoc_ReqEnabled").val("false");
}
}
});
$("#RMSDoc_RBSRequirement_RequirementsId").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_RBSRequirement_RequirementsText").val($.trim(data.rslt.obj.text()));
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSEditReqButton.ConfigurableLabelDesc");
}
else {
alert("Requirement node select error");
}
}
#* This is a TREE BRANCH *#
else
{
dispAddRequirementView();
$("#RMSDoc_TreeBranch_Text").val($.trim($('.jstree-clicked').text()));
$("#RMSDoc_TreeBranch_id").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_TreeBranch_Level").val(data.rslt.obj.attr("name").substring(7));
$("#RMSDoc_RBSRequirement_RequirementsText").val("");
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSCreateReqButton.ConfigurableLabelDesc");
}
})

Update:
I found a way to get it to work within the plugin, add the following to the "ui" config section:
"ui": {
"select_limit": 1,
"selected_parent_close":false
},
I believe what was happening is that when a sub-node was selected, collapsing the parent node would cause the parent node to be selected, triggering the event.
---------- Original Answer ---------------------
I'm not sure on the answer working within the bounds of the plugin. But I did find a work-around.
I added a class to each of the anchor () tags inside the tree "an".
<li class='jstree-closed' id="phtml_3" rel="folder">
test node 2
</li>
Then I wired JQuery to look for anchors with this class, and handled my click that way.
instance.on("click", "a.an", function (e) {
alert("click");
});
I still need to add code to find the ID from the parent-container, not optimal... but I don't have to compete with the collapse anymore for my click.