PDA

View Full Version : Print not working as desired in Lightbox



raihan
02-25-2013, 03:49 PM
Hi, I have created a lightbox form and at the a confirmation page within lightbox. In the confirmation page, I have kept an option of Print button, with the code as:

<input type="button" value="Print" onclick="if(window.print)window.print();return false;">
That button works properly, but it prints whole page. I need to print only the Data portion. I have tried to open new window. But that doesn't work from lightbox. What else I may try, please?
Thanking you in advance.
Raihan

jscheuer1
02-28-2013, 05:30 AM
That's something that's best accomplished using a print stylesheet. In the print stylesheet you set everything on the page to display none, except for the form and all of its parent, parent.parent, parent.parent.parent, etc. nodes. Since those would include the Lightbox, you set parts of it to display none as well or otherwise make them so that they don't show up by removing borders, background colors, etc. for those parts of the Lightbox that you don't want printed. To be more specific I would have to see the page. Except that I can tell you how to make a print stylesheet. Just make it like a regular stylesheet. But make the link to it like so:


<link rel="stylesheet" href="print.css" type="text/css" media="print">

Where print.css is the name of the stylesheet. You can include the path if any. Place it after all of the other styles for the page. You can use a DOM inspector or similar tool to determine what elements to go after in the stylesheet. It would have:


body * {display: none;}

at the beginning, then display block after that for those elements that need to be seen in order for the form to print.

Once you have that, your print button will print only the form.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

raihan
03-01-2013, 10:41 PM
Hi John,

Thnx a lot for ur reply. Here is my page address: raihans.co.uk/homepage/contact-us, for which I am facing problem. Please have a look and let guide, for any or alternative solutions.

Thanking you again.

Raihan

jscheuer1
03-02-2013, 03:55 AM
Using a text only editor like NotePad, save the following as print.css:


body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}

Put it in the same folder as the raihans.co.uk/homepage/contact-us file.

Add this tag as the last thing in the head section of the raihans.co.uk/homepage/contact-us file:


<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Now, when you print the page it will show only the form. Oh, and the scrollbars from the iframe. Those can be eliminated as well, and probably should be not just for printing but for general viewing as well. To remove them, add this style to the styles for the raihans.co.uk/component/chronoforms/?chronoform=contact&tmpl=component page:


html, body {overflow: hidden;}

The browser cache may need to be cleared and/or the page refreshed to see changes.

raihan
03-02-2013, 05:49 PM
HI, thnx for ur reply.

The code for scrollbar, works fine. But others, not at all. Can u reply me pls, if there is any way to call window.open() function? I have used, that. It works in normal page view. But, that function doesn't work in lightbox. That will be best for me, if it may possible, please. Thnx again.

Raihan

jscheuer1
03-02-2013, 07:56 PM
You haven't put the print.css file on the 'top' page.

BTW, I tried it here by appending the print stylesheet link to your page and it worked fine in IE, Chrome and Firefox.

raihan
03-02-2013, 11:24 PM
Hi, Thanks for the reply.
I don't know much about coding. I used joomla for my site. Whatever the codes there, created by joomla 3.0. I tried many ways as you suggest me. I couldn't sort it out, actually.

One of the example from chronoform component, allows me to print out exactly as I need - but unfortunately it works with normal web page view. When I click on 'Print' button, it pops-up a HTML webpage window only with my data, and on top of that print windows comes to allow printing. And that's working with window.open() function. That's why, I tried to have that function to work, which doesn't work when I tried with lightbox.

There is one print.css file in my template folder. But even if I remove that, my printing still works fine as it is. I am actually not clear which file, where to put, what to edit. That's the problem. For you to understand, I have added my code. It works, when I click 'Print' button in normal view. But when I call lightbox, then doesn't. Please have a check, and let me know, where I may need to change and what.


<input type="button" value="Print" id='print_button' style='visibility: visible;'></input>
<?php
$doc =JFactory::getDocument();
$script = "
function printPage()
{
var html, css, csss_file, printWin;
css = \"\";
css = \"<style type='text/css'>\"+css+\"</style>\";
css_url = '';
if ( css_url !== '' ) {
css_url = \"<link rel='stylesheet' type='text/css' href='\"+css_url+\"' media='print' />\";
}
html = '<html><head>'+css+css_url+'</head>'+$(id).innerHTML+'</html>';

printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
var id;
window.addEvent('domready', function() {
id = 'print_div';
$('print_button').setStyle('visibility', 'visible');
$('print_button').addEvent('click', printPage);
});
";
$doc->addScriptDeclaration($script);
?>

Thanks a lot.

jscheuer1
03-03-2013, 05:42 AM
Although it's shrouded in some Joomla proprietary PHP code, I understand that approach. It's less reliable than what I'm proposing, yet could have an advantage. It's less reliable because new windows from window.open() can and often are blocked by the browser. Usually if the browser 'thinks' the new window was called for by the user by clicking on something, it's allowed. But browsers keep getting stricter about such things, and any given browser can be configured not to allow new windows regardless of how they're called for. The advantage is that the page can still easily be printed in its entirety if the user wants to simply by using the browser's print button/option. With the approach I've put forth, to print the page in its entirety the user would have to disable the print stylesheet. Depending upon the browser, that can be moderate to high difficulty.

The print stylesheet you have is simply for formatting the printing of pages that have it associated with it.

The print stylesheet I propose will make the contact-us page print only the contents of the light box (SqueezeBox actually - a lightbox type script that uses the MooTools script library).

Anyways, in order to use the print stylesheet I propose, you would need to know how to associate it or at least its print styles with the contact-us page. Once that's done, any printing of that page will show only the contents of the box.

If nothing else, we could append it via javascript. But putting a stylesheet link on a page is a very basic thing. Are you sure you don't know how to do that with your setup? Let's say you had a supplemental stylesheet you wanted to use just for one page. Say it's called mystyles.css. How would you put a link to that stylesheet on the page?

If you really don't know how, as I say we can use javascript. Since the page also uses jQuery we can do:


<script type="text/javascript">
window.jQuery && jQuery(function($){
if(location.href.indexOf('contact-us') > -1){
$('head').append('<link rel="stylesheet" type="text/css" media="print" href="http://raihans.co.uk/components/com_chronoforms/css/contactprint.css" />');
}
});
</script>

Put that after all of the other scripts in the head. It can go in a common header file (as long as that common header file has the external script tag for jQuery) because it will only fire if jQuery is available, and will only append the stylesheet link if the page is the contact-us page.

Using a text only editor like NotePad, save this as contactprint.css:


body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}

and upload it to this folder:

raihans.co.uk/components/com_chronoforms/css/

On your page that goes inside the iframe, or even on the contact-us page, you can now have:


<input type="button" value="Print" onclick="if(window.print){window.print();}>

It will print only the contents of the box.

raihan
03-03-2013, 10:40 AM
Thnks a lot. U r grt. U took lots of time to answer me.
I couldn't find raihans.co.uk/homepage/contact-us directory at all. I can't understand, which print.css file it is striking. I have change all the print.css file with only your code. It's not working at all.
I couldn't catch, where to put your '<link rel....' code. I tried, as u suggest me for raihans.co.uk/....css/ folder. Nothing changed at all. Seems like, my print button striking somewhere from immagination.

The steps I did: 1) I make print.css file with only your code ( 'body * { display.... ' ) in raihans.co.uk/components/com_chronoforms/css/ folder
2) I put your another code ( '<input type ....' ) in my Confirmation Page Show event with custom Code element
3) I put your '<link rel ....' code in my lightbox On Load event with a Custom Code element

Sry, but I know u also trying to let me understand. I think, I can't catching the wright way. Thnks a lot.

jscheuer1
03-03-2013, 03:03 PM
Let's try this one step at a time. First -

Using a text only editor like NotePad, save this as contactprint.css:


