I am caught with a problem that a modal popup link that is inside a sliding side bar is not working correctly to open a modal pop up box. The sliding sidebar will only open when a user click on it, and in it there will be contents that contain the modal links.
I have added
Jhtml::_('behavior.modal');
At the beginning of the codes but still doesn't work. My link code is as follows
<a class="modal" rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="index.php">Click me</a>
Based on this link, it should open the content in a modal popup box in normal case (on the main page and not in the sliding sidebar). However when it is in the sliding sidebar it doesn't work.
The main reason I think of could be because the sliding sidebar is dynamically created after the site has been loaded, so the link will not behave as a modal link but just an ordinary href link.
I have seen a reply online here suggesting to execute this
SqueezeBox.assign($$('a.modal'), {
parse: 'rel'
});
every time you add a new element. But I do not know what it means and how to execute it.
Does anyone here have a solution to make the sliding sidebar modal link work?
Finally, i found the answer myself. For anyone who may encounter this problem with ajax or dynamic content just add the following to your loading page javascript
$('body').on('click', 'a.osmodal', function(event) {
event.preventDefault();
SqueezeBox.open($(this).attr('href'), {
handler: 'iframe',
size: {x: 900, y: 500}
});
});
This is just a simple contribution, hope someone will find it helpful.
Wanted to answer your question regarding the proper means to assign Joomla's core modal behavior to dynamically generated content, because you were so close. At work we generate a lot of content using AJAX/lazy loading.
There are two parameters for assign method. The first indicates which DOM elements to apply, and below I include examples for both assigning by class or id. The second is JSON object options, which 9 times out of 10 will already be attached to the rel attribute of your anchor element.
A final caveat being this method must be run after dynamically generated HTML is inserted into the DOM.
Using Class
SqueezeBox.assign(
$$('a.modal.unique-class-identifier'),
$('a.modal.unique-class-identifier').attr('rel')
});
Using ID
SqueezeBox.assign(
'a.modal#unique-id-identifier',
$('a.modal.unique-class-identifier').attr('rel')
});
Hope that helps.
Had the same issue, I dynamically added some links in a Joomla page after the page was already loaded. The following snipped added the event handler for the modal dialog on the newly added elements (make sure it's called after the elements were added):
<script>
SqueezeBox.assign(jQuery('a.modal'), {
parse: 'rel'
});
</script>
Also make sure, you have the modal functionality loaded in (e.g.) your template:
JHTML::_('behavior.modal');
Related
So I have categories buttons on the website, when they are being clicked a jquery dialog will popup and the information being shown is returned from a php script depending on the category. This all works perfectly, but the stylesheet is not applying on the returned data (select menus, checkboxes etc..).
$$.ready(function()
{
var dlg=$('#product_dialog').dialog({
resizable: true,
autoOpen: false,
modal: true,
hide: 'fade',
width:350,
height:275
});
$( "#bestelling_1" ).on("click", "#product_dialog_open", function(e)
{
e.preventDefault();
dlg.dialog('open');
var id = 1;
$('#product_dialog_test').html('Ogenblik geduld..');
$.ajax({
url: "scripts/load_product_dialog.php?id="+id
}).done(function(data) {
$('#product_dialog_test').html(data).trigger('create'); // display data
});
});
});
So it all works perfectly, the dialog being opened, loaded and such.. just the stylesheets that are being loaded from index.php in the head doesnt apply on this dynamic retrieved data.
You should put more details about your DOM and stylesheet so we can
trace the problem. There's a lot of things that can prevent the
style to apply,
Make sure the css file is actually loaded , you can look it up in
developer tools in your browser.
Make sure you have write css rule and it's containing the element you want to style. It can get overridden by another rule or a rule in third-party css file. You can also look this up in developer tools.
If you're new data are loaded into an iFrame it will not use any of
the CSS rules in your page. You have to put the css rule into the page that iFrame loads.
Are you using Jquery UI or some similar framework? For a lot of those you need to reapply the attributes when dynamically adding elements.
For example, if I'm using JQuery UI and I add a buttone after page load. I need to run $('button').button() to apply the Jquery UI button attributes to it.
If that's not the case you need to add more detail to your question. Or create a jsFiddle with a minimally verifiable example.
I have found the cause. I had to initialize the plugins after loading the content.
I've got a dynamic table filled by a recordset from MYSQL.
Each row has it's own delete button (image) to delete the specific row.
This button has a class="button".
I'm using a JQuery popup modal to get a popup when a delete button is clicked.
In this JQuery script i'm creating a variable which contains the numeric value of the first td cel of the row that has been clicked on.
This all works perfectly.
What i'm trying to accomplish is to use this variable on the same php page.
Here is where my knowledge runs out.
I've read some examples where Ajax is the solution for this, but i lack the knowledge to use these examples for this solution.
JQuery code:
<script src="../javascript/jquery-1.8.2.js"></script>
<script src="../javascript/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function(e) { // Button which will activate our modal
var value=$(this).closest('tr').children('td:first').text();
alert(value); // this works
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 500, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>
I've been trying too much that i don't see the logic anymore.
I hope that someone can help me with this.
The issue is that your JavaScript runs in the client -- the user's web browser -- while your PHP runs on your server. It's a two-stage process: first, all the PHP is executed on the server and the HTML is rendered, which is then sent to the client (the browser). Then, the client executes all the JavaScript on the page.
You need some way to communicate the JS variable (value) to your server if you want to be able to use it in your PHP code. AJAX is one such way, but it would be helpful to have more information on how exactly you want to use this information in your PHP.
Edit: based on your comments above, something like this should work. You'll have to give your Yes button an id attribute (here I'm assuming the id is yesButton).
$(.button).click(function() {
var value=$(this).closest('tr').children('td:first').text();
$("#yesButton").attr("href", "delete_verlof.php?id=" + value);
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 500, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
The important thing to note is that the JS variable does not exist yet at the time at which your PHP executes, so it is not available to the PHP. What I've done here instead is to dynamically change the href of the Yes button whenever the user clicks a td, which should have the desired effect.
If your using this in a form, then you could create a hidden input field with a unique id and add it with.
$('#idOfField').val(value);
And then use php to get the element from wherever you put it in your code.
Other then you might find attr usefull. For an example
$('#idOfField').attr('data-id', value);
Where the ID can be an div, span, i, a, bold, strong etc etc etc.
I am working on a revamp of my companies website, a js vertical scrolling menu of buttons on the left are links to change the contents of the main div under the header. I have it set up with php include statements right now, which works, but every time it reloads the whole page, so the scrolling menu on the left resets to the top of the list, losing the visitors place.
You can see the prototype at http://www.nbtc.org/nv, click on 'Bicycling' or 'Carpool' to see it in action.
Instead of doing that I want to use js to change the contents of the div with innerHTML, I want one function where the link includes the variable, so the link would look like:
<a class="button" href="javascript:changecontent(bike)">Bicycling</a>
The following function would than run:
<script type="text/javascript">
function changecontent(var1)
{
document.getElementById('content').innerHTML="<?php include(" var1 .php"); ?>";
}
</script>
And the div with the id'content' would change to include bike.php. Clicking a different link would change the div to something else.
I am new to this, so please help me with the syntax of the script, I know I have to separate out the 'var1' in the function statement but I don't know how.
This seems like a straight solution, but if there is a better way I am all ears. The vertical scrolling menu already uses jquery, and I read about the 'load' function, maybe that would be better?
Thanks for your help! Brenden
$.load would definitely be good here.
$(function(){
$(".menutable").on("click", ".button", function(event){
event.preventDefault();
$("#content1").load(event.target.href);
});
});
Then change all of your links to contain their actual destination in the href value:
<a class="button" href="bike.php">Bicycling</a>
Demo: http://jsbin.com/uyasux/edit#javascript,html
I am redoing my site and have at any time 80-120 vehicles, all identified in my db by their unique stock number. I'm using jQuery's accordion to list the vehicles:
http://www.login.carcityofdanbury.com/New/?cat=01
How do I embed edit.php?stock=__STOCK__ into the div of the open accordion, once the accordion opens?
I tried just using just an HTML <embed> tag, but it is making the page load extremely slow.
I am new to the whole jQuery, Ajax, coding thing and am completely a self taught "learn as I go" guy, so a demo, tutorial or example would be great.
You could use a combination of jQuery .load function (http://api.jquery.com/load/) and the jQuery UI Accordion change event (http://jqueryui.com/demos/accordion/#event-change) which gets triggered after an accordion slide opens:
$(document).ready(function(){
$("#listVehicles").accordion({
collapsible: true,
active: false,
autoHeight: false,
change: function(event, ui){
ui.newContent.load('edit.php', { stock: __STOCK__ });
}
});
});
When the change event is triggered, the edit.php file is loaded using AJAX and the HTML is dropped into the opened accordion slide.
You could get some help here:
http://api.jquery.com/jQuery.ajax/
Example:
$.ajax({
url: "yourPage.php",
success: function(data){
$("#youarea").text(data);
}
});
I would recommend using the jQuery load() function which is designed for this specifically. You give it an element, and a url and it will load the content into the element.
So, in your Accordion handling code, you'll want to place the following:
$('#elementToLoadInto').load('edit.php?stock='+id');
From there, your PHP page should server up a single (or multiple if needed) <div> element, not a full HTML page. That content will be placed into #elementToLoadInto exactly as it is, just like it was coded there.
jQuery can also load only a piece of the page, so you could also take advantage of that functionality if you need to return a full HTML page for some other reasons.
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.