jQuery load() function not working

[sunny124]

Hi guys,

I am trying to get contents of a page into a popup div when user clicks on the View sample plan link in the table with the id='plans' below.

I will change the contents of junk.php once I can get it working.

Thanks to everyone who can help me out.

Sunny124

<script type='text/javascrit'>
            $('.sample_plan').click(function(){
                var current_plan_id = 0;
                    while(current_plan_id < ('.sample_plan').length){
                        if($(this).hasClass(current_plan_id)){
                            alert('clicked       view sample plan '+ current_plan_id); // works
                            $("#planpopup").load('junk.php', function(response, status, xhr){
                                  if (status == "error") {
                                    var msg = "Sorry but there was an error: ";
                                   alert(msg);
                                  }
                            });
                            $("#planpopup").fadeIn(1000);
                            $('#plan_popup_background').css({'display':'block', 'height': $(window).height(), 'opacity': 0.3});//display transparent background
                            break;
                        }
                        current_plan_id++;
                    }

            });
            $(".close_popup_link").click(function(){//close popup when close link on popup is clicked
                 $("#planpopup").css({'display':'none'});
                 $('#plan_popup_background').css({'display':'none'});
            });
</script>


     <div id="planpopup">
        <div class="close_popup"><a href="#" class="close_popup_link">close X</a></div>
     </div>
    <div id="plan_popup_background"></div>

<table id="plans">
    <tr>
        <th colspan="4">
            Choose your plan<span class='required_'>*</span>
        </th>
    </tr>
    <tr class="first">
        <td>
            <label name="Listing_Package">Listing Package</label>
        </td>
         <td>
            <label name="Description">Description</label>
        </td>
         <td class="price">
            <label name="Price">Yearly Cost ($)</label>
        </td>
        <td>

        </td>
    </tr>
    <?  foreach($plans as $plan){
    ?>
    <tr class="<?="row$plan->id";?>">
<?
            //$file = getcwd().'/application/views/ozshaadi/view_demo_plan'.$plan->id.'.php';
            // if(file_exists($file)){
?>
        <td class="left_colum">
            <label name="plan_name"><?=$plan->name;?></label>
            <br/>
            <a href="#" class="sample_plan <?=$plan->id;?>">View sample plan</a>
        </td>
        <td>
            <label name="plan_descrip"><?=$plan->description;?></label>
        </td>
        <td>
            <label name="plan_price"><?=$plan->yearly_cost;?>.00</label>
        </td>
        <td>
            <input type="radio" name="listing_plan_id" class="radiobx" <?=set_radio('listing_plan_id',$plan->id);?> id="plan<?=$plan->id;?>" value="<?=$plan->id?>"/>
        </td>
    </tr>
    <?  }
    ?>
    <tr class="radio_btn_error"></tr>
</table>

junk.php

<p>some text</p>

[Airshow]

Sunny,

It's hard to see what this loop is supposed to do:

while(current_plan_id < ('.sample_plan').length){

It may be at least part of your problem.

Airshow

[sunny124]

Hello Airshow,

Thanks for replying.

The loop is meant to figure out which 'view sample plan' link was clicked
Each of the view sample plan' link has 2 classes. One being 'sample_plan', the other class being the $plan->id
It then will load a different page depending on $plan->id.

I originally had

$("#planpopup").load('view_demo_plan'+current_plan_id+'.php');

but changed it to

$("#planpopup").load('junk.php');

just to get load() function working.

I should have posted this in the opening post but can we also pass parameters such as serialized php objects in the page to be loaded?

Mainly because I can then display different content depending on which link was clicked.

If there is a much more better way of accomplishing what I am trying, please tell me.

Thanks

Sunny124

[twiss]

To pass data to the page, pass it as the second parameter:

$("#planpopup").load('view_demo_plan.php', {current_plan_id:current_plan_id});

In php, you can then access $_POST.

[Airshow]

Sunny,

OK, I understand. The good news is that you're not a million miles away and the code will actually simplify slightly to achieve what you want.

Jquery will automatically know which link was clicked ( this inside the click handler) but you have to give it some help in discovering the correct plan id. There are many ways to achieve that. In the code below it is obtained from the id of the containing tr.

...
<? foreach($plans as $plan){ ?>
<tr id="<? =$plan->id; ?>">
...

$(document).ready() {//or whatever wrapper you were using originally
    $('.sample_plan').click(function() {
      var current_plan_id = $(this).closest('tr').attr('id');//.closest() is great for this sort of thing.
      alert('clicked view sample plan: '+ current_plan_id);
      $("#planpopup").html('Loading ...').load('view_demo_plan.php', {current_plan_id:current_plan_id}, function(response, status, xhr) {
        if (status == "error") {
          $(this).html("Sorry but there was an error.");//I think this is correct
        }
      });
      $("#planpopup").fadeIn(1000);
      $('#plan_popup_background').show().css({'height': $(window).height(), 'opacity': 0.3});//display transparent background
    });
    $(".close_popup_link").click(function(){//close popup when close link on popup is clicked
      $("#planpopup, #plan_popup_background").hide();
    });
};

As you will see:

• Twiss's method is used to pass data to the server-side script.
• A "Loading" message will be displayed.
• The "Sorry ... error" message will appear in the popup rather than using an alert.
• .show() / .hide() are used rather than their CSS equivalents.

So, apart from a few details, it still very close to your original script.

I haven't tested so there may be the odd glitch to fix.

Airshow

[sunny124]

It's working now.

Thanks guys for helping me out.

Bye

Sunny124