Storing HTML code to use with AJAX

Question

Right here we go I might have this completely wrong.

I'm working in Wordpress.

On a page I'm creating a html select menu (Main menu) with options that relate to each page in the site. This menu is displayed on the page.

I'm also creating select menus with options for each page (Page Menus), these menu's aren't displayed but stored in a php variable.

The options in the Main Menu relate to these php variable which are the Page Menus

Now when an option is selected in Main menu I would like to load the related Page Menu but I don't want to relaod the page.

Can I store the HTML code for the Page Menus then load them with AJAX when the related option is selected in the Main Menu.

Hope this makes sense and someone can help.

PabloWeb18 · Accepted Answer · 2013-09-11 13:30:52Z

1

Follow this example:

<section>
</section>
<div>
    <ul>
        <li data-url="ExternalPage1.php">
            Option 1
        </li>
        <li data-url="ExternalPage2.php">
            Option 2
        </li>
    </ul>
</div>

Using

jQuery

Use this javascript:

$('li').bind('click', function() {
    $('section').load( $(this).data('url') );
});

Hope this help.

Pablo.

answered Sep 11, 2013 at 13:30

PabloWeb18

4113 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bitluni · Accepted Answer · 2013-09-11 11:28:41Z

1

if you are using jQuery: the best way to do this is

$("#menuContainer").load("mymenu01.php")

see http://api.jquery.com/load/

answered Sep 11, 2013 at 11:28

bitluni

2191 silver badge7 bronze badges

Collectives™ on Stack Overflow

Storing HTML code to use with AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related