body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}

and upload it to this folder:

raihans.co.uk/components/com_chronoforms/css/

Once you've completed that step, let me know. I will give you the next step.

Beverleyh
03-03-2013, 04:14 PM
I think I may be able to help a little here John. The common template file in a Joomla! website is located at http://www.mywebsite.com/templates/selected_template/index.php

The folder in red is the name of the theme that is currently in use (you can download and install different Joomla! themes into the "templates" directory), and the index.php file within that selected template folder contains the main website layout/template structure - the DOCTYPE, <head> section and <body> section of the web pages with all the template/module/block hooks inside of that. This index.php file is where raihan will be able to manually edit in his own content (references to external js/CSS files, etc).

Also, Joomla! generates dynamic page URLs from menu ids in the database, so a page that can be viewed at raihans.co.uk/homepage/contact-us doesn't actually exist there in a physical form. Nor does an actual "homepage" or "contact-us" folder exist either - those are references to dynamic 'category' names and 'section' names that Joomla! uses to generate a menu - so your way of isolating a page name with that jQuery snippet you posted earlier on would be the best way to link a specific js or CSS file to a singular page. Hope that helps. You've helped me too with that particular jQuery snippet BTW - I've been doing it with php :) Thank you.

But raihan, first do what John advised in the post before this and then let John advise what to do next.

raihan
03-03-2013, 07:35 PM
That's grt.
Just to remove any confusion in future, I am using Ubuntu Linux 12.04. Instead using directly my web server, I am using locahost at the moment. So, instead of raihans.co.uk, now is localhost and my directory for that is /opt/lampp/htdocs/joomla/components/com_chronoforms/css. Inside that folder, I have created as you suggest me: contactprint.css, with your code.

Thank you.

jscheuer1
03-03-2013, 09:44 PM
Upload it to the server. Each of these steps should be done live so I can check the progress and make adjustments if any are required.

raihan
03-03-2013, 10:26 PM
Alright, I have uploaded. Thnx. Then...

jscheuer1
03-04-2013, 02:09 AM
Great, I see it there and if I append it to the contact-us page as a print stylesheet it works. In order to get that to happen without me having to do it, follow this next step -

Part One - Make an empty local folder for backups and download this file into it:

raihans.co.uk/templates/raihans/script.responsive.js

Don't use the browser, use ftp or whatever file transfer method you use for maintaining the live site.

Part Two - download this file to a separate empty folder (right click and 'Save As'):

4962

And upload it to raihans.co.uk/templates/raihans/

Once you do that, clear the browser's cache and refresh the contact-us page. Then open the box containing the form. Then, using your browser's print preview from its menu, see what you get, it should be just the form, or just the form with a border.

Even if that's not what happens, leave it in place for me to check.

Once we get that part working, we are almost finished.

raihan
03-04-2013, 06:33 AM
Thank u. I kept my .js file in my local drive and uploaded your .js file into my site. I used filezilla for transfers. Then cleared my Mozilla browser's cache and cookies. Finally, I tried to print, but still unfortunate. Sry, but no change. That's the update at the moment. Thanx again.

jscheuer1
03-04-2013, 08:08 AM
I don't know what you're seeing. I'm seeing just the form and in some browsers the box shadow, some the close button.

If that's not what you're seeing, you're probably either looking at your local installation, or a cached copy, or some other page than:

raihans.co.uk/homepage/contact-us

It's possible you have an outdated browser, or some unusual setting that's making it ignore the print stylesheet, but less likely than one of the above explanations. There might even be some problem unique to your setup that I haven't thought of, again much less likely.

BTW, the box shadow and close button can be gotten rid of by adding this (highlighted) to the contactprint.css stylesheet:


body * {display: none;}
body #sbox-window, body #sbox-window * {position: static; display: inline-block;}
#sbox-window.shadow {
-webkit-box-shadow: 0 0 0 #fff;
-moz-box-shadow: 0 0 0 #fff;
box-shadow: 0 0 0 #fff;
}
body #sbox-btn-close {display: none;}

