php - html code when updated by jquery has some issues -
well, developing web page view images in grid image gallery. images categorized, , there's left pane select category view. also, 1 of links in left pane "my categories" views categories folder images in grid. have jquery script change images in gallery when 1 of categories clicked, when "my categories" clicked changes images images of folders categories have. till works fine. problem when have "my categories" selected , gallery containing images of folders categories have, want use same jquery script when click 1 of "images of folders" refer 1 of categories, images in category viewed, it's not working!
code adding categories left pane:
<ul class="nav nav-sidebar"> <li class="active"><a href="#"><b>your folders</b><span class="sr-only">(current)</span></a></li> <?php $db = mysql_connect("localhost", "root",""); $er = mysql_select_db("images", $db); $sql="select * folder"; $result=mysql_query($sql); while($row=mysql_fetch_array($result)) { echo "<li><a class='folder' value='$row[folder_id]' title='$row[folder_name]' href='#'>   $row[folder_name]</a></li>"; } ?> </ul> html adds images in gallery:
<div class="row" id="txthint"> </div> jquery script detect when "my categories" selected:
$(".folders").click(function() { if (window.xmlhttprequest) { // code ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttprequest(); } else { // code ie6, ie5 xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { document.getelementbyid("txthint").innerhtml = xmlhttp.responsetext; alert(xmlhttp.responsetext); } } xmlhttp.open("get","getfolders.php?",true); xmlhttp.send(); }); php code accessed jquery:
<?php $db = mysql_connect("localhost", "root",""); $er = mysql_select_db("images", $db); $sql="select * folder"; $result=mysql_query($sql); while($row=mysql_fetch_array($result)) { echo "<div class='col-lg-3 col-sm-4 col-xs-6'><a title='$row[folder_name]' class='folder' value='$row[folder_id]' href='#'><img class='thumbnail img-responsive' src='folder.png'></a></div>"; } ?>
jquery detects when 1 of categories selected:
$(document).ready(function() { $(".folder").click(function() { var $value = $(this).attr("value"); document.getelementbyid("title").innerhtml = $(this).attr("title"); if ($value == "") { document.getelementbyid("txthint").innerhtml = ""; return; } else { if (window.xmlhttprequest) { // code ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttprequest(); } else { // code ie6, ie5 xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { document.getelementbyid("txthint").innerhtml = xmlhttp.responsetext; } } xmlhttp.open("get","getimages.php?q="+$value,true); xmlhttp.send(); } }); php accessed jquery
<?php $q = intval($_get["q"]); $db = mysql_connect("localhost", "root",""); $er = mysql_select_db("images", $db); $sql="select image_url, image_name image folder_id=$q"; $result=mysql_query($sql); while($row=mysql_fetch_array($result)) { echo "<div class='col-lg-3 col-sm-4 col-xs-6'><a title='$row[image_name]' href='#'><img class='thumbnail img-responsive' src='$row[image_url]'"; }
Comments
Post a Comment