Here the scenario:
I want to apply a datepicker on a input field in a form.
When clicking a link a colorbox will open containing the form.
Somehow the datepicker doesn't work, so I searched the internet.
I was confused by this post datepicker inside a thickbox where the following statement was made:
JavaScript/jQuery is not working inside of ColorBox.
It confused me because other people seem to have worked it out.
I'll show the code of the colorbox call:
<script type="text/javascript">
$(document).ready(function() {
$(".customer").colorbox(
{
transition:'fade',
width:'750',
speed:'500',
height:'400',
iframe:true
});
});
</script>
The colorbox opens successfully although my error console says there is a } missing after the first }); occurrence.
The code for the datepicker:
<script type="text/javascript">$(document).ready(function() {
$('.datepick').datepicker({
changeYear:true,
yearRange:'c-65:c+0',
changeMonth:true
});
$('.datepick').datepicker($.datepicker.regional['nl']);});</script>
This code does work somewhere else on my website where it is not located in a colorbox.
What I have tried:
I tried to give the class datepick a z-index of 10000 or higher since colorbox has a z-index of 9999 by default.
I tried the oncomplete function() on the colorbox, but couldn't get the colorbox work when applied.
I tried setting iframe to false in combination with the previous two options.
My question(s):
Is it possible to have a datepicker working inside a colorbox?
Is my code about the colorbox correct?
How to fix it?!
UPDATE
Solution: I made a stupid mistake :P...
Yet I found the answers on my first question, which may be of some value.
Yes it is possible to have a datepicker working inside a colorbox without using the onComplete:function().
Does your loaded iframe contain the datepicker instantiation code?
My assumption is this:
you have an anchor with a class="customer"
this anchor has an href, which points the the page you want to show in the colorbox
this page loads in an iframe (due to iframe:true)
and this page doesn't have your datepicker instantiation code
The easiest thing to do is to move the datepicker code to the onready function of the customer page.
As noted in ColorBox documentation:
This is often due to trying to access an element before it has been loaded into the document and can be resolved by moving the JavaScript into ColorBox's onComplete callback.
Example (using jQuery Forms plugin):
$('#login_window').colorbox({
...
onComplete:function(){
$('form#login').ajaxForm();
}});
You can adapt the example to load the datepicker.
I got the same issue.
I used an id as selector, but colorbox duplicate the whole html content and the id's too.
So if I use $('#myid').doSomething() I got an error, because "myid" was duplicated.
Thats the issus.
Use a better selector like $('#colorbox .myidasclass').doSomething() to solve the issue.
The same problem is with class selector without the '#colorbox' as additional selector.
Related
I know this has been asked on SO a lot, but I have trawled through the posts for a few hours now and nothing works.
I'm working on a Wordpress blog where the prev/next buttons on a single post page have to load the prev/next post by Ajax. I have written the code (jQuery Ajax) all fine (I think - if you want to improve it, be my guest!), but in each post there a few bits of jQuery that need to work. However, after I click either of the prev/next buttons to move between posts, the jQuery won't work (it works absolutely perfectly when the page is first loaded). I know this is due to the content not being 'connected' to the JS anymore but I'm not sure what to do about it.
Here is my code:
$(".page-feed").on('click', '.post-nav>a', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var link = $(this).attr('href'); // get the value of the href attribute on the links
$(".post-content").html("Loading...");
$.get(link, function(result) {
$result = $(result);
$content = $result.find(".post-content");
$(".post-content").replaceWith($content);
}, 'html');
});
I know that you're probably going to ask what I've already tried, but if I'm honest, not a lot that would be worth putting here.
The code above is located right at the top of a file called script.js, with all the other JS below it (which doesn't currently work after the Ajax call). The script is started by the standard $(document).ready(function() { statement.
Thanks for any help :)
First, you need to accept the event object as an argument.
$(".page-feed").on('click', '.post-nav>a', function(event) {
Next, by using the jQuery event object, you can simplify the next line because event is normalized by jQuery to work cross-browser.
event.preventDefault();
Now, as far as it working on the first click but not after, that's likely because .page-feed is a dynamic element. You'll need to instead select an element that is an ancestor of .post-content. document is a decent replacement, but it would be better if you picked one more local.
$(document).on('click', '.post-nav>a', function(event) {
The problem is this:
I have a simple, two fields form which I submit with Ajax.
Upon completion I reload two div's to reflect the changes.
Everything is working perfect except a jQuery plugin. It's a simple plugin that can be called with simple
function(){
$('.myDiv').scrollbars();
}
It's simple and easy to use, but it doesn't work on Ajax loaded content. Here is the code I use to post form and reload div's:
$(function() {
$('#fotocoment').on('submit', function(e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
}).error(function() {
});
e.preventDefault();
});
});
I've tried creating a function and calling it in Ajax succes:, but no luck. Can anyone show me how to make it work ? How can that simple plugin can be reloaded or reinitialized or, maybe, refreshed. I've studied a lot of jQuery's functions, including ajaxStop, ajaxComplete ... nothing seems to be working or I'm doing something wrong here.
If you're loading elements dynamically after DOM Document is already loaded (like through AJAX in your case) simple binding .scrollbars() to element won't work, even in $(document).ready() - you need to use "live" event(s) - that way jQuery will "catch" dynamically added content:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Source: jQuery Site
Even if I am totally against using such plugins, which tries to replicate your browser's components, I'll try to give some hints.
I suppose you are using this scrollbars plugin. In this case you may want to reinitialize the scrollbars element, and there are many ways to do this. You could create the element again like in the following example
<div class="holder">
<div class="scrollme">
<img src="http://placekitten.com/g/400/300" />
</div>
</div>
.....
$('.scrollme').scrollbars();
...
fakedata = "<div class='scrollme'>Fake response from your server<br /><img src='http://placekitten.com/g/500/300' /></div>";
$.post('/echo/html/', function(response){
$('.holder').html(fakedata);
$('.scrollme').scrollbars();
});
If you want to update the contents of an already initialized widget instead, then things gets more complicated. Once your plugin initialize, it moves the content in some custom wrappers in order to do its 'magic', so make sure you update the correct element, then trigger the resize event on window, pray and hopefully your widget gets re-evaluated.
If it doesn't help, then try to come up with some more details about your HTML structure.
I want to thank everyone of you who took their time to answer me with this problem I have. However, the answer came to me after 4 days of struggle and "inventions" :), and it's not a JS or Jquery solution, but a simple logic in the file.
Originally, I call my functions and plugins at the beginning of the document in "head" tag, like any other programmer out here (there are exceptions also ).
Then my visitors open my blog read it and they want to post comments. But there are a lot of comments, and I don't want to scroll the entire page, or use the default scroll bars, simply because they're ugly and we don't have cross browser support to style that, just yet.
So I .post() the form with the comment, and simply reload the containing all of them. Naturally .scrollbars() plugin doesn't work. Here come the solution.
If I put this :
<script>$('.showcoment').scrollbars();</script>
in the beginning of my loaded document (with load() ), will not work, because is not HTML and it's getting removed automatically. BUT !!! If i do this:
<div><script>$('.showcoment').scrollbars();</script></div>
at the same beginning of loaded document, MAGIC .... it works. The logic that got me there I found it in the basics of javascript. If your script is inside an HTML element, it will be parsed without any problem.
Thank you all again, and I hope my experience will help others.
If I understand you correctly, try this:
var scrollelement = $('.myDiv').scrollbars();
var api = scrollelement.data('jsp');
$(function () {
$('#fotocoment').on('submit', function (e) {
$.post('submitfotocoment.php', $(this).serialize(), function (data) {
$(".coment").load("fotocomajax.php");
api.reinitialise();
}).error(function () {
});
e.preventDefault();
});
});
reinitialise - standart api function, updates scrolbars.
I'm facing an interesting problem where everything works flawlessly. I console.log every step and it plays out just the way it should. But! I have a #div into what I .load(a-file.php). Now that "a-file.php" includes HTML mark-up as well, more specifically certain links that I'd like to make "active" onload.
Scenario; page load happens, Javascript loads and loads a file into the div. That div now has tabs and I'd like the first tab to be in an "active" state which requires me to addClass('active');. But the following seems to have no effect
$('#content').load('file.php'); // works.
$('#content a[rel="weird-page"]').addClass('active'); // does not work.
Any kind of help, even remotely nailing it, is appreciated.
change to:
$('#content').load('file.php', function() {
$('#content a[rel="weird-page"]').addClass('active');
});
jQuery load() works asynchronously and therefore your addClass() method is being called before load() has completed.
Using the load() callback function it will ensure your content has loaded:
$('#content').load('file.php', function() {
$(this).find('a[rel="weird-page"]').addClass('active');
});
shameless-plug-warning: I wrote a blog post about jQuery callback functions which you might find useful.
I have an odd problem in my jQuery code that loads in Drupal 7. I used the following instruction :
(function ($) {
Drupal.behaviors.exampleModule = {
attach: myPopUpFunction.....
})(jQuery);
On my mac browsers this codes loads after the document is loaded however on PC the popUp loads first and then the whole page loads.
Any idea?
Thank you,
not sure if your issue is browser specific, but my suggestion is that you could bind the myPopUpFunction with the window's load event, in that way only after the window's elements are all loaded the popup method would be triggered invoking the popup load
$(window).bind('load', function() {
// popup load goes here
});
this should serve the cause, but the popup would load after 'all' the elements including images which might not be desired.
Note: jQuery 1.7 onward suggests method .on() instead of bind.
I have some experience in PHP but not in JQuery that much.
My admin.php page has a div which has id named "table1" where content gets loaded via ajax:
document.getElementById("table1").innerHTML=xmlhttp.responseText;
xmlhttp gets data from sorgula1.php page which has some JQuery effects like highlighting table rows. When I'm trying to run the sorgula1.php alone, the highlighting works but when it is loaded via ajax to admin.php, highlighting and other JQuery effects are not working. I've tried everything to make it work but, I always failed.
For those of you who will ask me to remove the $(document).ready(function() statement, I'm informing you that it doesn't work.
Here is the sorgula.php code: sorgula1.php
please be specific about the answers guys.Thanx for all answers.
Maybe when you use innerHTML property, the javascript doesn't work. I think you can solve this problem by using jQuery load() function.
The problem is most likely that the elements loaded via ajax do not have the effects applied to them - have you tried calling the $("#myTable").tablesorter(); javascript (again) after the ajax response has been received and injected into the DOM?
Edit sorry it should probably be this code that you call:
$("tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
or use .live()
Try to rewrite your events to Live(). I would say that it doesn't work, because elements are loaded after the jQuery functions are registered. So try
$("tr").not(':first').live('hover',function(){ // CODE });