A thought has occurred to me while playing around with this, the Send button could be removed as well. Let me know. That would require altering the .js file again (or maybe a different .js file, I don't think that script is used by the page with the form on it) and adding another stylesheet for printing, one for the page with the form on it. Sounds a little more complicated than it probably is.

But perhaps we're getting ahead of ourselves. Wasn't that the point? To see only the form? If you have something else in mind, we can probably do that. If so, a screen shot of what that other code you were using when it worked (without the lightbox) produced would probably help. But then again, showing only the form should be sufficient, right?

raihan
03-05-2013, 12:20 AM
Hi,
Beverleyh - thnx for ur comment and yes, u r right. I don't hv any folder like homepage/contact-us. All I have is the /joomla/templates/raihans folder. Inside raihan template there's other folders, like: css,html or library, including the index.php file. I m not sure either, which stylesheet the 'Print' button it's referring to.

All of my browsers (IE9, Mozilla 19.0, Chrome) are fully updated. Well, different browser acting differently. At the moment IE and Mozilla prints 2 pages - 2nd is empty. Chrome prints only 1 page. But all of them prints all the contents in the page, including buttons, site name, site server address or dirtectory path. I tried, IE6 & 8 too. They doesn't shows the errors in lightbox. Even if clicked 'Send' button with empty field, it proceeds to confirmation page. Though, all of these problem happening since I start with lightbox. Just thought to arise those one-after-another.

Anyway, thanks a lot for all of your nice comments and support me.

Raihan

jscheuer1
03-05-2013, 01:40 AM
Well, I'm talking about if you print the page in the browser when the address bar says:

raihans.co.uk/homepage/contact-us

and you have the lightbox open and have filled it out, before it's sent. If I do that, I get something like so:

http://home.comcast.net/~jscheuer1/side/print/Contact%20Us.pdf

If I hit send, then hit the print button, I get:

http://home.comcast.net/~jscheuer1/side/print/Contact%20Us%20Sent.pdf

Now that's in Chrome, and with the additions to the print stylesheet I mentioned in my last post. But the results are similar in other browsers, and without the additions the only difference is that sometimes you get a drop shadow to the form, and/or can see the close button for the lightbox.

Ah, but I just checked in IE 8. Now that's messed up. Hopefully we can tweak it for that. Have you tried in Firefox and Chrome with bad results? Those, IE 9 and 10 are great here.

jscheuer1
03-05-2013, 03:34 PM
Rereading the last two posts, I can see now that we either need a different approach or some further tweaking to contactprint.css file.

We could try bringing in the function from your post. I'm not sure how that could be assigned using the template system of the setup, but it can probably be added in a modified form to the raihans.co.uk/templates/raihans/script.responsive.js file and called from the pages in the iframe from their parent (which is the contact-us page). Once I have code to try on that, I'll let you know.

jscheuer1
03-05-2013, 04:40 PM
OK, let's try this version of the script.responsive.js file (right click and 'Save As'):

4965

Same deal as before, make sure you have a backup, upload this version to the:

raihans.co.uk/templates/raihans/

folder.

Now, as currently setup this will only work for the Print button on the page that you get to after you hit Send. That Print button will print the contents of the form on that page.

But if you put a Print button on the first page, it will work. These print buttons no longer need to have an onclick event. They do have to be input elements with type="button" and value="Print". If you don't want them printed, they should be outside the form. The one you already have is outside the form, so that's good. If you don't want to see the other buttons, we can take care of those. Let's see if this works live. It works here if I append it to the contact-us page.

The browser cache may need to be cleared and/or the page refreshed to see changes.

raihan
03-05-2013, 06:11 PM
Thanks a lot jscheuer1's Avatar. Yes u r right. In chrome it's print's like ur http://home.comcast.net/~jscheuer1/s...0Us%20Sent.pdf. In IE9 or Mozilla 19 you will get nearly similar print-out, accept with a directory path on the top right.
IE8 or lower, it' just messed-up - main problem is, it doesn't shows the errors - say,if you leave the name box empty, the error 'It is required' not be shown when Send button is clicked.

Thank you.

raihan
03-05-2013, 07:20 PM
Grt, 'Print' button is now vanished in my print-out for each of the browser (IE9, Mozilla 19 and Chrome 25), accept IE8 or older.

It pop's-out another window, which I have asked you at beginning jscheuer1's Avatar. But you been saying that, it's not gonna support by many browsers and there was a little technical explanation. You remember? Anyway, that's OK at the moment. Just need to vanish other two buttons and directory path at the top corner, which comes in the print-out.

Then might step for IE8 or older versions. Why IE's just doesn't upgrade by itself and wait for user intraction? As Mozilla and Chrome updated automatically. Many low level users don't know even what is what...

Thank you.

jscheuer1
03-05-2013, 07:42 PM
Users of Windows XP cannot use anything later than IE 8. Other than that, the new trend with IE as with all other browsers is to update more and more aggressively.

As for paths and/or filenames appearing in a printout from the web, that's the browser. Javascript has no real control over that. Even with the popup print where there's no real page, the path is still known. Some browsers will use the name of the top file (contact-us). Many if not most browsers now allow you to configure whether or not paths, filenames, page numbers, dates, etc. appear when printing from the web. But that's the user of the browser who controls that, not javascript.

I'm a little busy at the moment. But I already have a version that gets rid of the two buttons. I'll post it soon. As for warning messages not working in some browser(s). Make sure those worked in those browsers before lightbox.

jscheuer1
03-05-2013, 09:51 PM
OK, here's the latest script.responsive.js file:

4967

Should get rid of those buttons.

raihan
03-05-2013, 11:32 PM
Many, many, many thanks to u, for ur time and all these discussions. As u went thrue each of the steps, I haven't got anyone like this in any discussion forum. I am totally new in web page designing and I got great help from u.

I m not sure, is this forum only about lightbox, or I could discuss anything else as well about the web pages. But u r grt. Thnx a lot, though it's not enough for u.

raihan
03-05-2013, 11:38 PM
As u mentioned, I tried the form with normal web page, instead of lightbox. u r right. The errors doesn't appear for IE8. I know, I took lots of time already from u. If u have any suggestion please let me know. I think, it could be a new topics, as 'Making Web Page browser Independent'.

Thanking you again. Raihan

jscheuer1
03-06-2013, 03:39 AM
That's (the error messages not showing in IE 8) a javascript error in MooTools:

raihans.co.uk/media/system/js/mootools-core.js

in that browser (two errors for IE 8 actually). I've patched the file. Keep a backup of yours just in case. Here's the patched version:

mootools-core.js (http://home.comcast.net/~jscheuer1/side/print/mootools-core.js)

Use it instead.

The browser cache may need to be cleared and/or the page refreshed to see changes.

raihan
03-06-2013, 06:06 PM
Thank u and it's working now properly.

Those files u posted for me: script.responsive.js and mootools-core.js, can I use them for other website too. If I can use, is there any changes I may need to do within those file, please specify. And obviuosly, I will be using Joomla, but could be Magento as well for my web sites. For Blogging could be Wordpress. And for the forums could be phpBB.

Thanks a lot for ur time.

jscheuer1
03-06-2013, 06:40 PM
With mootools-core.js I would say, yes you can use it anywhere. The worst it might do is allow a script that uses it to fail without giving an error message as to why. That script would have failed anyway though.

The script.responsive.js is different. It's tailor made to popup print a page in that iframe that has a form and an input button with the value of "Print" on it when that iframe is launched using SqueezeBox activated via an a tag with a class of modal on a page with contact-us in the URL. So, yeah, you can use it pretty much anywhere you could use the old script.responsive.js file, but it won't do anything unless it encounters that exact sort of page in that exact context/circumstances. This is the code that was added (it's independent of the rest of the script and is just tacked on at the end):


if(location.href.indexOf('contact-us') > -1){
jQuery(function($){
var timer, size, $iframe, $form, $print, index, iframedocref;
function printPage(){
var html, css, csss_file, printWin;
css = "button{display:none;}";
css = "<style type='text/css'>"+css+"</style>";
css_url = '';
if ( css_url !== '' ) {
css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
}
html = '<html><head>'+css+css_url+'</head>'+$form.html()+'</html>';

printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
$('a.modal').click(function(){
timer = setInterval(function(){
size = ($iframe = $('#sbox-window iframe')).size();
if(size === 1){
clearInterval(timer);
index = $('iframe').index($iframe);
$iframe.load(function(){
iframedocref = window.frames[index].document;
$form = $(iframedocref.forms[0]);
$print = $('input[value="Print"]', iframedocref);
if($print.size()){
$print.unbind('click').click(printPage).get(0).onclick = function(){};
}
});
}
}, 20);
});
});
}

It should be pretty easy to follow. When I get more time I will annotate key variables, lines to make it clearer. It could be tweaked to popup print other things.

I put it in that file because it uses jQuery and so does the rest of that file, so it's fairly safe to assume that jQuery will be available to it. And because that file was already in use on the contact-us page.

Here's the annotated version:


if(location.href.indexOf('contact-us') > -1){ //if the page has contact-us in it's address
jQuery(function($){ //once the page has been parsed
var timer, size, $iframe, $form, $print, index, iframedocref;
function printPage(){ //function used to popup print the page, could be made standalone and/or modiied slightly to be used for other popup printing duties
var html, css, css_url, printWin;
css = "button{display:none;}"; //add css to not print or show the button elements in the popup (can be changed to do other stuff, or removed if not needed)
css = "<style type='text/css'>"+css+"</style>";
css_url = ''; //not currently used, can add a print stylesheet url to the popup
if ( css_url !== '' ) {
css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
}
// $form.html() in the below line is the HTML of the first form on the document with
// the "Print" button on it, could be something else, it's what will be printed:
html = '<html><head>'+css+css_url+'</head>'+$form.html()+'</html>';

printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=no, scrollbars=yes, status=yes' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close(); //not executed in Opera for some reason, user can manually close easily enough
}
$('a.modal').click(function(){ //when an a tag with a class of modal is clicked
timer = setInterval(function(){ //check repeatedly for the appearance of an iframe in the
size = ($iframe = $('#sbox-window iframe')).size(); // SqueezeBox div
if(size === 1){ //when found
clearInterval(timer); //stop checking
index = $('iframe').index($iframe); //find out numerically which iframe element on the page it is
$iframe.load(function(){ //assign an onload event to it
iframedocref = window.frames[index].document; //access its document via its numerical reference in the top page's window collection
$form = $(iframedocref.forms[0]); //find the first form on that document, currently used in the printPage function above to determine what to print
$print = $('input[value="Print"]', iframedocref); //find an input button or buttons on it with a value of "Print"
if($print.size()){ //if there are any assign click behavior to it/them (the printPage function) and remove other click behaviors from it/them
$print.unbind('click').click(printPage).get(0).onclick = function(){};
}
});
}
}, 20); //20 millisecond polling for interval once a.modal is clicked, until it launches its iframe
}); // END when an a tag with a class of modal is clicked
}); //END once the page has been parsed
} //END if the page has contact-us in its address

While I annotated I saw that:


var html, css, csss_file, printWin;

should be:


var html, css, css_url, printWin;

Using a text only editor like NotePad, fix that in your live copy.

raihan
03-06-2013, 10:43 PM
Thank you. Yeah, I saw those extended codes inside the script.
Sorry, I may need some more time from you, please, as your reply arises some more questions in my mind:

1. If I wish to use this in any other pages, should I just need to change 'contact-us' with my page name, in the script?

2. If I use say, multi-lightboxes in different situation, in many different pages, for a single web site - is the same script will work for all? Cause, the template is always the same for Joomla website, and script.responsive.js file also using the same for all pages. As example, I have use a template created by myself, named 'raihans' and that's I have to use for all the pages. I mean I cannot use multi-templates for a Joomla build site, as far I know.

3. If no. 1 and/or 2 is yes, then what I will change instead of 'contact-us', as there will be actually many different pages. For example, in my site - I have already use the lightbox for contact-us page. Now, if I also wish to use in 'Our Services' page, what changes I may need?

As you are busy, don't worry please and take your time. I may not need those answers immediately, as long as you don't forget and keep an eye into this forum.

Thanking you.

jscheuer1
03-07-2013, 03:42 AM
Could we have that in plain English please?

raihan
03-07-2013, 11:00 AM
Sorry, I haven't catch you properly. But, I have edited my post. Have a look, please. Thanks.

jscheuer1
03-07-2013, 04:35 PM
Thanks, that's much better.

BTW - the forum is considering and will probably adopt a new policy on that. We prefer when possible that members use English. It cuts down on misunderstandings.

So it would be a good idea to avoid that sort of short hand in your other posts as well.



In answering these questions, make sure you're looking at the annotated version of the code that I added to the end of my post#30 in this thread:

http://www.dynamicdrive.com/forums/showthread.php?73040-Print-not-working-as-desired-in-Lightbox&p=291566#post291566


For #1, yes. But then it will only work for that page, not contact-us.

For #2 and $3, yes. If you are only using a.model for this and only the pages with a.modal on them need this, then get rid of:


if(location.href.indexOf('contact-us') > -1){ //if the page has contact-us in it's address

and get rid of:


} //END if the page has contact-us in its address

Those are the first and last lines. If there are other uses of SqueezeBox (the Lightbox) that use a.modal, use an additional class name to mark the ones that need this and add that here (the added class could be "iframeprint"):


$('a.modal
.iframeprint').click(function(){ //when an a tag with a class of modal and a class of iframeprint is clicked

Then on the page(s) with one or more of these, change:


<a class="modal" href="/component/chronoforms/?chronoform=contact&amp;tmpl=component" rel="{handler: 'iframe', size: {x: 500, y: 600}}"><font color="#CC00FF"> click here</font></font></a>


to:


<a class="modal iframeprint" href="/component/chronoforms/?chronoform=contact&amp;tmpl=component" rel="{handler: 'iframe', size: {x: 500, y: 600}}"><font color="#CC00FF"> click here</font></font></a>

raihan
03-11-2013, 08:35 PM
Thank u. Sorry, a bit late to reply.
I have tried as u suggest me and it's working. Thanks a lot.
Now, if I wish to turn off the lightbox automatically, say after clicking submit button - what I may need to do, please?
Actually, what I am looking is, after submission, the lightbox will automatically close and get back to the page from where I started to lightbox. Please, help!
Thanking you again.

Raihan

jscheuer1
03-12-2013, 03:48 AM
Well, I just tried out the form using bogus data and after I submitted, I got this message:


Thank you Joe Shmo, for your message. A copy of your message also been sent to your email. If you don't have the email in your Inbox, please also check your spam folder.

We will responde to your enquiry as soon as possible.

BTW, 'responde' and 'enquiry' should be 'respond' and 'inquiry'. And 'message also' should be 'message has also'. And there should either be a <br> tag in there somewhere so you don't have to scroll the iframe to see all of the text, or (better yet) the text should be in a div on the thank you page and that div's width should be set to slightly less than the width of the iframe.

Anyways, what you want is relatively simple. The javascript command:


SqueezeBox.close();

will close the lightbox. However, since I take it you want to do that from within the iframe, it would be:


parent.SqueezeBox.close();

Now I'm wondering if you want the box to close when the person submits, before they see the thank you message, or after. I would think after. So you can either have a button on the thank you page:


<input type="button" onclick="parent.SqueezeBox.close();" value="Close">

or you could put this script on the page:


<script type="text/javascript">
setTimeout(function(){parent.SqueezeBox.close();}, 3000);
</script>

Put it as the last thing before the </body> tag on the thank you page and it will give then 3 seconds to read the thing before it closes.

You could do both, and maybe increase the timeout from 3000 to 10000, giving them 10 seconds. If they use the button sooner, that's fine, if not it will close on its own after 10 seconds.

If you don't want them to see the thank you page, you could add the event to the submit of the form on the submit page. But we would have to make sure that there's enough time for the form to actually submit before the box closes. It would probably be easiest to just use the thank you page, with the timeout, but set it to like 500 (half a second). That way the form will have all the time it needs to submit and the thank you page will not be seen, or not be seen for very long.

raihan
03-12-2013, 04:59 AM
Thanks and sorry, yeah, I know, the message I am using just as an example. Not really maintained properly yet.

As you saw, on that time I was working on this. My email responses was not working properly, still not. Email goes to inquirer, but not going a copy to related department. Instead all going to admin email. Anyway, I will try to fix that. Thanks a lot for your reply.

raihan
03-12-2013, 02:34 PM
Hi, thanks for your reply.
I am having another problem,not related to lightbox though. If you can help me, please, I will gratefull to you.
In my contact-us page, I have used a picture to write my contact email, as you may see, 'info@raihans.co.uk'. But if I write that in my article, I get the message instead, like:
This email address is being protected from spambots. You need JavaScript enabled to view it.
What I may can do to avoid this message, please? I haven't change my article for your convenience, so you can realize.
Thanking you.

Raihan

jscheuer1
03-12-2013, 03:36 PM
That's probably a Joomla thing. I have no idea how that works. It's a pretty good idea though, but doesn't seem to be working properly.

If you just want to show the text (probably the best idea, not everyone has an email client), try using the HTML entities:


&#x69;&#x6e;&#x66;&#x6f;&#x40;&#x72;&#x61;&#x69;&#x68;&#x61;&#x6e;&#x73;&#x2e;&#x63;&#x6f;&#x2e;&#x75;&#x6b;

For a link you could try:


<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%69%6e%66%6f%40%72%61%69%68%61%6e%73%2e%63%6f%2e%75%6b"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAAAUCAYAAAC9Kc5pAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAABgRJREFUaIHtWU1ME2sU/YrUlJq0dFoSjUlRazVAomJEjUhIaC1BsYKK/MSFUgMbExeIMXGhbk2UhREJUTYqEqPdGaOLUrTGn7qBCpRWIUg6NbSOUmiHzeS8hXHC1P5Mqw/fM3OSm3Ruv3vm3vOdzkxbGSEERIIEEcj50w1I+P9AMosE0ZDMIkE0fqtZ9Ho9cblcJBwOk0uXLv1Oagn/ASQ0C8dxWZHduHGD3L9/nxQVFRGPx5NR7fr168n169eJ1+slsViMfP36lTidTtLY2JhVL4kQP1e2c/6NEKsF4oPjuJ9yYoJhGCiVyozr6urqEIlE0NXVhZKSEsjlcqhUKhw4cAButxu3bt3Kqp90c2U7598YIrVY9hMKwmAwIBKJ4ODBgyCEoL6+HlNTUwiFQrh27Ro8Hg+cTidaW1sT1q9cuXJZ+/1bI2uzJPoE6vV6DAwMgGEYhMNh2O12rFmzhn8/Pn7UHjp0CB6PByzLYmRkhDfFj7h9+zauXr0KQgiKi4vx4cMHbNq0CY2NjeA4Dn19fdi1axfcbjdfEwqFUFBQAIfDAbvdzudzcnJw+fJlzMzMYG5uDk+ePIFer085l9FohN1ux7dv3xAKhfDw4UN+LrGcqbQhhGD7 9u14+/YtIpEIhoeH0dbWlnJT6urqMDIyApZl4fV6YbPZBO+n01SsEZbml762WCyIxWKwWq3ZmcXn86G1tRUqlQoURaG3t1ewUYnqzGYzgsEgLBYLlEolqqurEQwGYTKZ+DWfPn1CUVERCCHo7+/HiRMnQMj3KwbHcThz5gzkcjkWFhb4mkAggJ6eHuzevRurVq3i8zabDR8/fsS2bdugVCpx5coVPHv2LOVc09PTsNlsUKvV0Gg06O3txaNHjzLiTKfN2NgYzGYzFAoFLBYLOjo6km7svn37QNM0qqqqoFAoUFtbi7m5OVRVVYnW9FfMUlxcDIZhcPz48eyvLIcPHxbktFotwuFwyjqn04mWlhZB rqWlBQ6Hgz9eXFxEbm4uCCGYmprC6tWrQQhBYWEhOI5DZWUl1Go1aJrma6LRKNrb2xMKsPSZKT8/H/Pz8ynnOnr0aNq50nGm02Z2dhY7duxIuplLY2hoCM3NzYJcYWFhRppmaxadTofJyUmcPn06GZc4s2SzbmFhAVqtVpCjKAqRSIQ/DgQC0Ol0/PoVK1aAEIKOjg5wHAetVguLxYLHjx8LzhPPSwiBTCZDc3MzBgYG8OrVK/j9/qSXWrFzZcqZKH/s2DF8+fIF/f39KC8vT2mWRJplqmm2Znn58iW8Xi9kMtmfMUt+fr4gp9PpBLeUO3fu8A+v7969g9lsRmlpKUZHR8FxHNatWweXy4W9e/em7ae7uxsOhwO1tbUwGo0oKCj4ZbNkypksT1EUOjs7EQwG0dnZmXRj5+fnf9IsU02zNcvFixcxPj6OCxcuLL9ZXrx4gYaGBkGuqakJz58/549LSkowPT0Ng8GAiooKzMzMYGJiAmVlZXj69Ck+f/6MU6dOieqHYRhoNBoB96+aJVPOdHmDwQCGYZJu7ODgIJqamgS50tJSUBQlWtN0uhDy/daVaI49e/aAZVmUlZUtr1lqamoQCARgMpmQl5cHs9kMmqZRXV0tWHfkyBHQNI3z589j8+bN/O8sW7ZswdmzZ+F2uyGXy9P28/r1a7S3t0OhUGDnzp1wu91gWRYqlSrruTLljOfYsGEDXC4XysvLkZubi/3798Pj8QjWLeUwmUygaRo1NTVQKBSoqKhAMBjkn2PEaBrP+eDBA9y8eRMajQZqtRptbW3w+XxJTd/V1QWfzyf48vCvm4UQgoaGBoyOjmJxcRHv379HfX19Qq6NGzeiu7sbfr8fsVgM0WgU4+Pj6Onp+enhMFk/RqMRQ0NDiEajGBsbg9VqxeDgICorK7OeK1PORBznzp3D5OQkYrEY3rx5g61btybdWEIIrFYrhoeHwbIsJiYmcPLkyYw0jeekKAp3797F7OwsGIbBvXv3sHbt2qRmycvLg9/vR19fn4BX9sMxEiSkg/SvswTRkMwiQTQks0gQjX8AeaJcZfUSy9oAAAAASUVORK5CYII="></a>

If that works, it will show the image and clicking on it will open the user's email client if they have one.

Or perhaps try the DD email encrypter:

http://www.dynamicdrive.com/emailriddler/index.htm

raihan
03-12-2013, 06:54 PM
Hi jscheuer, Thanks a lot. You are great. I am learning lots from you.
I am not sure, is it the right qus to ask you, but can you also help me about databases, please? I am having some issue with database connectivity, table/column display or retrieving data etc. It could be a new topic as well.

Thanking you again.

raihan
03-12-2013, 09:53 PM
Hi, What changes have you made in mootools-core.js (post # 28) - so my webpage working now as a browser independent webpage, please? Thank you.

jscheuer1
03-12-2013, 09:55 PM
I see you're using the link. That's not the best idea because not everyone has an email client (required for an email link).

But the main reason I'm responding is that I see that the forum converted some of my entities back to the actual characters and that I somehow left out the r in raihans (or the forum ate it) in both of my examples. I took care of all that by editing my above post. You should recopy whichever one you're currently using.

As for database work, ask in the 'PHP' or probably better, the 'MySQL and other databases' forum here. I don't know very much about databases - yet.

jscheuer1
03-12-2013, 10:27 PM
Oh, and while I was typing that, I see you asked about MooTools. I added 2:


try{}catch(e){}

blocks:


append: function(original){
for (var i = 1, l = arguments.length; i < l; i++){
var extended = arguments[i] || {};
for (var key in extended) try{original[key] = extended[key];}catch(e){}//try/catch added for IE8 - jds
}
return original;
}

for:


append: function(original){
for (var i = 1, l = arguments.length; i < l; i++){
var extended = arguments[i] || {};
for (var key in extended) original[key] = extended[key];
}
return original;
}

and:


render: function(element, property, value, unit){
try{element.setStyle(property, this.serve(value, unit));}catch(e){}//add try/catch for IE 8 - jds
},

for:


render: function(element, property, value, unit){
element.setStyle(property, this.serve(value, unit));
},

That's all from the uncompressed version. I then found the corresponding spots in the compressed version and changed them. All try{}catch(e){} does here is allow the browser to keep going if there's an error. Since (at least in this case) other browsers don't throw an error on those, and IE 8 works OK when it skips the errors it gets from those, it all works out fine.

raihan
03-15-2013, 07:15 PM
Thanks a lot for your reply.
I have recently added chat option into my site (raihans.co.uk). I have used a third party chat component, named freichat, which is free to use. But in a corner it shows 'Powered by Codologic' - not seems very professional. I couldn't find any way remove it. Also could not move the 'chat room' tab anywhere else - for which, in some browser doesn't shows my slogan. Can you please, help me on this. Or if you know any other way to have chat options, please guide me.

Thanking you again.
Raihan

jscheuer1
03-15-2013, 09:23 PM
That's what's known as "third party". A program that you add as an interface between you and your users. Many of these types of programs have service marks or copyrights like the 'Powered by' one you mention. Usually these are required as part of the usage terms of a free program. In these forums we are not allowed to help you avoid the usage terms of a third party program. Often it's also illegal to do so. It might not look professional. But free programs are often like that. It's called 'creditware'. Dynamic Drive scripts are like that, except that the credit only needs to be in the source code of the page. Iif you don't want the credit, often you can pay a fee to get the professional version, which usually has additional features, including the removal of the 'Powered by' credit. These additional features are often extensive though, giving you more control over how the program operates.

If nothing like that is available for the chat program you're using, there are other chat programs. But since it's (chat programs) not something I'm very interested in, I'm not aware of the choices out there. Google:

chat programs

and you can probably find a lot of options.

raihan
05-01-2013, 09:57 AM
Hi jscheuer1,
Thanks a lot for your help in those days, came back to you again with a problem.
Please log in to my site: raihans.co.uk with 'dbuser', 'passwd'. Then hover to 'User Log In/Out' and click on 'DB Test'.

I wish to make just as the sample at the top. I have done the query and fetch in the first combo. The I have got the value in a variable as I clicked on a value in first combo, with a script. But I can't have the value in that variable to php again for another query. Can't find, how to do that, please help me. Here is what I did so far:


<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("text1").value = str;
}
</script>

<form name="testForm" id="testForm" method="POST" >

<select name="Combo1" id="Combo1" onchange="run()">
<option value="" selected>Select a country</option>
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_passwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp; <select name="Combo2" id="Combo2">
<option selected>Select a State</option>
<?php
$CName=$_GET['str'];
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']?>"><?php echo $result['State_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="text1" placeholder="get value on option select"><br>

Thanking you again.


Raihan

jscheuer1
05-01-2013, 01:38 PM
You would need to use AJAX. I see you have jQuery on the page, so something like:


<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("text1").value = str;
(function($){
$.ajax({
url: getstates.php,
data: 'country=' + str,
method: 'post',
success: function(result){
$('#combo2').empty().append(result);
}
});
})(jQuery);
}
</script>

Now, I'm not sure what to put on getstates.php, but it would be something like:


<option selected>Select a State</option>
<?php
$CName=isset($_POST['country'])? $_POST['country'] : '';
if(!$CName){die();}
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

raihan
05-02-2013, 06:33 PM
Hi, Thanks a lot for your reply. Sorry, I don't know anything about ajax. But I have tried like below:

<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'country=' + str,
method: 'post',
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery); }
</script>

<form name="testForm" id="testForm" method="POST" >

<select name="Combo1" id="Combo1" onchange="run()">
<option value="" selected>Select a country</option>

<?php $link = mysql_connect("domain_name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>
</form>

Then in my 'http:raihans.co.uk/source/Combo2Conct.php' file I have included:
<option selected>Select a State</option>
<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

It's not working. Is there any chance to go step-by-step, as you did for me before. I am struggling with this for a long time. In the mean time I could also learn the basics of Ajax. Off-course, if you have enough time to allow me, please.

Thanks a lot again.


Raihan

jscheuer1
05-02-2013, 08:17 PM
If you're going to look for:


$_POST['Country_Name']

on raihans.co.uk/source/Combo2Conct.php, then you need to send it from the AJAX call:


function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
method: 'post',
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery);
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

One thing we have to make sure of though is that if you post a Country_Name to raihans.co.uk/source/Combo2Conct.php, does it output the states? I just tried with a simple form:


<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php">
<input type="text" name="Country_Name">
</form>

Using spain as the country and all I got back was the initial option, the one hard coded on the raihans.co.uk/source/Combo2Conct.php page:


<option selected>Select a State</option>

That part is just basic PHP and database work. If the database isn't responding with the states, there's no amount of javascript code that's going to fix that.

raihan
05-03-2013, 09:15 PM
I did like:


<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
method: 'post',
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery); }

