We use some ajax to update a photo on a page. But afterwards, the slimbox lightbox no longer works. Previously, it does.
I tried doing:
window.opener.slimbox2();
But it immediately opens the lightbox (as in the screen darkens and a white box appears at the middle). What I'd like is just to get the slimbox2 plugin sort of ready, not immediately pop-out. I tried looking at the js code for slimbox2 but it's already the minified version and it seems that the entire function is automatically called as it has this format:
(function () {
// code here
})(jQuery);
How do I call it again?
We have found a solution to our problem which is actually quite simple. On the anchor tag for the lightbox we just added:
onclick='jQuery.slimbox("[Image URL]"); return false;'
So it looks like this:
<a rel='lightbox' href='image name' onclick='jQuery.slimbox("[Image URL]"); return false;'><img src='image source'></a>
This is the jQuery slimbox2 API for more parameters:
http://code.google.com/p/slimbox/wiki/jQueryAPI
You have to call the javascript function which are used to show the light box or slim box whatever you are using. you have to add "window.opener.slimbox2();" when you have a response text code define your popup code there and it will work for you.
If still it's not work provide me code here so i will guide you
Related
Some content is displayed by ajax to be rendered in a div as a lightbox that is closed when user clicks outside (this content is deleted at this point):
Every time user clicks on the target div, some content goes to this controller:
controller:
def ajax_load
// some code
end
And finally this js function is called from controller:
ajax_load.js.erb
<% if #variable %> // embedded variable
$(target_div).html("<%= j render 'path' %>");
$('.some_div').on('click', '#target_element', function(e) {
e.preventDefault();
$("input#element_0").mask("00/00"); // works only once
$("#element_1").prop('checked','checked'); // works
$("#element_2").show(); // works
});
<% end %>
Inside this lightbox I have some inputs and this jquery mask function is called and it indeed works when I open this element once on the page, but if a close the lightbox and call it again it doesn't anymore, and the other lines of this click function keep working, like "jumping" the mask function.
If I try to make this mask to work directly from browser console after it had stop to work it don't change.
Obs: I also made some tests on the browser console:
After that lines of code above had already being loaded from the js file, the only way to get this to work on the browser console is changing a little from the jquery path:
$(".previous_div input#element_0").mask("00/00");
and to make it work again we need to change a little more:
$("body .previous_div input#element_0").mask("00/00");
I solved this problem in a way that I think is not the most recommendable.
Because of the behavior being like that I have duplicated id (and inspecting the source code it doesn't has it), I changed the id of the element and mask it again, and after that, works to me. Now I can close this lightbox and open again many times and have the input with the mask right there.
$("input#element_0").mask("00/00");
$("input#element_0").attr("id","element_0_masked");
$("input#element_0").mask("00/00");
I have the same problem, but from retrivied ajax added this script and it's worked for me
<script>
$('input[name="txt-tel"]').mask('(000)-000-0000');
$('input[name="txt-dni"]').mask('#');
</script>
You could use the unmask() function before mask(), like this:
$("input#element_0").unmask();
$("input#element_0").mask("00/00");
It works for me.
A very short summary of "why" I need this. I am using PlUpload which lets you upload files using Ajax while providing you back events like percentage, completion, etc. You instantiate the object, then call the "init" (telling it on which ID to "link to") and then add all the event listeners. Since the page which needs the object is created at run time and cannot include JS, I simply created a DIV (which I will make invisible when everything works...) in the main page with the links inside.
This is the link:
<a id="browse" href="javascript:;">Browse</a>
If I click it directly, it works.
When I create the new subpage in real-time, I want the link to be called when the user clicks on an image, like this:
<img onclick="document.getElementById('browse').click(); return false;" src="whatever.jpg">
But it doesn't seem to be working. If I use any other "clickable link" rather than the "browse", it works, so there is no apparent error in the syntax.
Please note that if I modify the link like this:
<a id="browse" onclick="alert('Hello'); return false;" href="javascript:;">Browse</a>
Then I can see the "Hello" popup when I click on the image.
I am a beginner in JS/HTML, so if this is an obvious problem... Sorry ;)
Or if you know of a better solution to the general problem (without jQuery please), I would be grateful :)
This is the init part of the PlUpload:
var uploader = new plupload.Uploader({
browse_button: 'browse',
url: 'newupload.php',
});
uploader.init();
Embed the element inside element and you can click on the image which will do the same effect.
<img src="..."></img>
Instead of using the click() method try using this:
$('#browse').trigger("click");
this should trigger the event of the link instead of listening to the event and if you dont want to use jQuery you can simply do this:
document.getElementById('browse').onclick();
Happy coding!
There is a situation I am having with jQuery. In particular its prettyPhoto library and getJSON function.
I have a page which loads HTML, it calls jQuery and prettyPhoto. There is some inline JS which makes a JSON request further down the page:
It should work like the below:
1) Page loads,
2) Javascript code run,
3) Script runs a jQuery JSON request which returns and has HTML (a-tags and images inside each a-tag) inside,
4) Script then prints the HTML from inside the JSON to the screen,
5) User clicks a-tag/image and it opens in prettyPhoto's iframe popup.
NOTE -> Each a-tag has a prettyPhoto id attached (to load the image in prettyPhoto using iframe popup).
The problem is the images (a-links) do not open with prettyPhoto and I am not sure why. There is no JS Error.
However, it does work if i manually have the HTML (a-links/image) already there (so just loading their HTML from the JSON request seems to make the difference).
Seems by time the JSON request returns (with HTML) prettyphoto already binds to a-tags (or lack off).
Tested so far:
Tried putting JSON request in 'document.ready' and prettyPhoto in 'window.load'. So does JSON requests early and prettyPhoto binds when everything else loads - failed
Tried using jQuery AJAX instead of JSON - failed
Dont need the code especially but having trouble with the logic.
It sounds like the HTML from the JSON (a-links/images) doesnt come back quick enough (before 'window.load' runs).
Try putting the prettyPhoto JS into the success callback (i.e. where returns data).
Below load_images.json is the JSON request you do which returns the HTML (a-links and their images):
$.getJSON("load_html.json", function() {
//grab HTML data (images/a-links) from json file and print into page
})
.success(function() {
//JS code running prettyPhoto inside here. Now will bind to a-links.
});
PrettyPhoto now binds to A-links AFTER the JSON has loaded them.
Hopefully will help having the prettyPhoto stuff AFTER the a-links.
If that fails try putting the prettyPhoto code inside the complete callback which occurs after success callback. Like the below:
$.getJSON("load_html.json", function() {
//grab HTML data (images/a-links) from json file and print into page
})
.success(function() {
//nothing
})
.complete(function() {
//JS code running prettyPhoto inside here. Now will bind to a-links.
});
This way you are giving prettyPhoto plenty of time to bind to the correct a-links which are marked for it.
Try that.
I'm using the jQuery dialog plugin.
The dialog div is set up (but not opened) on page load:
$(document).ready(function(){
$('#foo').dialog({autoOpen:false});
});
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
I have tried returning false:
Show dialogue box
But then the link doesn't respond at all when I click on it.
I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.
Can anyone help?
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.
I have tried returning false:
...
But then the link doesn't respond at all when I click on it.
That also shouldn't be happening.
Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.
Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
function showDialog(selector) {
$(selector).dialog('open');
}
</script>
Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
Or by using onclick:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
But in any case, strongly recommend hooking things up with a DOM2 style event handler:
<a href="#" name='openSesame'>Click Me</a>
<script>
// This _can_ be immediately after the anchor, but I'd put it in
// a separate, since .js file for the page that you load just before
// the closing body tag.
$("#foo").dialog({autoOpen: false});
$("a[name=openSesame]").click(function() {
$("#foo").dialog('open');
return false;
});
</script>
Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)
One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).
Change the link to:
<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
Show dialogue box
</a>
Best avoid putting javascript in the href.
Even better would be giving it a class and than adding a click event to it through jquery.
My doubt is actually pretty simple. I have an image of a V890 server and on mouseover of that image i want to call a lightbox,which shows the specs of that server.
I cant get the code to work. Also never used 'onmouseover' function before so dunno how to write the code.
I have found a useful lightbox called 'lightwondow'.
<strong>Monster Fixed Page</strong> - This page is just plain to big for the browser window unless you maximize a 30 inch monitor.
I need to add a mouseover to this code.
Any help would be appreciated.
Thanks.
Anand.
i think the lightbox is usually load at the onclick event, you have to change that to be able to lauch it onmouseover.
Open the file lightbox.js an change the line:
anchor.onclick = function () {myLightbox.start(this); return false;}
with:
anchor.onmouseover= function () {myLightbox.start(this); return false;}
By the way i think you ahve to add the rel attribute to the anchor:
rel="lightbox"
HTH!