I want to refresh the container on click event. For this task i create a function and call it in button attribute. But when i click on it then it giving me this error ReferenceError: load is not defined

Button

<input type="button" value="Choose Container" data-toggle="modal" data-target="#myModal" class="sidebar-button" onclick="loadDiv();"/>

Targeted Container

        <div class="modal-content custom-popup-personalize">
        <div class="modal-header">
            <h4 class="modal-title">Container Slides</h4>
        </div>
        <div class="modal-body custom-personalize">
        <div id="slider" class="flexslider ">
        <ul class="slides loadOne">
        <?php      if(is_array($cookiProductsArray)){
        if($cookiProductsArray){
        foreach($cookiProductsArray as $cProduct){

        ?>
        <li>
        <img src="<?php echo $cProduct['popImage']; ?>"  />
        <div class="pop-prodcut-details">
        <h3><?php echo ucwords($cProduct['name']); ?></h3>
        <p><?php echo $cProduct['description']; ?></p>


        </div>
        </li>

        <?php }
        }else{?>
        <span class="empty-container">Container is Empty!</span>
        <?php }

        }?>

        </ul>
        </div>

        </div>

        </div>

Function

function loadDiv(){
    load(window.location + " .custom-popup-personalize");
}

Can any one please guide me where i'm wrong that i can resolve this issue.

I want to refresh the container on click event. For this task i create a function and call it in button attribute. But when i click on it then it giving me this error ReferenceError: load is not defined

Button

<input type="button" value="Choose Container" data-toggle="modal" data-target="#myModal" class="sidebar-button" onclick="loadDiv();"/>

Targeted Container

        <div class="modal-content custom-popup-personalize">
        <div class="modal-header">
            <h4 class="modal-title">Container Slides</h4>
        </div>
        <div class="modal-body custom-personalize">
        <div id="slider" class="flexslider ">
        <ul class="slides loadOne">
        <?php      if(is_array($cookiProductsArray)){
        if($cookiProductsArray){
        foreach($cookiProductsArray as $cProduct){

        ?>
        <li>
        <img src="<?php echo $cProduct['popImage']; ?>"  />
        <div class="pop-prodcut-details">
        <h3><?php echo ucwords($cProduct['name']); ?></h3>
        <p><?php echo $cProduct['description']; ?></p>


        </div>
        </li>

        <?php }
        }else{?>
        <span class="empty-container">Container is Empty!</span>
        <?php }

        }?>

        </ul>
        </div>

        </div>

        </div>

Function

function loadDiv(){
    load(window.location + " .custom-popup-personalize");
}

Can any one please guide me where i'm wrong that i can resolve this issue.

• javascript
• jquery

• @Mohamed-Yousef do you means this $(".custom-popup-personalize").load(); – adnan khalid Commented Dec 28, 2015 at 6:41
• I meant any element you want to load the data in it .. read a docs here api.jquery./load – Mohamed-Yousef Commented Dec 28, 2015 at 6:42

1 Answer 1

Because the load() function is not defined in your script. If it is a custom function, you need to define it. If you are trying to use the jquery load() function, then you need to specify the container div for loading content in to it. Something like this:

$('#divId').load(url)