Jquery Beginner

Hi,

I'm an experienced PHP coder trying to get my teeth into Javascript and JQuery!

So for I have picked up something which I think is called "modal"?, it was a sample piece of code that provided a link which when clicked created a nice popup, prompted user for input and then returned a value to my php.

All fine and dandy works nicely.

However I want the popup to appear if a php variable is not set. So for example:

<?
if(!$_POST[affid]){
?>
SOME JAVASCRIPT
<?
}
?>

Code (markup):

I read somewhere that I should be able to achieve this with the following:


<script type="text/javascript">
$(document).ready(function(){
your_function();
});
</script>

The function I wish to call is in an external file (eg. myjquery.js) which begins:

$(function() {

    $('a.modal').click(function(){

....

Code (markup):

Obviously this was set up to be called when the link was clicked. My question is how do
I execute the fuction within my php if statement without listening for the click event?

Is this possible?

Thanks,

Johhny.

 

It's very possible, and to be honest if you're an experienced PHP coder the solution should be quite obvious (on that note, you shouldn't really be using PHP short tags any more).

A simple method would be to set a javascript variable's value based on the PHP value. i.e., in one of your PHP files:

<script type="text/javascript">var affid = <?php echo isset($_POST['affid']) ? true : false ?>;</script>

PHP:

Than in your Javascript file:

if (affid) {
  $(element).click(function() {
    // Perform your modal operation here
  });
}

HTML:

 

Thanks Alex,

I'm starting to se how this works, but can't figure out how the javascript is being triggered.

In your example we set a javascript variable depending on the value of a php variable - I get that. But how is that triggering the javascript (modal)?

Thanks,

Johnny.

 

You'd need to load a global JS file on to the page, and in that file check the variable you set with PHP.

i.e. in the head section of your page:

<script type="text/javascript" src="/path/to/your/js/file.js"></script>

HTML:

Then within that file, check for the variable:

(function($) {
  $(document).ready(function() {
    if (affid) {
     $(element).click(function() {
       // Perform your modal operation here
     });
   }
  }
}(jQuery));

HTML:

 

Thanks for the reply Alex.

I've been playing around with this for a few hours but I've hit a brick wall.

Here is my code so far:

var affid = <?php echo isset($_POST['affid']) ? 1 : 0 ?>;

Code (markup):

Since the variable is not set 'affid' is given the value 0.

Then.....

if (affid==0){

        window.alert("Test");

        $('html, body').animate({scrollTop:0}, 'fast');

        // before showing the modal window, reset the form incase of previous use.
        $('.success, .error').hide();
        $('form#contactForm').show();
        
        // Reset all the default values in the form fields
        $('#affid').val('Input your ID');

        //show the mask and contact divs
        $('#mask').show().fadeTo('', 0.7);
        $('div#contact').fadeIn();

}

Code (markup):

I put the alert in to test the if statement and that appears. The popup and prompt however does not appear so something is wrong.

I have taken the code from an external js file which was triggered when a link was clicked:

$(function() {

    // load the modal window
    $('a.modal').click(function(){

        // scroll to top
        $('html, body').animate({scrollTop:0}, 'fast');

        // before showing the modal window, reset the form incase of previous use.
        $('.success, .error').hide();
        $('form#contactForm').show();
        
        // Reset all the default values in the form fields
        $('#affid').val('Input your affiliate ID');

        //show the mask and contact divs
        $('#mask').show().fadeTo('', 0.7);
        $('div#contact').fadeIn();

        // stop the modal link from doing its default action
        return false;
    });

Code (markup):

As you can see I have removed the first couple of lines which are listening for the mouse click I believe. The above code works when the link is clicked (popup and prompt for input appears)

Can you see any reason why the popup will not appear in my case though?

Thanks,

Johnny.

 

Hope below example will help you:

your javascript code:

[SIZE=2][FONT=century gothic]function myfunction(abc){
  if(abc){
     //perform your stuff
  }
}[/FONT][/SIZE]

Code (markup):

Your javascript code in php:

[SIZE=2][FONT=century gothic]var affid = <?php echo isset($_POST['affid']) ? true : false ?>;
myfunction(affid);[/FONT][/SIZE]

Code (markup):

 

you should use long php tags instead of the short form ( <? ?> ) to avoid conflicts in the future. If you get used to it, the debugger will not inform you if short tags are disabled, it will simply skip that part of code or possibly giving error if leaving a block open because either { or } is inside the short tag part. So you'd better get used to it.