</script>

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php">
<select name="Combo1" id="Combo1" onchange="run()">
<option value="" selected>Select a country</option>
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>
</form>

and in my Combo2Conct.php:


<select name="Combo2" id="Combo2">
<option value="" selected>Select a State</option>
<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

It's not working. I think it cannot access the 'Combo2Conct.php' file. Otherwise it should at least suppose to show the 2nd Combo, as at the beginning I have: <select name="Combo2" id="Combo2">. Don't know, why. Please reply me, what may be my fault here.

I did tried with the name 'Spain', in seperate query and it's working. So I think the query portion is alright. Problems I believe somewhere in coding and file accessing. But, can't find.

Thanks a lot again.


Raihan

jscheuer1
05-04-2013, 01:58 AM
Combo2Conct.php is not working. We want it to return the options only, so it should not have:


<select name="Combo2" id="Combo2">

on it. But that's not the big problem. If I post to it from a form like so:


<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php">
<input type="text" name="Country_Name" value="spain"><br>
<input type="submit" value="Go">
</form>

It needs to return something like so:


<option selected="selected">Select Airport</option>
<option value="Alicante">Alicante</option>
<option value="Barcelona">Barcelona</option>
<option value="Malaga">Malaga</option>

Or something like that for the states. It's not doing either of those things. Can you make it so that it does? I can't because I don't do database work. Once it is returning the options, the AJAX part should work.

