I use yii2 as a backend framework, I want to make tour for my app, but bootstrap tour popover not shown on the second page, I create an asset bundle for bootstrap tour and register it in the layout, bootstrap tour work correctly on the first page but when going to another page it make problem and in debug on the next page show:
Bootstrap Tour 'tour' | Redirect to paper/upload
Bootstrap Tour 'tour' | Error redirection loop to paper/upload
I already check window local storage in the developer tool of the chrome and see it is on the correct step when going to second-page window local storage was shown:
tour_current_step value 2,
and another question, how I should set value for path option in the bootstrap tour for yii2 router, is my paths correct? for example first step is on the main page of the site is: "", is it correct, I would like if someone clicks on the previous button of popover return back to the previous step.
here is my javascript code, I register this javascript code in the layout file:
$(function() {
var $demo, duration, remaining, tour;
$demo = $("#demo");
duration = 5000;
remaining = duration;
tour = new Tour({
onStart: function() {
return $demo.addClass("disabled", true);
},
onEnd: function() {
return $demo.removeClass("disabled", true);
},
debug: true,
steps: [
{
path: "",
element: "#demo",
placement: "bottom",
title: "Welcome to Bootstrap Tour!",
content: "Introduce new users to your product by walking them through it step by step."
}, {
path: "",
element: "#Wordcounter",
placement: "bottom",
title: "Step One",
content: "For translation click on word counter menu item"
}, {
path: "paper/upload",
element: "#myDropzone",
placement: "top",
title: "Step two",
content: "Drag and Drop your file here or click to upload plz wate to complete upload"
}
,
{
path: "paper/upload",
element: "#next",
placement: "bottom",
title: "Step three",
content: "then Click on the Next Bottom",
reflex: true
}, {
path: "paper/show",
element: "#save",
placement: "top",
title: "Step four",
content: "click on save and continue and choose language plan",
duration: 5000
}
]
}).init();
if (tour.ended()) {
$('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">×</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
}
$(document).on("click", "[data-demo]", function(e) {
e.preventDefault();
if ($(this).hasClass("disabled")) {
return;
}
tour.restart();
return $(".alert").alert("close");
});
});
I make a lot of work on the code and finally find an answer, the problem was on the paths, I used pretty URL in the URL manager, and the bootstrap tour need relation paths, if path in the current page not same as the path in the step of bootstrap tour, it's going to on redirect loop, and this is because there is no way the bootstrap tour can find, does it need to redirect or no, this is the short code of bootstrap tour where go to redirect loop
if (step.redirect && this._isRedirect(step.host, path, document.location)) {
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
for solving this issue when paths should get from the router (for example in frameworks like Yii, Laravel, Symfony and ...) the bootstrap tour suggest to use the onNext attribute in the step and redirect to an address.
but in my case, I change the source code of bootstrap tour to find my answer in better form and replace the above code with this code:
var current_url = document.URL;
var result = current_url.includes(path);
if(!result){
this._redirect(step, i, path);
if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
return;
}
}
and change the redirect code to this:
Tour.prototype._redirect = function(step, i, path) {
var href;
if ($.isFunction(step.redirect)) {
return step.redirect.call(this, path);
} else {
href = this._options.domainAddress + path;
// href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path;
this._debug("Redirect to: " + href);
if (this._getState('redirect_to') === ("" + i)) {
this._debug("Error redirection loop to " + path);
this._removeState('redirect_to');
if (step.onRedirectError != null) {
return step.onRedirectError(this);
}
} else {
this._setState('redirect_to', "" + i);
return document.location.href = href;
}
}
};
and define a global variable in options, domainAddress,
but i think it is not a good way to change the source code of bootstrap tour, but it is work for my case.
Related
I am using auto-complete web service sing JSON, If i am selecting a list item that must not be appear again in auto-complete list;
JSON AJAX code:
select: function (event, ui) {
var terms = split(this.value);
if (terms.length <= 10) {
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
else {
var last = terms.pop();
$(this).val(this.value.substr(0, this.value.length - last.length - 0)); // removes text from input
$(this).effect("highlight", {}, 1000);
$(this).addClass("red");
$("#warnings").html("<span style='color:red;'>Max skill reached</span>");
return false;
}
}
I am attaching screenshot also, please see here :
Like #Bindred mentioned in the comments to your question, an easier solution would be to use the Select2 jQuery library. It is not exactly what you are looking for, but as far as UX goes I think it would achieve a similar goal, and it is a breeze to get working.
I have added an example for you to use: https://jsfiddle.net/9cqc5876/9/
HTML
<select id="txtExpertise" multiple="multiple"></select>
JavaSript
$(document).ready(function() {
$("#txtExpertise").prop("disabled", "disabled");
// do your ajax request for data
//$.getJSON("../WebServices/WebServiceSkills.asmx/GetAutoCompleteData", function(data) {
// fake json data
var data = {"languages": ["Java", "C", "C++", "PHP", "Visual Basic",
"Python", "C#", "JavaScript", "Perl", "Ruby"]};
// populate the select
$.each(data.languages, function(key, val) {
$('#txtExpertise')
.append($("<option></option>")
.attr("value", key)
.text(val));
});
// activate the select2
$("#txtExpertise").select2();
$("#txtExpertise").prop("disabled", false);
//});
});
In my example I want to make extension for easy redirection for subreddits at reddit.com. This is what I have so far. However I would like to autocomplete from my history in omnibox, like those google search suggestions. For example if I type te to autocomplete tech inline and add suggestion underneath for technology and whatnot I have in my history that starts with "te". Is this even possible? If so can you point me in the right direction?
This is my very simple code so far
function navigate(url) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: url});
});
}
chrome.omnibox.onInputEntered.addListener(
function(text) {
if(text.indexOf(' ') == -1) {
if(text.indexOf('/r/') == 0) {
navigate("https://www.reddit.com" + text); }
else if(text.indexOf('r/') == 0) {
navigate("https://www.reddit.com/" + text); }
else
navigate("https://www.reddit.com/r/" + text);
}
});
I'm trying to teach myself how to write Chrome extensions and ran into a snag when I realized that my jQuery was breaking because it was getting information from the extension page itself and not the tab's current page like I had expected.
Quick summary, my sample extension will refresh the page every x seconds, look at the contents/DOM, and then do some stuff with it. The first and last parts are fine, but getting the DOM from the page that I'm on has proven very difficult, and the documentation hasn't been terribly helpful for me.
You can see the code that I have so far at these links:
Current manifest
Current js script
Current popup.html
If I want to have the ability to grab the DOM on each cycle of my setInterval call, what more needs to be done? I know that, for example, I'll need to have a content script. But do I also need to specify a background page in my manifest? Where do I need to call the content script within my extension? What's the easiest/best way to have it communicate with my current js file on each reload? Will my content script also be expecting me to use jQuery?
I know that these questions are basic and will seem trivial to me in retrospect, but they've really been a headache trying to explore completely on my own. Thanks in advance.
In order to access the web-pages DOM you'll need to programmatically inject some code into it (using chrome.tabs.executeScript()).
That said, although it is possible to grab the DOM as a string, pass it back to your popup, load it into a new element and look for what ever you want, this is a really bad approach (for various reasons).
The best option (in terms of efficiency and accuracy) is to do the processing in web-page itself and then pass just the results back to the popup. Note that in order to be able to inject code into a web-page, you have to include the corresponding host match pattern in your permissions property in manifest.
What I describe above can be achieved like this:
editorMarket.js
var refresherID = 0;
var currentID = 0;
$(document).ready(function(){
$('.start-button').click(function(){
oldGroupedHTML = null;
oldIndividualHTML = null;
chrome.tabs.query({ active: true }, function(tabs) {
if (tabs.length === 0) {
return;
}
currentID = tabs[0].id;
refresherID = setInterval(function() {
chrome.tabs.reload(currentID, { bypassCache: true }, function() {
chrome.tabs.executeScript(currentID, {
file: 'content.js',
runAt: 'document_idle',
allFrames: false
}, function(results) {
if (chrome.runtime.lastError) {
alert('ERROR:\n' + chrome.runtime.lastError.message);
return;
} else if (results.length === 0) {
alert('ERROR: No results !');
return;
}
var nIndyJobs = results[0].nIndyJobs;
var nGroupJobs = results[0].nGroupJobs;
$('.lt').text('Indy: ' + nIndyJobs + '; '
+ 'Grouped: ' + nGroupJobs);
});
});
}, 5000);
});
});
$('.stop-button').click(function(){
clearInterval(refresherID);
});
});
content.js:
(function() {
function getNumberOfIndividualJobs() {...}
function getNumberOfGroupedJobs() {...}
function comparator(grouped, individual) {
var IndyJobs = getNumberOfIndividualJobs();
var GroupJobs = getNumberOfGroupedJobs();
nIndyJobs = IndyJobs[1];
nGroupJobs = GroupJobs[1];
console.log(GroupJobs);
return {
nIndyJobs: nIndyJobs,
nGroupJobs: nGroupJobs
};
}
var currentGroupedHTML = $(".grouped_jobs").html();
var currentIndividualHTML = $(".individual_jobs").html();
var result = comparator(currentGroupedHTML, currentIndividualHTML);
return result;
})();
Im trying to get some html5 post messaging going with dojo 1.8, i've created a jsfiddle to try to explain it better. One thing to note is that the button is being loaded within the iframe. So basically if a click happens within the iframe then the parent node should receive and act upon the message. Any pointers would be appreciated.
http://jsfiddle.net/AvPFv/
Basically, you should listen for message on iframe window, i.e. iframe.contentWindow. Also, please note there is no dojo in your iframe.
I created a jsFiddle to show how it works: http://jsfiddle.net/phusick/H7Zh8/ but I'm afraid it is very messy to have everything in a single file, i.e. in the context of the parent window, because it does not explain properly where window reference points to and it does not simulate real world usage. I suggest you try it at localhost having two sets of scripts, one for parent window and one for iframe.
require([
"dojo/dom",
"dojo/on",
"dojo/date/locale",
"dojo/domReady!"
], function(
dom,
on,
locale
) {
var buttonNode = dom.byId("postMessageButton");
var iframeNode = dom.byId("iframe");
var iframe = iframeNode.contentWindow;
var iframeButtonNode = iframe.document.getElementById("postMessageButton");
on(buttonNode, "click", function() {
iframe.postMessage("hello from parent", "*");
});
on(iframe, "message", function(event) {
var msgNode = iframe.document.getElementById("msg");
msgNode.innerHTML += formatMessage(event);
event.source.postMessage("echo from iframe", "*");
});
on(iframeButtonNode, "click", function() {
iframe.parent.postMessage("hello from iframe", "*");
})
on(window, "message", function(event) {
dom.byId("msg").innerHTML += formatMessage(event);
});
function formatMessage(event) {
var time = locale.format(new Date(event.timeStamp),{
selector: "time",
formatLength: "medium"
});
return time + ": " + event.data + "<br>";
}
});
Take the "Terms of Service" example found on the developers page. If you click on "Ok," I want the page to redirect elsewhere. I'm modifying this code to show an image and the "Ok" button is really a delete button. I have everything working, except I'm not sure how to tie that button into an action.
function picFunction(theurl) {
var imgBox = new Facebox({
ajaxDelay: 100,
draggable: false,
title: 'Terms and conditions',
url: theurl,
submitValue: 'Delete',
submitFunction: function() {
imgBox.fade();
var confirm = new Facebox({
width: 200,
title: 'Confirm',
message: 'Are you sure you want to delete?',
submitValue: 'Yes',
cancelValue: 'No',
submitFunction: function() {
confirm.close();
imgBox.close();
},
cancelFunction: function() {
confirm.fastclose();
imgBox.unfade();
}
});
confirm.show();
}
});
imgBox.show();
}
You need to update the window location to reload the page at the given URL. So your inner submitFunction should look something like this, you don't need to worry about closing the Facebox because the page will redirect anyway.
submitFunction: function() {
window.location = 'http://www.pagetosendto.com'
}