how to access php generated navigation

Question

I build a navigation from a databse, where I ask for projects of different categories. So basically I have two parts of my navigation:

The first part is the naviation of the categories (culture, webdesign, etc.). If I click this, I ask my database for projects with this category and create new links with PHP:

$query="SELECT * FROM projects WHERE category=\"$category\""; $result=mysql_query($query); $num=mysql_numrows($result); mysql_close(); $i=0; while ($i < $num) { $title=mysql_result($result,$i,"title"); $id=mysql_result($result,$i,"id"); echo "<div class=\"sublink\" data-id=\"$id\" ><a href=\"#\">$title<br />"; $i++; }

but it seems I can't call these links from my main page with jQuery, like I did with the categories:

<div class="link" data-subsite="design"><a href="#"> design *</a></div> $(document).ready(function(){ $('.link').click(function(){ var subsite = $(this).data('subsite'); $('#naviLeftContent').load('php/getNavi.php?category='+subsite); }); });

Now I wanted to do more or less the same with my sub-navigation to load the specific text/title/info into the right divs. But the new generated divs from my sub-navigation don't seem to be in my source code, so the JavaScript doesn't recognize them.

Aletheios · Accepted Answer · 2012-07-30 18:35:14Z

You seem to be searching for jQuery.on() (resp. jQuery.live(), which is deprecated as of version 1.7):

Attach an event handler for all elements which match the current selector, now and in the future.

EDIT: Example:

HTML:

<div id="menu"> <div id="category1"> <a href="#">link 1</a> <a href="#">link 2</a> </div> <div id="category2"></div> </div>

JS:

$(document).ready(function(){ // Attach click handler $(document).on("click", "#menu a", function(){ alert("click!"); }); // Now load menu content, click handler will also work for this $("#category2").load("content.php"); });

EDIT 2: Solution found in chat:

$('.link').click(function(){ var subsite = $(this).data('subsite'); $('#naviLeftContent').load('php/getNavi.php?category='+subsite); }); $(document).on("click", ".sublink", function(){ var subsite = $(this).data('subsite'); $('#textContent').load('php/subsite.php?page='+subsite); });

Don't know if I understand you correctly, but are you loading the content of your navigation via AJAX? Isn't this far too complicated? Normally, you let PHP generate the entire navigation and hide unwanted parts with CSS. This has a lot of advantages: Less server load, better user experience, ...

Besides, iterating over MySQL results in PHP is a lot more readable when done like this:

$result = mysql_query($query); while ($row = mysql_fetch_object($result)) { echo $row->title; }

The problem is, that i generate my divs for the subnavigation via php and it seems that Ajax doesn't know these new generated links. I can't do it with your example, because I don't know how many links there will be, also these links will have to call another .php to load text/title etc. into specific divs. If I look into the source code, I can't find my new generated divs there.. But the links are actually on the site and firebug gives the correct infomation
No, on("click",... is not quite the same as click: stackoverflow.com/questions/8018760/… However my example above isn't that good (sorry, I hate the new on/off^^). live would be easier to understand though... And I can't give you an example on how to implement the click handler so it calls several PHP files, you will have to figure this out alone...
Oh I forgot: You can't see the generated div elements in the source code because Firefox shows the source code as it was downloaded from the server, i.e. without changes done by JS.
Okay that's one thing, but the other thing is that my onClick listener isn't working for the new generated divs. And I really don't know why

Collectives™ on Stack Overflow

how to access php generated navigation

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related