jscheuer1
05-04-2013, 05:08 AM
I see now that Combo2Conct.php is working for Spain, Bangladesh, Turkey and Greece I think, not for France.

So everything should be working for those countries that are working. Except I also see that you have no Combo2 select on the user-login/db-test page.

You need to add something like the highlighted:


<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php">
<select name="Combo1" id="Combo1" onchange="run()">
<option value="" selected>Select a country</option>
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>
&nbsp;&nbsp;&nbsp;<select name="Combo2" id="Combo2">
<option value="" selected>Select a state</option>
</select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>
</form>

That's where the state options from the AJAX POST request will show up.

raihan
05-04-2013, 10:28 AM
Yes, you are right, I have entry only for Bangladesh, Spain and Turkey. Just as a test.
As you mentioned I have added another Combo. As I click on Country, 2nd Combo get changed, but doesn't show anything. I think, it cannot accessing the 'Combo2Conct.php' file. Could be there any quotation or symbol problem in my code. Full code as:

<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
method: 'post',
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery); }
</script>

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php"></form>

<select name="Combo1" id="Combo1" onchange="run()">

<option value="" selected>Select a country</option>

<?php $link = mysql_connect("raihanscouk1.ipagemysql.com","riyad","Close-6");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("conct",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;<select name="Combo2" id="Combo2">
<option value="" selected>Select a state</option></select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>

and Combo2Conct.php as:

<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
$link = mysql_connect("raihanscouk1.ipagemysql.com","riyad","Close-6");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("conct",$link);
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

Thanking you again.


Raihan

raihan
05-04-2013, 10:30 AM
Yes, you are right, I have entry only for Bangladesh, Spain and Turkey. Just as a test.
As you mentioned I have added another Combo. As I click on Country, 2nd Combo get changed, but doesn't show anything. I think, it cannot accessing the 'Combo2Conct.php' file. Could be there any quotation or symbol problem in my code. Full code as:


<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
method: 'post',
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery); }
</script>

