I have the following code for a simple jQuery UI dialog box. When I place this on a webpage, it works beautifully. However, If I call I insert this code dynamically onto a page using an AJAX function, it doesn't work and the dialog div just appears on the page. Is there any way to make it work in dynamically inserted code?
File DialogBox.html:
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>
This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
File index.html (calls DialogBox.html):
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: "DialogBox.html",
success: function(html){
$("#SpanID").html(html);
}
});
</script>
Does this work better for you?
$("#SpanID").load("DialogBox.html");
In addition to being shorter, it should also allow the loaded JavaScript to be run. More info here: http://docs.jquery.com/Ajax/load
Related
I have code for skype button and it is visible on user page but invisible in CKEditor. What to do to make it visible in CKEditor content?
<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_fasdf_1">
<script type="text/javascript">
Skype.ui({
"name": "dropdown",
"element": "SkypeButton_Call_fasdf_1",
"participants": ["fasdf"],
"imageSize": 24
});
</script>
</div>
Any javascript that you include in the CKEditor content won't be executed, so you'll have to create a plugin that detects that HTML and shows an icon for that code (and dialog to edit?)
I have a mobile application built with phonegap and I'm using jquery mobile. On the first page I have link to another, href="page2.html".
When the second page loads, I am using .get() to retrieve xml data and convert it to json using xml2json.js. The page works properly if I make this page the index and load it up when the application is opened, so I know the script is working. However, when loading it via link from another page, the .get() method doesn't seem to load up any data.
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="js/jquery.xml2json.js"></script>
<script type="text/javascript">
$.get('http://domain.com/app/getfacilities/?org=mysite', function(xml){
var facilities = $.xml2json(xml);
for (i=0; i<=facilities.facility.length; i++){
var locName = facilities.facility[i].name;
var id = facilities.facility[i].id;
$("#fieldList").append("<li><a href='#'>" + locName + "</a></li>").listview('refresh');
}
});
</script>
<script type="text/javascript">
app.initialize();
</script>
You need to place your <script> tag inside of your <div data-role="page"> tag. <script> tags that reside outside of your <div data-role="page"> tag will only be loaded on your first/initial page load which seems consistent with what your are experiencing.
<div data-role="page">
<script>
// js script here
</script>
</div>
I am trying to get my AJAX .load function to have back/reload/bookmark capability.
I am using the jquery plugin history.js.
My content is being loaded in my content div from another html file using anchor points within that to specify which div to select the information from (depending on link clicked).
Currently, i have managed to get the plugin to change the address but the back/reload functionality is not working.
This is the plugin code i am using: https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js
Head:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>
Navigation:
<div id="leftnav">
<p class="leftnavtext">
<a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
<a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
<a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
<a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
</p>
AJAX Javascript code:
$(document).ready(function(){
$("#about2").click(function(){
$("#content").load("content.html #about");
});
$("#process2").click(function(){
$("#content").load("content.html #process");
});
$("#materials2").click(function(){
$("#content").load("content.html #materials");
});
$("#pricing2").click(function(){
$("#content").load("content.html #pricing");
});
$("#pricing3").click(function(){
$("#content").load("content.html #pricing");
});
$("#infinite1").click(function(){
$("#content").load("content.html #infinite");
});
});
back.js Code (path.js is the plugin.):
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/about');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/process');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/materials');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/pricing');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/infinite');
}
Can anyone see where im going wrong with this? Or can they suggest a better plugin to use?
Thanks
if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/
window.addEventListener("popstate", function(e) {window.location = lastURL; });
window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);
I stole this from another answer.
Unfortunately it does not work in IE.
further reading:
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html
My Code:
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider02').nivoSlider({
controlNav: true,
effect: 'boxRainGrow',
animSpeed: 1500,
pauseTime: 8000
});
});
</script>
<div class="slider-wrapper theme-default">
<div id="slider02" class="nivoSlider">
<span id="zone933">
<script type="text/javascript">
jQuery('#zone933').load('/content.phtml);
</script>
</span>
</div>
</div>
How to make Nivo Slider waits until the ajax content will be loaded?
Because, sometimes it works sometimes not.. it depends on refreshes of browsers.
The first visit of page doesn't display the Slider, after refresh and ajax content load,
it displays is OK.
SO i need to do something like wait until the ajax request is completed and than call the Slider.
I have tried to add:
jQuery(document).ajaxComplete(function{ "here my code" });
But it doesn't work.
I am using it with PHP functions so I have the calling of slider in PHP function
so the function is calling the jQuery code and html code of slider and the parameter
of function is the name of element id for example "zone933".
The PHP works correctly; if I use simple images or images with links it works perfect.
I doesn't work properly only I use ajax load.
Try something like this:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#zone933').load('/content.phtml', function () {
jQuery('#slider02').nivoSlider({
controlNav: true,
effect: 'boxRainGrow',
animSpeed: 1500,
pauseTime: 8000
});
});
});
</script>
<div class="slider-wrapper theme-default">
<div id="slider02" class="nivoSlider">
<span id="zone933">
</span>
</div>
</div>
This time, it's a little bit different from my previous posts. So I decide to make a new one.
FYI, I use Lightbox plugin from this:
http://leandrovieira.com/projects/jquery/lightbox/
ePC.html = contain an image with lightbox effect (work with IE, Chrome, Firefox).
reviews.html = Home page. connect to scripts/script.js. (Contain the .load() function, loading ePhone.html or ePC.html by clicking on one of those 3 links). Please Ignore "ePhone.html".
Below is the scripts/script.js file:
$(document).ready(function() {
//ePhone link is clicked. Open ePhone.html PLEASE IGNORE THIS LINK.
$('#linkEPhone').click(function() {
$('#apDiv2').load('ePhone.html');
});
//ePC link is clicked. Open ePC.html
$('#linkEPC').click(function() {
$('#apDiv2').load('ePC.html', function () {
$('a[#rel*=lightbox]').lightBox();
});
});
//ePC2 link is clicked. Open the <div> section of ePC.html. The image is located inside the <div> section.
$('#linkEPC2').click(function() {
$('#apDiv2').load('ePC.html #content', function () {
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[#rel*=lightbox]').lightBox();
});
});
});
});
});
The problem is with the third one above:
$('#apDiv2').load('ePC.html #content', function () {...
'#content is id. ANd the picture is within the tag within "ePC.html"
<div id=content>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
It WORKS 100% on Chorme and Firefox but NOT Internet explorer 8!!!!. (I understand why people hate IE now..)
IE crashed!. I later fixed this crashing problem by removing the !DOCTYPE..within "reviews.html"
Ok with !DOCTYPE removed, IE doesn't crashed anymore. HOWEVER, the lightbox CSS DOES NOT APPLIED to the image!
Other methods that I have tried but didn't work:
*1. "live" instead of "load":*
$('#linkEPC2').click(function() {
$('#apDiv2').live('load', 'ePC.html, #content', function(){
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[#rel*=lightbox]').lightBox();
});
});
});
});
This one doesn't work at all. Even the image is not there at all.
So I guess I may stick with the "load()" function instead.
2. I've also tried putting these 3 lines into the div section:
<div id=content>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
but it doesn't work neither..
I had the same problem and noticed a few things about the jQuery load in IE:
It doesn't accept the syntax of 'load("href selector",function()...' (while chrome and FireFox do accept this syntax).
The loaded html should not include tags.