I am using htmlPanel.js in Sencha-Touch which was discussed in the Forum here to display local html content. I am able to load the html content with normal html tag, but not the javascript.
Below is the htmlPanel.js I used:
Ext.define('HTMLPanel', {
extend: 'Ext.Panel',
// We are using Ext.Ajax, so we should require it
requires: ['Ext.Ajax'],
config: {
listeners: {
activate: 'onActivate'
},
// Create a new configuration called `url` so we can specify the URL
url: null
},
onActivate: function(me, container) {
Ext.Ajax.request({
// we should use the getter for our new `url` config
url: 'htmlTest.html',//this.getUrl(),
method: "GET",
success: function(response, request) {
// We should use the setter for the HTML config for this
//Ext.Msg.alert('Alert', 'Success!!!', Ext.emptyFn);
me.setHtml(response.responseText);
},
failure: function(response, request) {
//Ext.Msg.alert('Alert', 'Failure!!!', Ext.emptyFn);
me.setHtml("failed -- response: " + response.responseText);
}
});
}
});
Below is my htmlTest.html:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript" charset="utf-8">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,640,1280);
</script>
<h1>This is some text in a paragraph.</h1>
</body>
</html>
And below is my index.js:
Ext.application({
name: 'SampleLoad',
launch: function () {
//loadURL('htmlTest.html');
Ext.Viewport.add({
url: 'htmlTest.html',
xclass: "HTMLPanel",
});
// Add the new HTMLPanel into the viewport so it is visible
Ext.Viewport.add(HTMLPanel);
}
});
I am able to see the text "Some text is here.", but not the canvas that I tried to create using javascript.
Is there any config that needs to be specified? Or any other cause?
Thanks.
The problem is that HTML is implanted in the DOM but scripts aren't executed. This is the case for assignment to innerHtml and probably also for setHtml().
You can solve this by explicitly executing the scripts in the rendered element, immediately after splicing the HTML in. Your htmlPanel.js would then look like:
...
// We should use the setter for the HTML config for this
//Ext.Msg.alert('Alert', 'Success!!!', Ext.emptyFn);
me.setHtml(response.responseText);
var scriptArray = me.renderElement.dom.getElementsByTagName("script");
for(var i=0;i<scriptArray.length;i++) {
eval(scriptArray[i].text);
}
},
...
Related
I have this code Ext.get('book').setValue('1');
Note: Loads the page and book value is set to 1. Not after page load
and book value change to 1.
It sets the book to value 1. But it does not trigger a change event. Is there a way to trigger the change event after page loads?
Edit:
In html script,
<script..>
$(document).ready(function () {
$("book").on("blur", function() {
//calls other function
}); // not called as blur is not invoked
});
</script>
<input id="book" type="book" value="" /><br />
In extjs,
var panel = Ext.create('Ext.grid.Panel', {
id: 'panel',
columns: [
var bookid = "new book";
Ext.Ajax.request({
params: { bookid: bookid},
function: function (response) {
Ext.get('book').setValue(bookid);
// after setValue, book will receive a change event(e.g .blur in html) and changes other functions
}
});
]
});
Your ajax request seems to be malformed, the function: function statement would be the place where you put normally success: function like in the following statement:
Ext.Ajax.request({
url: 'insert-your-http-endpoint-here',
params: {
bookid: bookid
},
success: function(response){
debugger; // -> setting this statement will show that you enter the success statement
Ext.get('book').setValue(bookid);
},
failure: function(response, opts) {
// something went wrong with your request
console.log('server-side failure with status code ' + response.status);
}
});
more info about how to use ExtJS or the specific function, you could find in the documentation (check if you have the correct version, ofcourse) which can be found here
From the above code, you don't need the debugger statement, but it could help if you want to check if you actually get into this code block or not, and what happens when you try to set the value.
Also, don't forget to check your console output when something is not working, maybe there was a problem that would be clearly indicated in the console log
I'm trying to call a funtion in textextjs method-
//my function
function GetAreaTags() {
return "some text";
}
//textext initializtion
$('#territory').textext({
plugins: 'tags prompt focus autocomplete ajax',
ajax: {
url: '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags(),
dataType: 'json',
cacheResults: false
}
});
But GetAreaTags() is not being called. How can i make it happen?
It should work... But try this:
function GetAreaTags() {
return "some text";
};
var yourObj= {
plugins: 'tags prompt focus autocomplete ajax',
ajax : {
url: '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags(),
dataType: 'json',
cacheResults: false
}
};
$('#territory').textext(yourObj);
console.log(yourObj.ajax.url);
If that doesn't work out try this:
function GetAreaTags() {
return "some text";
};
var yourObj= {
plugins: 'tags prompt focus autocomplete ajax',
ajax : {
url: function() {return '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags()},
dataType: 'json',
cacheResults: false
}
};
$('#territory').textext(yourObj);
console.log(yourObj.ajax.url);
Check the console both times to see if your url is what you desire.
[EDIT: I rejected the edit by mistake, sorry about that]
Edit2
From s.k.paul's comment:
GetAreaTags() should execute every time i type in that textbox.
However, console says- 1. /Admin/Search/GetTerritorySuggestions?area=
2. localhost:12788/Admin/Dashboard/…}&q= 404 (Not Found)
Therefore you need another event handler to dynamically change the url (the plugin must be recalled with another url):
function GetAreaTags() {
return "some text";
};
$("#territory").keyup(function() {
var yourObj= {
plugins: 'tags prompt focus autocomplete ajax',
ajax : {
url: function() {return '/Admin/Search/GetTerritorySuggestions?area=' + GetAreaTags()},
dataType: 'json',
cacheResults: false
}
};
$('#territory').textext(yourObj);
console.log(yourObj.ajax.url);
});
However, this may be very heavy... The plugin expects you to have a single reference for your auto-complete resource. If you're dynamically changing it, it may reset the already existing stuff.
Edit3
Edit 2 : textextjs does not work at all now. And, url function returns
whole function text
This means the plugin doesn't handle well being recalled twice or more times in the same element. The only possible solution I am seeing is to change the plugin's code in order to dynamically change the resources according to your function...
Which makes me wonder, if it's easier for you to allow the user to have a broader data resource (include all areas) when typing, this way there would be only one URL and the plugin wouldn't have any trouble with that.
My page makes an Ajax call which returns some HTML to embed in the page and a script to run, attaching JQuery tooltips to various elements of the embedded HTML. The HTML and script are returned as JSON objects by my Django backend, and appear OK in the page, but the Javascript doesn't seem to work when I evaluate it:
$.ajax({
type: "GET",
url: "/url/to/ajax",
data: {
"foo": bar
},
success: function (data) {
$("#my-table").html(data['html']);
// alert(data['script']); // this works: I can see the script
eval(data['script']);
},
error: function () {
$("#my-table").html('');
}
});
The script itself looks like a series of expressions such as:
$(".foobar1").tooltip({
content: "The <em>foo</em> to the <strong>bar</strong>.",
tooltipClass: "tt-ref",
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function () {
$(this).remove();
})
});
}
});
where foobar1 is a class in the HTML just added to the #my-table HTML.
Can anyone see where I'm going wrong here? Both jquery and jquery-ui are loaded on my page.
You don't need to eval anything, let browser execute it. For this create script element, set its content and append it to DOM:
success: function(data) {
$("#my-table").html(data.html);
$('<script>').html(data.script).appendTo('body');
},
Another, probably better option is to make script a part of the returned HTML.
You might try :
eval("data['script']");
I just implemented Dropzone.js to make file uploads on my website easier. The file uploads fine, and after it finished uploading I give the file an id and return this id to the browser.
This works fine, except for that I don't know how to catch the id that gets returned from the server. In this SO answer I found some code that should supposedly do that, but it doesn't work for me. The code I have now is pasted below.
Does anybody know how I can get the value that is returned by the server? All tips are welcome!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/js/external/dropzone.min.js"></script>
<link href="/static/css/external/dropzone.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
Dropzone.options.uiDZResume = {
success: function(file, response){
console.log('WE NEVER REACH THIS POINT.');
alert(response);
}
};
});
</script>
</head>
<body>
<form action="/doc"
class="dropzone"
id="my-awesome-dropzone"></form>
</body>
</html>
Looking at the source code of dropzone.js, it seems that there is a lot of events you can listen to.
events: [
"drop"
"dragstart"
"dragend"
"dragenter"
"dragover"
"dragleave"
"addedfile"
"removedfile"
"thumbnail"
"error"
"errormultiple"
"processing"
"processingmultiple"
"uploadprogress"
"totaluploadprogress"
"sending"
"sendingmultiple"
"success"
"successmultiple"
"canceled"
"canceledmultiple"
"complete"
"completemultiple"
"reset"
"maxfilesexceeded"
"maxfilesreached"
]
Here the "success" event seems to be appropriate.
A good starting point would be to bind an event listener to your dropzone and see what data you get on such event.
$('#my-awesome-dropzone').on('success', function() {
var args = Array.prototype.slice.call(arguments);
// Look at the output in you browser console, if there is something interesting
console.log(args);
});
$("#dropzoneForm").dropzone({
maxFiles: 2000,
url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
success: function(file, response){
//alert("Test1");
}
});
Does this help?
Dropzone.options.myDropzone = {
init: function() {
thisDropzone = this;
this.on("success", function(file, responseText) {
var responseText = file.id // or however you would point to your assigned file ID here;
console.log(responseText); // console should show the ID you pointed to
// do stuff with file.id ...
});
}
};
For example, I have mine set up to attach the server path to the image name and pass this as a value into a form field on submit. As long as you define responseText to point to the file ID you should get a return on this.
This link might be helpful as well: https://github.com/enyo/dropzone/issues/244
Try this:
Dropzone.options.myAwesomeDropzone = {
success: function(file, response){
//alert(response);
console.log(response);
}
};
It works for me
$(function() {
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("success", function() {
alert('Uploaded!');
});
});
I am using jQuery and this is what worked for me:
var dz = $(".my-awesome-dropzone").dropzone()[0];
dz.dropzone.on("success", function (file, response) { ... }));
Note that the dropzone() method adds an dropzone attribute to the DOM object. You have to call on() on that object - not the jQuery on().
I wanted to add this as a comment, but I can't, since I have a low reputation.
For those of you who still have trouble retrieving the response from the server, if you're using chunking, Dropzone is hard-coding a blank response in this situation:
https://github.com/enyo/dropzone/blob/caf200c13fd3608dd6bed122926d5848927f55b4/dist/dropzone.js#L2344
if (allFinished) {
_this14.options.chunksUploaded(file, function () {
_this14._finished(files, '', null);
});
}
So retrieving the response doesn't seem to be supported for chunked uploads.
I want to create a module loader for javascript files using $.getScript but since the loading of the scripts is then asynchronously when I put a function call of a module inside the document they may be called before the module was loaded. Is there any way to avoid this situation maybe by putting the function call on hold until the module was loaded successfully?
framework.core.js:
var Framework = $.extend(Framework, Framework.Core = {
modules: [
'Module1',
'Module2'
],
init: function () {
$.each(modules, function (index, value) {
$.getScript('framework.' + value.toLowerCase() + '.js', function () {
});
});
}
});
Framework.Core.init();
site.html:
<html>
<head>
<script src="framework.core.js"></script>
<script>Framework.Module1.functionCall();</script> // Call a function independent of the completion of the framework.core.js loader
</head>
...
You will need to open the success callback for the depending functions to hook on it. You will not be able to defer the execution of those following functions to wait for the Module (unless you would insert the script via document.write), so the callback is necessary. Best, just make the Deferred object (returned by the ajax function) public. Also, you should not use jQuery.getScript/ for that task at all, because it prevents caching.
var Framework = $.extend(Framework, Framework.Core = {
// The "Core" property seems pretty useless, by the way ^^
modules: [
'Module1',
'Module2'
],
loads: {},
init: function () {
$.each(this.modules, function(index, value) {
this.loads[value] = $.ajax({
url: 'framework.' + value.toLowerCase() + '.js',
cache:true,
dataType:"script"
});
});
}
});
Framework.init();
<html>
<head>
<script src="framework.core.js"></script>
<script>Framework.loads.Module1.then(function() {
functionCall();
}); // Call a function as soon as the module is loaded
</script>
</head>
...