<form method="post" action="http://raihans.co.uk/source/Combo2Conct.php"></form>

<select name="Combo1" id="Combo1" onchange="run()">

<option value="" selected>Select a country</option>

<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT Country_Name FROM Test_Country";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['Country_Name']?>"><?php echo $result['Country_Name']?></option>
<?php
} ?>
</select>

&nbsp;&nbsp;&nbsp;<select name="Combo2" id="Combo2">
<option value="" selected>Select a state</option></select>

&nbsp;&nbsp;&nbsp;TextBox1:&nbsp;&nbsp; <input type="text" id="Text1" placeholder="get value on option select"><br>

and Combo2Conct.php as:


<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

Thanking you again.


Raihan

jscheuer1
05-04-2013, 04:10 PM
I made a typo, it's type not method, so run should be:


<script>
function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
type: 'post',
cache: false,
success: function(result){
$('#Combo2').empty().append(result);
}
});
})(jQuery); }
</script>

I also added a cache: false to prevent caching.

And we still need the default option on Combo2Conct.php:


<option value="" selected>Select a state</option>
<?php
$CName=isset($_POST['Country_Name'])? $_POST['Country_Name'] : '';
if(!$CName){die();}
<?php $link = mysql_connect("Domain_Name","DB_User","DB_User_pwd");
if (!$link) { die('Could not connect to Database: ' . mysql_error());
}
mysql_select_db("DB_Name",$link);
$category = "SELECT State_Name FROM Test_State LEFT JOIN Test_Country USING (CountryID) WHERE Country_Name='$CName'";
$query_result = mysql_query($category);
while($result = mysql_fetch_assoc($query_result)) { ?>
<option value = "<?php echo $result['State_Name']; ?>"><?php echo $result['State_Name']; ?></option>
<?php
}
?>

I tested it and it's working here.

jscheuer1
05-05-2013, 09:29 AM
I see you have it working, a nice addition would be to disable Combo 2:


<select name="Combo2" id="Combo2" disabled>

<option value="" selected>Select a state</option></select>

and then to enable it only when there are choices:


function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
type: 'post',
cache: false,
success: function(result){
var c = $('#Combo2').empty().append(result).get(0);
c.disabled = c.options.length < 2;
}
});
})(jQuery); }

