After putting jquery-ui(css and js) and jquery in the manifest, I can use jq selectors ($), however jquery-ui seems to be inaccessible. For example, I'm trying to insert a resizable div in a content-script (content_script.js):
var $div = document.createElement('div');
$div.id = 'divId';
$div.innerHTML = 'inner html';
$("body").append($div);//works without error
$("#divId").css("background-color","yellow");//works
//doesn't give resizable handles, however works in a regular html file:
$("#divId").resizable();
//however this also has issue:
document.getElementById("divId").style.resize = "both";
Manifest:
"css":["jquery-ui.css"],
"js": ["jquery-ui.js","jquery.js","content_script.js"]
Wrong load order - jquery-ui expects jquery to be loaded first.
"js": ["jquery.js", "jquery-ui.js", "content_script.js"]
Related
I've got a situation where I am loading DIV's dynamically from a server with dojo.xhrGet. All that is fine. The content comes back fine, and the DIV is inserted into the page fine. Note that in this situation, I cannot know the DIV to load prior to some other event occurring.
The problem seems to be that DIJIT widgets contained within the dynamic DIVs aren't DIJIT widgets, but run-of-the-mill HTML widgets. That is, I can work on them using "dojo.byId('widgetID')" and use standard JavaScript, but if I try "registry('widgetID')", I get an "undefined" response.
How can I get dynamically loaded and otherwise declarative DIV code to be parsed into true DIJIT widgets?
You need to use dojo/parser after your markup div has been loaded to your DOM.
The function parse() will transform your HTML markup from div to a dijit widget if the markup has been decorated properly.
By the way dojo.xhrGet is Deprecated and you should use dojo/request/xhr instead.
Below and example with some pseudocode:
require(["dojo/request/xhr", "dojo/dom-construct"], function(xhr, domConstruct){
xhr("example.json", {
handleAs: "text" // or whatever
}).then(function(data){
// place your div to the dom (data is an html markup similar to this <input data-dojo-type="dijit/form/TextBox" type="text" name="dept1" />)
var targetDom = 'targedDom';
domConstruct.place(data, targetDom, 'replace');
// trasform your div to a dijit widget
parser.parse(dojo.byId(targetDom)).then(function(){
// after is parsed do smt here
});
}, function(err){
// handle the error condition
}, function(evt){
// handle a progress event from the request if the browser supports XHR2
});
});
I am using cordova 2.2.0 with Xcode 4.5.2. On one of my pages I have a select component and once a particular option is selected I want to display a table within a div. My html looks like this: <div class="hero-unit" id="#facprog"></div>
The javascript/jquery looks like this:
<pre><code>
$(function() {
$('#selFaculty').change(function() {
var facultyName = $('#selFaculty').val();
var progDetails = app.fillFacultyProgramme(facultyName);
alert(progDetails);
$('#facprog').append(progDetails);
});
});
</code></pre>
Note that #selFaculty is the id of the select object. However, when the select option changes, everything in javascript executes except for the append. Nothing shows up in the div. Is there a different way to add html element to a div in jquery under cordova 2.2.0 in iOS?
Thanks in advance,
José
With jquery you can refresh a div.
This is a good example:
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>
and now you need to put the div in the body section of your page
<div id="loaddiv">
</div>
from http://designgala.com/how-to-refresh-div-using-jquery/
and there is another example here:
refresh div with jquery
The first example is useful when you need to load a script and refresh and the second one is useful when you need to make a change, e.g. append html and then refresh as in your case.
Version Drupal 7.16
I'm trying to use draggable of jquery in Drupal way :
I have a simple page (with hook_menu) wich call an js and render a simple div with the good class to draggable :
(function($) {
Drupal.behaviors.testJs = {
attach : function(context, settings) {
$('.test-js').draggable();
});
}
}
})(jQuery);
This js is load.
I add library of jquery Drupal :
drupal_add_library('system', 'ui');
or
drupal_add_library('system', 'ui.draggable');
But nothing happen....
When I had an external jquery like :
drupal_add_js('http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js', 'external')
draggable work.
I try to enable jquery update module, but nothing more....
It is most likely that the hook you are calling isn't called int the right order. template_process_html is where css and js are finalized and rendered to template variables. Try adding your code in hook_preprocess_html and see if that works. Otherwise find a hook that is called before template_process_html like hook_init. If that doesn't work give a more detailed code sample of how you are trying to achieve this.
https://api.drupal.org/api/drupal/includes%21theme.inc/function/template_process_html/7
https://api.drupal.org/api/drupal/modules%21system%21theme.api.php/function/hook_process_HOOK/7
https://api.drupal.org/api/drupal/includes%21theme.inc/function/theme/7
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_init/7
I'm trying to pre fill in fields to log in to a forum. However, I don't own the forum. So how do I link my own .js file so that I can fire a function that will pre fill the log in fields?
(Remember I don't own the servers that host the html files, so I cannot hook it up via HTML.)
You can inject your own javascript into a page being displayed by a UIWebView by
1) Put your javascript into a file in your app bundle, for example something like this will inject myFunction().
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = function myFunction()
{
alert("my function");
};
document.getElementsByTagName('head')[0].appendChild(script);
2) Load the .js file and run it using stringByEvaluationJavaScriptFromString:
3) If its important your myFunction() doesn't get added until the dom has loaded, then within the same .js file add some other JavaScript that will ensure that the code in part 1) doesn't get run until you get a dom loaded event.
cross domain javascript fails everytime.
use ajax to retrieve the page you wish.
$(document).ready(function(){
jQuery.ajax(’forumlogin’).done(function(data)
{
$(’body’).html(data)
})
})
then fill in the forms using the forms element.
On a page I have an iframe. In this iframe is a collection of items that I need to be sortable. All of the Javascript is being run on the parent page. I can access the list in the iframe document and create the sortable by using context:
var ifrDoc = $( '#iframe' ).contents();
$( '.sortable', ifrDoc ).sortable( { cursor: 'move' } );
However, when trying to actually sort the items, I'm getting some aberrant behavior. As soon as an item is clicked on, the target of the script changes to the outer document. If you move the mouse off of the iframe, you can move the item around and drop it back by clicking, but you can not interact with it within the iframe.
Example: http://robertadamray.com/sortable-test.html
So, is there a way to achieve what I want to do - preferably without having to go hacking around in jQuery UI code?
Dynamically add jQuery and jQuery UI to the iframe (demo):
$('iframe')
.load(function() {
var win = this.contentWindow,
doc = win.document,
body = doc.body,
jQueryLoaded = false,
jQuery;
function loadJQueryUI() {
body.removeChild(jQuery);
jQuery = null;
win.jQuery.ajax({
url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
dataType: 'script',
cache: true,
success: function () {
win.jQuery('.sortable').sortable({ cursor: 'move' });
}
});
}
jQuery = doc.createElement('script');
// based on https://gist.github.com/getify/603980
jQuery.onload = jQuery.onreadystatechange = function () {
if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) {
return false;
}
jQuery.onload = jQuery.onreadystatechange = null;
jQueryLoaded = true;
loadJQueryUI();
};
jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
body.appendChild(jQuery);
})
.prop('src', 'iframe-test.html');
Update: Andrew Ingram is correct that jQuery UI holds and uses references to window and document for the page to which jQuery UI was loaded. By loading jQuery / jQuery UI into the iframe, it has the correct references (for the iframe, rather than the outer document) and works as expected.
Update 2: The original code snippet had a subtle issue: the execution order of dynamic script tags isn't guaranteed. I've updated it so that jQuery UI is loaded after jQuery is ready.
I also incorporated getify's code to load LABjs dynamically, so that no polling is necessary.
Having played with their javascript a bit, Campaign Monitor solves this by basically having a custom version of jQuery UI. They've modified ui.mouse and ui.sortable to replace references to document and window with code that gets the document and window for the element in question. document becomes this.element[0].ownerDocument
and they have a custom jQuery function called window() which lets them replace window with this.element.window() or similar.
I don't know why your code isn't working. Looks like it should be.
That said, here are two alternative ways to implement this feature:
If you can modify the iframe
Move your JavaScript from the parent document into iframe-test.html. This may be the cleanest way because it couples the JavaScript with the elements its actually executing on.
http://dl.dropbox.com/u/3287783/snippets/rarayiframe/sortable-test.html
If you only control the parent document
Use the jQuery .load() method to fetch the content instead of an HTML iframe.
http://dl.dropbox.com/u/3287783/snippets/rarayiframe2/sortable-test.html
Instead of loading jQuery and jQueryUI inside the iFrame and evaluating jQueryUI interactions both in parent and child - you can simply bubble the mouse events to the parent's document:
var ifrDoc = $( '#iframe' ).contents();
$('.sortable', ifrDoc).on('mousemove mouseup', function (event) {
$(parent.document).trigger(event);
});
This way you can evaluate all your Javascript on the parent's document context.