I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?
It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.
To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/
Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.
Related
I load the datepicker scripts from code.jquery.com.I try now to copy them to my own Server, because of performance and security reasons.
Altough I have Changed my css and copy both scripts, it will not work. The working Version is
http://www.ruhrlink.de/heute.php?tag=Heute&ort=Ruhrgebiet&nonight=0
and the Local is
http://www.ruhrlink.de/termine.php?ort=Ruhrgebiet
I am new in JS and can't find the error.
you have these 3 script tags in your body:
<script src="jquery1.11.2.js"></script> //loads jQuery
<script src="jquery-ui.js"></script> //loads jQuery UI
<script>$("#datepick").datepicker({...})</script> //initializing DatePicker
The problem is in first script tag. It contains the code for jQuery UI and not the jQuery. See the following two links from the not working site to verify.
jQuery UI.js
jQuery.js
You need to change the script in jquery1.11.2.js from jQuery UI to jQuery
Edit:
Get jQuery from this link: http://code.jquery.com/jquery-1.10.2.js
Copy all of contents from this file and replace them in your jquery1.11.2.js file.
I found that solution, to expand all accordion sections:
http://www.bootply.com/peFUdnwOpZ
I copied the code in Joomla.
Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.
But It is not working. Can Anybody help?
Background information:
I had to add bootstrap min.js, otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.
I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.
Nothing worked.
I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:
null is not an object (evaluating '$('.closeall').click')
So, it misses the link to the other javascript files. Maybe some can help?
I believe you may have forgot to add the following piece of code in your custom js file -
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
Hope this may work for you :-)
I am tryting to install a facebook slider tab in a friend's blog and I cannot make it work.
This is her blog: http://secretosdeprofe.blogspot.com.es/
And this is the tutorial: http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html
jQuery is installed in the blog (hence the hover Pin it button working on images) but when hovering the mouse over the facebook tab, the widget does not come out
Any ideas why is not working?
Thanks!
You are using the jQuery variable in a <script> (line 1090) element before you add <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> (line 1543), at the time when your earlier script block was parsed jQuery hadn't been defined. It's possible with a little extra work to queue something before jQuery is included (as shown here) but this approach will still require some code after jQuery is loaded in order to be referenced by jQuery's onReady listener.
I'm trying to implement bootstrap tooltips on my site - you'd think it would be easy enough, but something is not working correctly - the bootstrap tooltip is not functioning.
I'm calling all the right scripts, stylesheets and javascript - I believe. I'm following the example here: http://jsfiddle.net/TSZSL/171/ and I believe this javascript could be throwing me?
$('.example').tooltip();
Here's the page I'm referring to. I just get a regular tooltip with no bootstrap functionality.
The problem is your reference to boostrap's tooltip library. You can't link to it like that; it's not a CDN...
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>.
Use netdna's complete JS package or host the individual script yourself. See BootstrapCDN.
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.
Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.