raihan
05-05-2013, 09:47 AM
Hi,
very very very thanks to you. It's working now. I was struggling with that abour 3 months now.
At the end the problem was with ajax. Mainly my ajax code was not working in joomla platform. That's why it was not having access to 'Combo2Conct.php' file. I have to use some 3rd party extension. And it's great now!!!

If you have time, please, explain me - how the ajax code is working in your code. as you mentioned 'function($)', then 'success:' portion. Mainly wish to know, how 'Country_Name' value is going to Combo2Conct.php and then again showing to Combo2.

Thanks a lot again. You are great. I will come back to you again and again.


Raihan

raihan
05-05-2013, 10:18 AM
Hi,
Just realized - if I open my site from Joomla Admin panel, then it's working fine. But if I go in my site without Joomla Admin panel our problem is still there. Any idea, please? Is ajax code depends on user access? Only that could be the reason, coming on my mind. Though I have tried with the access for 'dbuser' to admin access. No success.

Thanking you again.


Raihan

raihan
05-05-2013, 11:48 AM
Hi, Sorry, seems it's working now. Don't know why it's didn't work for sometime. Anyway, it's working now in all of my computer (Win XP, 7, 2008 Server, Ubuntu desktop and Server) with all the browsers (mozilla, chrome, IE8 and 9, Safari and Opera). Thanking you again.

Raihan

jscheuer1
05-05-2013, 02:50 PM
You probably just needed to clear the browser cache on those other views.

The highlighted AJAX code is jQuery:


. . .
(function($){
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
type: 'post',
cache: false,
success: function(result){
var c = $('#Combo2').empty().append(result).get(0);
c.disabled = c.options.length < 2;
}
});
})(jQuery);
. . .

And you have jQuery on the page, but it's in noConflict mode. That's so that $ can be used by another library - MooTools I think. The wrapper (not highlighted) is a self executing function which defines $ locally as jQuery.

Since run is already a function with local scope it could have been done like so:


function run() {
var str = document.getElementById("Combo1").value;
document.getElementById("Text1").value = str;
var $ = jQuery;
$.ajax({
url: 'http://raihans.co.uk/source/Combo2Conct.php',
data: 'Country_Name=' + str,
type: 'post',
cache: false,
success: function(result){
var c = $('#Combo2').empty().append(result).get(0);
c.disabled = c.options.length < 2;
}
});
}

The $.ajax() function is the jQuery way to do AJAX (jQuery has many ways to do AJAX, $.ajax() is the main one, all others are shorthand versions of it for certain more common types of AJAX requests). It takes care of a lot of the details for you, such as determining how to make an AJAX request object cross browser and how to send headers if and when required. The properties passed to the $.ajax() function tell it what it's supposed to do. The url is the page to fetch. The data property is what to send to that page (URL encoded form data if POST, a query string if GET), the type property is the method to use (POST or GET usually). The cache property is (when the type is POST) whether or not to send a header that will cause the server to fetch the page fresh each time. If the type is GET it sends a unique time stamp in the query string. The success property is a function that runs when the request is successful. It has one parameter, which is the response from the request. I used result to represent that, you can use any non-reserved word. In this particular success function I wrote it to empty the Combo2 select and then fill that select with the response from theCombo2Conct.php page. I chose empty() which removes all DOM elements and append() which inserts things as DOM elements because when you later submit a form that has been altered by javascript bad things can happen if you have used innerHTML to alter it. Chaining the jQuery $(#Combo2) Object, I use the .get(0) method on it to get it as a DOM element to then set its disabled property based upon the length of its options property.

You can look up the jQuery.ajax() function here:

http://api.jquery.com/jQuery.ajax/

And you can check on the jQuery empty(), append(), and get() (there are two gets in jQuery, one is shorthand for a certain type of $.ajax(), I used the other here, it gets a DOM element from a jQuery Object) methods used in the success function there as well by using the search box near the top of that page.

If you have any other questions, just ask.

raihan
05-06-2013, 08:11 AM
Hi, Thanks a lot for your reply.
You have added a new line :

c.disabled = c.options.length < 2;

What is this line doing here, please? Can't understand. Thanking you again.

Also, I am having a positioning and button problem in user Log IN. When a user Loged IN, I am still having 'User LogIn' button, along with Log Out Button. Instead I want just to show Log Out button with user name, when a user Loged In. And, When a user gives wrong password - I wish to show some message, but it's not doing anything now. If you have time, would you please have a check. Thanks again.

Raihan

jscheuer1
05-06-2013, 01:49 PM
In:


c.disabled = c.options.length < 2;

c represents the Combo2 select. After the request is successful, and the new options are imported, if there are less than 2, Combo2 is disabled.

There will always be one option (Select a state). So, as long as the database had at least one state to return, it will be enabled. If the user selects 'Select a country' from Combo1 though, Combo2 will have only 'Select a state', so will be disabled. You can also disable it by default on the page by adding the disabled attribute to it:


<select name="Combo2" id="Combo2" disabled>
<option value="" selected>Select a state</option>
</select>


That way, until the user selects a country with a state or states in the database, they will not be able to use the Select a state Combo2 select.

I was also thinking that it might be nice to have a small animated .gif loading image that appears on or near the Combo2 select while the request is being made and disappears on success. And/or to disable Combo2 while the request is loading.

As for having the login button not show when logged in and a password warning shown on a bad password, those are both PHP issues. You need to detect a successful login and not show the login button in that case. And you need to detect an incorrect password and show some sort of warning in that case. Most sites say: "User name and Password do not match", partly because if one is wrong, it's hard to know which is wrong, and mostly because it would be giving a would be hacker too much information to tell them which is wrong, even if you could figure it out.

Other than giving you an example of basic PHP code used for those things, no one can help with either without seeing the PHP code of the login that you are using. But my PHP isn't all that good. And we are getting further and further off of the original topic of printing. You should open a new thread on those topics in the PHP forum. But you should also first Google:

PHP login

to see if there are any templates available to help you.

raihan
05-12-2013, 07:46 PM
Hi,
Sorry to reply a bit late. You are right, my topics are having mix and match. But if I do use new topics, I haven't got much reply as you do. You are really very helpful. I am grateful to you.

I am trying to open .pdf and .mp4 in the same lightbox, which will show both side-by-side. Please, again have a check my site: raihans.co.uk and login with dbuser and passwd, then hover to 'Home' and click on 'Test page'.

I have left two link, one is 'Show PDF', I have used the code as:

<a class="modal" href=\"docs/KaloNaksha.pdf" rel="{handler: 'iframe', size: {x: 760, y: 440}}">link to a lightbox popup </a>

but after saving the code, it wutomatically converting to:

<a class="modal" href="\" rel="{handler: 'iframe', size: {x: 760, y: 440}}">link to a lightbox popup </a>

Don't know, why? Also it's not showing the PDF file, but an error. Also i know how to show .MP4 file in html as:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">

But, not sure how to write in <a> ..... </a>. Cause I wish to see, Video and PDF side-by-side.

The next link is, 'To see Video and Document Click here', where I have used external plug-in for Joomla. The video player is working, but not showing the PDF, only the full-path.

Could you please help me, on your free time. I will be very grateful to you.

Thanks a lot again for all correspondences.


Raihan

raihan
05-12-2013, 08:16 PM
sorry, it's working now. It's all about google code though. I have used google document viewer in my code as:

<iframe height="420" src="http://docs.google.com/viewer?url=http%3A%2F%2Fraihans.co.uk%2Fdocs%2FKaloNaksha.pdf&amp;embedded=true" style="border: none;" width="520"></iframe>

But, the problem with document viewer is: it's allowing the anyone to download or print the pdf file in full screen view. I am looking like, users shouldn't copy, download or print the PDF or video files. How I can do that, please or any other way to protect my PDF and video files. Thanking you.

