I'm trying to hide the combobox on page load. The combobox has not getting hide. I can't find any error on webbrowser's inspect element. I've checked the select tag syntax and javascript all are seems fine. But its not getting hide?
PHP CODE:
<?php
$list=mysqli_query($conn,"select * from emp");
echo "<select id='dropbx'>";
echo "<option value=''>emp Code</option>";
while($row = mysqli_fetch_array($list))
{
echo "<option value='" . $row['emp_code'] . "'>" . $row['emp_code'] . "</option>"; //Why Two column mentioned??
}
echo "</select>";
?>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('dropbx').visibility = "hidden";
//alert('hello');
};
</script>
You have to use the code like this. visibility is the property of the style attribute of the element. You can read more here: https://www.w3schools.com/jsref/prop_style_visibility.asp
document.getElementById("dropbx").style.visibility = "hidden";
you can hide dropdown by using hide() like this :
$("#dropbx").hide();
or you can use display property like this :
document.getElementById("dropbx").style.display = "none";
Another option would be to do it in server side.
echo "<select id='dropbx' style='display:none;'>";
or (if you don't want inline styles)
echo "<select id='dropbx' class='hidden'>";
in your css
.hidden {
display:none;
}
Related
so I make a small php app and I try to use ajax.
I have two lists :
<select name="auteur" id="auteur" >
<option value='-1'>Aucun auteur</option>
<?php
require("bd/bd.inc.php");
$resA = listeAuteurs();
while ($rowA = $resA->fetch()) {
echo "<option value='" . $rowA["id"] . "'>" . $rowA["nom"] . "</option>";
}
?>
</select>
And
<select id="livre" name="livre">
<option value="-1">
Aucun livre
</option>
<?php
$idAuteur = NULL;
require("bd/bd.inc.php");
$resL = listeLivres($idAuteur);
while ($rowL = $resL->fetch()) {
echo "<option value='" . $rowL["idLivre"] . "'>" . $rowL["titre"] . "</option>";
}
?>
</select>
In my ajax.js file I get the value of the slected option of the first list with this code :var validauteur = $( "#auteur" ).val();
And what I want is to modify the value of the variable "$idAuteur" in the second list with the value of the selected option of the first list.
Hope you can help.
You can't use AJAX to edit the PHP variable of a page that has already loaded - but you can use AJAX to trigger a JS function (on success) which will edit the second input.
In your AJAX success return, add some JS code to edit the second select box:
$( "#livre" ).html(...);
What you actually want to change it to is upto you.
I'm using x-editable http://vitalets.github.io/x-editable/index.html a jquery inplace editor. Currently I have a working code like below:
<?php
$num_rows = 1;
// store the record of the "tblstudent" table into $row
while ($row = mysqli_fetch_array($result)) {
echo "<script type=\"text/javascript\">
$.fn.editable.defaults.mode = \"popup\";
$('#username$num_rows').editable();
</script> "; //assign num to element
// Print out the contents of the entry
echo '<tr>';
echo '<td><a href="#" id="username' . $num_rows . '" data-type="text" data-pk="' . $row['id'] . '" data-url="post.php" data-title="Edit website">';
echo htmlspecialchars($row['website'], ENT_QUOTES, 'UTF-8');
echo '</a></td>';
echo '</tr>';
$num_rows++;
}
?>
Which result in the following:
but as you can see I use $num_rows in assigning element ID and getting the ID with javascript. I prefer not to use loop to assign uniq ID to element or include the javascript in php tag. Is there any elegant solution than this?
Thanks in advance.
Keep the id as username or infact add class='username' instead of id.
<script type="text/javascript">
$.fn.editable.defaults.mode = "popup";
$('.username').click(function(){
$(this).editable();
})
</script>
<div>
<script type="text/javascript">
$(document).ready(function(){
$('#selectstate').change(function() {
window.location = "dropexmpl.php?stateval=" + $(this).val();
});
$('#selectcity').change(function() {
window.location = "dropexmpl.php?cityval=" + $(this).val();
});
});
</div>
</script>
</head>
<body >
<div>
<?php
//state drop down
echo "<td"." id="."id_sel_state".">";
$con=mysql_connect("localhost","root","");
mysql_select_db("data_filter",$con);
$query=("SELECT id,state_name FROM state_details ");
$result = mysql_query ($query);
echo "<label id='statelab'>Select state : </label>"."<select name='filterstate'id='selectstate' onchange='getstateval()'>";
while ($nt = mysql_fetch_array($result)){
echo "<option value='".$nt['id']."'>".$nt['state_name']."</option>";
}
echo "</select>";
//city drop down
$statestrval= $_GET['stateval'];
echo "<td id='id_sel_city'>";
$query1="SELECT id,state_id,city_name FROM city_details WHERE state_id=".$statestrval.""; $result1 = mysql_query ($query1);
echo "<label>Select city : </label>"."<select name='filtercity' id='selectcity' >";
while ($nt = mysql_fetch_array($result1)){
echo "<option value='".$nt['id']."'>".$nt['city_name']."</option>";
}
echo "</select>";
//Zone drop down
$citystrval= $_GET['cityval'];
echo "<td id="."id_sel_zone".">";
$query2="SELECT id,city_id,zone_area FROM zone_details WHERE city_id=".$citystrval."";
$result2 = mysql_query ($query2);
echo "<label>Select industry zone : </label>"."<select name='filterzone' id='selectzone'>";
while ($nt = mysql_fetch_array($result2)){
echo "<option value='".$nt['id']."'>".$nt['zone_area']."</option>";
}
echo "</select>";
mysql_close($con);
?>
</div>
</form>
</body>
</html>
here i used 3 drop down state city and zone.it works but when page is reloaded with window.location code it show me the page with refresh effect how it solve by using ajax.
it should be like when i select the state is should be shows city list related to that state.when city is selected it should be shows the zone related to that city .but problem is when i go to select the city it change the state list and when i select zone it change the city list because of reloading of page how i can solve this problem.
I advise you to use AJAX, jQuery and avoid page refreshing.
Have a look to the jQuery documentation: http://api.jquery.com/jQuery.getJSON/
At the moment, The code below only works for one container. I am looking to make only the description associated with that click slideToggle.
jquery:
$("#closedImage").click(function(){
$('#closedImage').css("display", "none");
$('#openImage').css("display", "block");
$(this).parent().next(".jobDescription").slideToggle("slow");
});
$("#openImage").click(function(){
$('#openImage').css("display", "none");
$('#closedImage').css("display", "block");
$(this).parent().next(".jobDescription").slideToggle("slow");
});
php/html - contents within foreach loop:
echo "<div id=\"theJob\">";
echo "<a href=\"/job/view/".$job['id']."/".$job['url']."\">";
echo "<div id=\"leftContain\" class=\"floatLeft\">";
echo "<h2 class=\"green\">".$job['role']."</h2>";
echo "<div class=\"blue floatLeft\"><h3>".$job['company']." in ".$job['location']."</h3></div><br><br>";
echo "</div>";
echo "</a>";
echo "<div id=\"rightContain\" class=\"floatLeft\">";
echo "<div id=\"closedImage\"><img src=\"/images/side.png\"></div>";
echo "<div id=\"openImage\"><img src=\"/images/down.png\"></div>";
echo "</div>";
echo "<div class=\"jobDescription floatLeft\">";
echo $job['description'];
echo "</div>";
echo "</div>";
Thanks in advance.
You're using a foreach with ids not classes. The selectors in your jquery will only return the first id it comes across, the rest will be ignored.
IDs should never appear more than once on a page and is invalid markup.
Change the IDs to classes and it should fix your issue :)
Hope this helps.
It seems like you are duplicating the ids closedImage and openImage etc in your containers. instead turn them to/add classnames and try .
$(".closedImage").click(function(){
var $this = $(this);
$this.hide().siblings('.openImage').show();; //hide and show are shortcuts to display none / block
$this.parent().next(".jobDescription").slideToggle("slow");
});
$(".openImage").click(function(){
var $this = $(this);
$this.hide().siblings('.closedImage').show();;
$this.parent().next(".jobDescription").slideToggle("slow");
});
Use ids sparingly and turn them into classes. Duplicate ids make your html invalid and selectors to fail as they will select the first one appearing in DOM
I have been developing some page and I need to clear a content of some div:
<table>
<tbody>
<div class="records_content">
<?php
$i=0;
foreach ($records as $record) {
echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<td width='400'>" . strip_tags($record['language_value']) . "</td>";
if ($record['approved_translation'])
{
echo "<td width='200' height='30'><div class='field' id='".$record['label_value']."/".$record['language_id']."'>".
strip_tags($record['approved_translation']['language_value'])."</div></td><td><button class='btn btn-info' id='{$record['label_value']}/{$record['language_id']}' href='#'>More...</button>"."</td>";
}
else
{
echo "<td width='200'>"."<div id='".$record['label_value']."/".$record['language_id']."'><span class='no_translate'>Not translated</span></div>" . "</td>";
}
echo '</tr>';
$i++;
}
?>
</div>
</tbody>
</table>
Piece of JS code:
$(".page_button").click(function () {
$.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
function(data)
{
alert('123');
$(".records_content").empty();
});
});
This script works, because I see '123' notification, but div container with '.records_content' class isn't clear. Please, tell me, how can I fix it? Thank you.
UPDATE:
Now it works. But I have a new problem with pagination:
<br><b>Page:</b><br/>
<?php
for($i=0; $i<$count; $i++)
{
if ($i==0)
{
echo "<div class='selected_page_button'>".($i+1)." "."</div>";
}
else
{
echo "<div class='page_button'>".($i+1)." "."</div>";
}
}
?>
And code for changing class of button:
$(".page_button").click(function () {
$(".selected_page_button").attr("class", "page_button");
$(this).attr("class", "selected_page_button");
});
It works correctly for all buttons without first. When my page is created the first page is selected. When I click by "2", then "1" is simple and "2" is selected. The same thing is with all buttons without "1": if I click by "2" (or other one) then I can't click by first! "1" changes it's view but doesn't change behavior, because simple button is clickable and selected button is not clickable!
It does clear using .empty() as your code already states, except that it clears after the alert. See here: http://jsfiddle.net/YPLeB/
After you click "OK", the DIV is cleared as expected.
Try this:
$(".records_content").html('');
You'll see the alert happening before the HTML is emptied. Try placing the alert after the .empty() function or use a non-blocking command such as console.log() to debug your code.
Your code itself is correct... only the ordering of the commands is tripping you up...