I am trying to open up a website(Google DialogFlow Chat BOT) in my website using JQuery load function.
My Code is as shown below.
ChatBOT
<div id="configs-dialog" title="ChatBOT">
</div>
$("#configs").ready( function() {
$( "div#configs-dialog" ).dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
<!-- On Click function for terms dialog -->
$('#configs').click(function(){ $('div#configs-dialog').dialog('open'); });
} );
<!-- load configs html -->
$(function(){
$("#configs-dialog").load("https://console.dialogflow.com/api-client/demo/embedded/bbdd7d51-741c-4308-82c0-fc70073b057e");
});
I am not able to load the website into the dialog window.
It opens up a blank dialog box when I click on the link.
Can any one please help me with this?
With this sort of element, you cannot use .load() as it will only load the elements and not the JavaScript that is needed.
When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
Consider using an iFrame instead.
$(function() {
$("#configs-dialog").dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: [{
text: "Close",
class: "ui-state-primary",
click: function(e) {
var results = confirm("Are you sure you want to close the ChatBOT?");
if (results) {
$(this).dialog("close");
}
return false;
}
}]
});
$('#configs').click(function() {
$('#configs-dialog').dialog('open');
$("#configs-dialog")
.html("")
.append($("<iframe>", {
class: "configs-dialog-frame",
src: "https://console.dialogflow.com/api-client/demo/embedded/bbdd7d51-741c-4308-82c0-fc70073b057e"
})
.css("height", $("#configs-dialog").height() - 5));
});
});
.ui-dialog .ui-dialog-titlebar {
display: none;
}
.ui-dialog #configs-dialog.ui-dialog-content {
padding: 0;
}
.configs-dialog-frame {
border: 0;
width: 100%;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
ChatBOT
<div id="configs-dialog" title="ChatBOT"></div>
Related
I am trying to add a 'push' event to flutter_service_worker, which is autmatically generated to build a PWA.
The default index.html is Next:
<head>
...
...
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint(
{
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
})
});
</script>
The event that I want to add is:
self.addEventListener('push', function(e) {
self.registration.showNotification(
"hello",
{
body:"how are you?",
}
);
My problem is that I don't now if It is possible to add a custom event on flutter_service_worker, and how?
Thanks!
I'm using tiny mce and want in the insert image dialog a button to a special page
just behind the source input a simple link to a different page that opens in a new browser window. how can I achieve that?
TinyMCE has an init options called file_browser_callback and file_picker_callback that allow you to add your own file browsing functionality to the insert dialogs:
https://www.tinymce.com/docs/configure/file-image-upload/#file_browser_callback
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback
https://www.tinymce.com/docs/configure/file-image-upload/
So for example, you could do the following in your init:
tinymce.init({
file_picker_callback: function(callback, value, meta) {
imageFilePicker(callback, value, meta);
}
});
Then the imageFilePicker function would just call out to a function that does the real work of opening a window to do the selection:
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'File and Image Picker',
url: '/myapp/getfilesandimages',
width: 700,
height: 600,
buttons: [{
text: 'Insert',
onclick: function () {
//do some work to select an item and insert it into TinyMCE
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
},
{
oninsert: function (url) {
callback(url);
}
});
};
Eighter create your own plugin using a copy of the tinymce core plugin OR add it to the DOM after the dialogue has been created.
I'm using multiple inputs in a bootstrap modal window (which is loaded via AJAX). I want on those inputs work typeahead.js integrated with Bloodhound. The datasets are loaded correctly (as JSON), but for some reason I do not understand the inputs are automatically disabled. I'm using the latest versions of everything.
Here the inputs tag (with the related hidden input). The engine takes data-autocomplete to finish building the remote URL.
<input type="text" class="typeahead form-control" data-provide="typeahead" id="my_input" data-autocomplete='users'>
<input type="hidden" name="my_input" />
Here my JavaScript code:
$.get(window.BASE_URL+'/form',function(data){
/*SUGGESTIONS ENGINE*/
var autocomplete;
var autocomplete = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.id); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 20,
remote: {
url: window.BASE_URL+'the-url/',
replace: function(url,uriEncodedQuery) {
if(typeof $('input:focus').attr('data-autocomplete')!='undefined')
{
var new_url=url+$('input:focus').attr('data-autocomplete')+'?texto='+$('input:focus').val()+'&tipo='+$('input:focus').attr('id');
return new_url;
}
}
}
});
autocomplete.initialize();
//LOAD TYPEAHEADS
$('.modal-body').find('input.typeahead').typeahead({
minLength: 2,
highlight:true
},{
name: 'autocomplete',
displayKey:'label',
source: autocomplete.ttAdapter(),
}).on('typeahead:selected', function(obj, datum) {
//console.log(JSON.stringify(this));
//If the text has an id seeks its hidden twin
if(typeof $(this).attr('id')!='undefined')
$('input[name="'+$(this).attr('id')+'"]').val(datum.id);
});
});
The format of an item from the json response is as follows:
{"id":"1","label":"McDonald, Richard"}
Problem solved:
You should only delete the z-index property to an element.
Before:
.modal .twitter-typeahead .tt-hint {
margin-bottom: 0;
z-index: 1;
width: 100%;
}
After:
.modal .twitter-typeahead .tt-hint {
margin-bottom: 0;
width: 100%;
}
I am unable to view the HTML content of web pages when I view source in Google Chrome's dev tools. For example, if I view the source of https://stackoverflow.com/help, the only content I can see is as follows.
<script>
$('#herobox li').click(function () {
StackExchange.using("gps", function () {
StackExchange.gps.track("aboutpage.click", { aboutclick_location: "hero" }, true);
});
window.location.href = '/about';
});
$('#tell-me-more').click(function () {
StackExchange.using("gps", function () {
StackExchange.gps.track("aboutpage.click", { aboutclick_location: "hero" }, true);
});
});
$('#herobox #close').click(function () {
StackExchange.using("gps", function () {
StackExchange.gps.track("hero.action", { hero_action_type: "minimize" }, true);
});
$.cookie("hero", "mini", { path: "/" });
$.ajax({
url: "/hero-mini",
success: function (data) {
$("#herobox").fadeOut("fast", function () {
$("#herobox").replaceWith(data);
$("#herobox-mini").fadeIn("fast");
});
}
});
return false;
});
</script>
I'm not sure if I've inadvertently changed a setting in Chrome, but any help would be greatly appreciated.
I'm using chrome Version 29.0.1547.76.
I have disabled all extensions.
I tried this using a new profile with the same effect.
I'm not behind a proxy.
If you open the DevTools after loading the page, the content of the items listed on the Resources tab may not be populated. This is also true of network requests on the Network tab. To see the fully populated resources on the Resources tab, first open the DevTools, then refresh the page, or navigate to the desired page with the DevTools open. Now select the html resource and it should be populated.
I have this function below. Works great and is from http://caroufredsel.dev7studios.com/ (by far the best and easiet I have found if anyone else is after a carousel)
<script type="text/javascript" language="javascript">
$(function() {
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
});
});
</script>
anyway I the carousel loops through a selection of images. Now I have a separate function that reloads the div through an ajax call below. It populates the div with a new set of images based on the users selection of folder.
<script>
function getImages(id)
{
$.ajax({
type: "GET",
url: 'getImage.php',
data: "id=" + id,
success: function(data) {
$('#scrolimg').html(data);
}
});
}
</script>
This too works fine. The problem is when you have clicked a new folder and it reloads refreshes the div the carousel stops completely. Is there anyway based on the success of the ajax call to re fire the jquery function to get the carousel going again?
on the callback function of the AJAX you call, you have to re-apply:
success: function(data) {
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
});
...
}
If you are using a .html() function or similar to re-write the foo element, you are erasing any event associated to it too, so you have to call it again.
Add something like this into your callback:
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
});
It should work. Respect!
Supposing in your example foo1 == scrolimg, do this:
<script>
function getImages(id)
{
$.ajax({
type: "GET",
url: 'getImage.php',
data: "id=" + id,
success: function(data) {
$('#scrolimg')
.carouFredSel('destroy')
.html(data)
.carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
});
}
});
}
</script>