Raihan

jscheuer1
05-12-2013, 10:18 PM
If a user can see a video or PDF on their screen, they can copy or download it. After all, it's in their cache.

There are certainly ways to make it harder. You can obfuscate things. You can stream the video, but ultimately they can still get it. If you really don't want people getting that stuff, don't put it up on the web.

However, just by being on the web, if the stuff is your own, it's automatically copyrighted. If someone then takes it and uses it in a way that materially harms you, via a loss in sales or damage to your reputation, you can sue them. Even without that, if they're showing it on the web, you can usually just ask them nicely while also mentioning that you could sue them and they will take it down. If they don't, you can inform their ISP, and their ISP will often be more than happy to take it down and/or revoke their web space.

raihan
05-12-2013, 11:25 PM
Hi, Thanks a lot for your reply.

I know what you saying. But, from my last course in my school, there was a video player named something like network player, which needs Java to install. In that network player my lectures been played. I tried to download, but failed. To run the lectures, I must need to install Java. It may downloaded somwhere, but I couldn't save it anywhere. So as for the books. I couldn't save the books. To see the books, also I needed Java to install. I couldn't save the books as well. So as long as my course, I could watch them or read them. Then, no access. In that way, I came to know theres must be some way, so I could protect my contents. But, can't find the way, how. Any idea comes to you, please let me know.

Thanking you again.


Raihan

raihan
05-16-2013, 11:13 AM
Hi, come back to you again. Hope you doing well.
I have made a form in my site: raihans.co.uk, Login with 'dbuser', 'passwd' please. Then hover 'Home' and click on 'Test page'.

I have got this in one of your post. This form I have got is very simple. But the validation is not working. The code I have used in my article as:
*************

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<link href="formwizard.css" rel="stylesheet" type="text/css" />
<script src="formwizard.js" type="text/javascript"></script></p>
<script type="text/javascript">
var myform1=new formtowizard({
formid:'form1',
persistsection:false,
validate:['firstname', 'country', 'postcode'],
revealfx:['fade', 500],
})</script>
<form name="form1">
<fieldset class="sectionwrap">
<legend>Basic Information</legend> First Name:<br />
<input id="firstname" size="35" style="width:350px" type="text" /><br />
Last Name:<br />
<input id="lastname" size="80" style="width:350px" type="text" /><br />
Age:<br />
<input id="age" size="3" type="text" /><br />
Sex: <input name="sex" type="radio" value="male" /> Male <input name="sex" type="radio" value="female" /> Female</fieldset>
<fieldset class="sectionwrap">
<legend>Shipping Address</legend> Country:<br />
<input id="country" size="35" type="text" /><br />
State/Province:<br />
<input id="state" size="35" type="text" /><br />
Full Address:<br />
<input id="full_address" size="80" style="width:350px" type="text" /><br />
Postcode:<br />
<input id="postcode" size="8" type="text" /></fieldset>
<fieldset class="sectionwrap">
<legend>Comments</legend> Any additional instructions:<br />
<textarea id="feedback" style="width:350px;height:150px"></textarea><br />
<input type="submit" /></fieldset>
</form>
****************
I believe the validation function in formwizard.js file is not working properly. The 'validate' function written as:
****************

validate:function(section){
var elements=this.sections.$sections.eq(section).data('elements') //reference elements within this section that should be validated
var validated=true, invalidtext=["Please fill out the following fields:\n"]
function invalidate(el){
validated=false
invalidtext.push("- "+ (el.id || el.name))
}
for (var i=0; i<elements.length; i++){
if (/(text)/.test(elements[i].type) && elements[i].value==""){ //text and textarea elements
invalidate(elements[i])
}
else if (/(select)/.test(elements[i].type) && (elements[i].selectedIndex==-1 || elements[i].options[elements[i].selectedIndex].text=="")){ //select elements
invalidate(elements[i])
}
else if (elements[i].type==undefined && elements[i].length>0){ //radio and checkbox elements
var onechecked=false
for (var r=0; r<elements[i].length; r++){
if (elements[i][r].checked==true){
onechecked=true
break
}
}
if (!onechecked){
invalidate(elements[i][0])
}
}
}
if (!validated)
alert(invalidtext.join('\n'))
return validated
},
********************
Also I want that in a lightbox. The code for lightbox I know, like:
********************

<a class="modal" href="some_link" rel="{handler: 'iframe', size: {x: 760, y: 440}}">Show in a lightbox</a>
********************
but can't understand what to code for showing the form within 'href'.

Would you please have a look on your free time. Thanking you lots.

Raihan
UK

jscheuer1
05-16-2013, 01:31 PM
In order to put the form in a lightbox, assuming it's the type of lightbox script that can do that (I seem to remember that it is), the form has to be on a separate page. If so, you just put the URL of that page as the href in the lightbox link, same as you would if it were an ordinary link and you wanted it to go to the form page.

Once you have that setup and working (form is on a separate page and showing in the lightbox), if there's still a problem with the validation script, that can be diagnosed in the normal manner on that separate page (the one with the form on it). If there is such a problem and you still want help with it, I would need a link to the top page.

raihan
05-16-2013, 06:53 PM
Hi, Thanks a lot for your reply. I have tried as you suggest. You may have a look please.
It's coming with the full page, instead I need to show only the form. Also I have used exactly same code to show the form. But, it's showing error 'Categories not found' and not showing the form. What I may could do now, please? Thanking you again.

jscheuer1
05-16-2013, 09:30 PM
I have no idea what I'm looking for. I see no link on that page like the one from your post.

raihan
05-18-2013, 01:50 PM
Thanking you.

The link in my 'Test Page' is written as:
Show Test Form in a lightbox popup

And the link page to that is:
http://www.raihans.co.uk/homepage/test-form

The page not showing any error now, but not showing the form either.

Thanking you again for your time to have a look.


Raihan

jscheuer1
05-18-2013, 05:15 PM
As far as I can tell, there's only one form on the raihans.co.uk/homepage/test-form page:


<form action="/" method="post" id="login-form" class="form-vertical">
<div class="login-greeting">
Hi DBUser, </div>
<div class="logout-button">
<input type="submit" name="Submit" class="btn btn-primary" value="Log out" />
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.logout" />
<input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD00MzU=" />
<input type="hidden" name="4ee9db694223a015f5136b1ea350cea7" value="1" /> </div>
</form>

It has only one visible element, the Log Out (submit button). And I see it in Firefox, Opera, IE 9 mode, IE 10, and Chrome in the lightbox. The lightbox doesn't open IE 8 mode:


SCRIPT5007: Unable to get property 'clientWidth' of undefined or null reference
hipmob.min.js, line 4 character 11329


But it might in a real IE 8, I don't know.

As for formwizzard, it doesn't appear to be on that page (test-form), but is on raihans.co.uk/homepage/test-page where it gives an error:


SCRIPT5007: Unable to get property 'push' of undefined or null reference
formwizard.js, line 82 character 6



Timestamp: 5/18/2013 12:56:45 PM
Error: TypeError: $section.data(...) is undefined
Source File: http://www.raihans.co.uk/formwizard.js
Line: 82

All browsers throw that error.

What are you trying to do, use formwizzard on the form in the lightbox iframe? If so, it's not there yet. The formwizzard script would need to go on the test-form page and be setup for the form on that page. Or it could perhaps be run from test-page against the form in the iframe after it appears. But I'm not sure if there's an easy way to tell when that is. It would be easiest to put the formwizzard script on the test-form page - that is if you want to use it on the form on the test-form page.

In any case, there would seem to be two main issues:


Why doesn't the lightbox open in IE 8 mode?


Why are we getting that error from formwizzard?


And one question for you:

What are you trying to do with formwizzard?

Answer me that last one, and when I have more time I will look into it, unless those other two are not the real questions. If they're not, what are?