I am trying to add new elements (buttons) to html file using javascript. Here is the working script:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
</script>
<?php
}
?>
</div>
The script adding new elements to html file, but I would like to change some of the properties (for example:button size) too.
I have method SetProperties(id, fontSize) and if I am adding it in code when elements should be created it doesn't work, it even do not creates that new elements. Here is the code which makes me a headache:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
*SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);*
</script>
<?php
}
?>
</div>
And here is the function which changes new elements properties:
<script type="text/javascript">
function SetProperties(id, fontSize)
{
var btn = document.getElementById(id);
btn.style.fontSize = fontSize + "px;";
}
</script>
you may try like this
<style>
#examples [type=button]
{
font-size:25px;
}
</style>
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
</script>
<?php
}
?>
</div>
About your code, try using just strings for the id:
element.id = "<?=$row['id'];?>";
/* ... */
SetProperties("<?=$row['id'];?>");
Because getElementById expects a string. In some cases JavaScript could cast the number to string, but it depends on how getElementById is implemented in the browser.
Besides that, the code that your are doing can be implemented in a much better way:
Output the HTML directly
Use CSS for changing the styles
If you need to associate some meta-data to your button so you can refer for example to a database id, use data attributes, instead of messing with the ID.
For example:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result)) {?>
<button class="do-something" data-row-id="<?=$row['id'];?>">Click me</button>
<?php
}
?>
</div>
Then in CSS:
.do-something { /* set CSS properties */ }
Also if you need to add a click handler, and you have a lot of buttons, you can assign the handler to the container of buttons (the example uses jQuery):
$('#examples').on('click', '.do-something', function () { /* handler */ });
This is more efficient than assigning the click handler for each button.
<script type="text/javascript">
function SetProperties(id)
{
document.getElementById(id).style.fontSize = 25 + "px";
}
</script>
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);
</script>
<?php
}
?>
</div>
I agree with #meagar -- why emit JavaScript when you can do it all on the server?
Here's how you would add the elements directly on the server-side, instead of emitting JavaScript that then adds the elements on the client-side:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<input type="button" value="Click me" id="<?=$row['id'];?>" />
<?php } ?>
</div>
and to style it, put this in the <head> or in your CSS file:
<style>
#examples input {
font-size: 25px;
}
</style>
You may try like this to avoid creating `buttons` at `client` side
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<input type="button" value="Click me" id="<?=$row['id'];?>" style="font-size: 25px;" />
<?php } ?>
</div>
Related
Hello there i'm having trouble in getting the id's of a div that is stored in an foreach loop. What i want to do is to get the id one by one in jquery as the ids are looping in the php code.
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
var target=('get the id of cat-title class here')
});
});
</script>
<?php
foreach($cat_arr['cat_pro'] as $cat_name){
echo "<div class='cat-back'>";
echo "<a href='#".$cat_name[0]."' class='cat-anchor'>".$cat_name[1]."</a> <br>";
echo "</div>";
}
foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
echo '<div name="'.$myvalues[1].'" class="cat-title" id="'.$myvalues[0].'">
<h2>'.$myvalues[1].'</h2></div>';
?>
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
$(".cat-title").each(function(index, element) {
var target=$(this).attr("id");
});
});
});
</script>
Trying this, you'll get object for each div and use them as as you wish.
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
var target = $(this).attr('id');
});
});
</script>
Just Google for how to retrieve an element's attribute from jQuery. The .attr() function will help.
<div class="cat-title" id="1"></div>
<div class="cat-title" id="2"></div>
<div class="cat-title" id="3"></div>
<div class="cat-title" id="4"></div>
<input type="button" class="cat-anchor" value="get ids">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
var target='';
var divs = $(".cat-title");
for (var i = 0; i < divs.length; i++) {
target += divs[i].id;
};
alert(target);
});
});
</script>
First define a variable which increments till the loop completion and also append the same variable at id="your-div-name'.$i.'" as shown below
$i=1
foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
echo '<div name="'.$myvalues[1].'" class="cat-title'.$i.'" id="'.$myvalues[0].'">
<h2>'.$myvalues[1].'</h2></div>';
$i++;
}
and then when writing your script just execute the loop as no.of times prev loop executes, simultaneously echo the number for div as here. Hope this is clear!
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
<?php
for($j=0;$j<=$i;$j++){
echo 'var target=document.getElementById("cat-title'.$j.'").innerHTML;';
}
?>
});
});
</script>
I'm trying to create a 'print' button to open a new window and display a PHP Variable in it.
The code below is looped through the PHP script as many times as there are tickets, however I can't seem to get the correct number to display when the window opens (the number that displays in the print link is correct - but when the new window is opened it's incorrect).
<script type='text/javascript'>
jQuery(function($) {
$('a.new-window').click(function(){
var recipe = window.open('','PrintWindow','width=600,height=600');
var html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + $('<div />').append($('#ticket').clone()).html() + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
Print <?php echo $EM_Booking->get_spaces() ?>
<div style="display:none;">
<div id="ticket"><?php echo $EM_Booking->get_spaces() ?>
</div>
</div>
why not try something like this:
<a href="#" class="new-window">Print <?php echo $EM_Booking->get_spaces() ?>
<div class="ticket" style="display:none">
<?php echo $EM_Booking->get_spaces() ?>
</div>
</a>
<script>
jQuery(function ($) {
$('a.new-window').click(function () {
var btn = $(this),
ticket = btn.find('.ticket').html(),
recipe = window.open('','PrintWindow','width=600,height=600'),
html = '<html><head><title>Print Your Ticket</title></head><body><div id="myprintticket">' + ticket + '</div></body></html>';
recipe.document.open();
recipe.document.write(html);
recipe.document.close();
return false;
});
});
</script>
But much better solution would be to give a button a unique ID, and onclick open an existing (php-generated) page from the server passing that ID, e.g. /getBooking.php?id=123 and that page would output whatever's needed.
I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.
I'm trying to get information from mysql and post the information into an html page. Here's what I've got so far:This is my tenantlistmob.php
<?php
include('connection.php');
$result = mysql_query("SELECT * FROM tenanttemp");
while ($row = mysql_fetch_assoc($result))
{
$array[] = array($row['TenantFirstName']);
}
echo json_encode($array);
?>
When i call tenantlistmob from browser directly it shows [["Humayun"],["Sahjahan"],["Bayezid"],["Bayezid"],["Asaduzzaman"],["Mouri"]] where firstnames are comming. I like to use this name in html page. my html page is
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="styles/main.css" />
<script type="text/javascript" src="jquery.js"></script>
<body>
<div id="output">this element will be accessed by jquery and this text replaced</div>
<script id="source" type="text/javascript">
$(function ()
{
$.ajax({
url: 'tenantlistmob.php',
data: "",
dataType: 'json',
success: function(data)
{
var id = data;
//var vname = data[1]; //get name
$.each(id, function (val)
{
$('#output').html(""+id);
});
}
});
});
</script>
<form id="formset">
<fieldset id="fieldset">
<h3 align="center">Tenant List</h3><hr/>
name1<br /><hr/>
name2 <br /><hr/>
</fieldset>
</form>
<a id="box-link1" class="myButtonLink" href="category1.php"></a>
</div>
</body>
</html>
My output(main.css) is like this
#output
{
color:#ffffff;
font-size : 20px;
margin : 0;
letter-spacing:1px;
width:480px;
}
I am getting the first name asHumayun,Sahjahan,Bayezid,Bayezid,Asaduzzaman,Mouri in top-left corner. But i like to get the name as list(name1,name2) with link. when i click on a name(name1,name2) it will show details of the name. How can I do this?
Thank in advance
It looks like your looking to iterate the JSON using JavaScript. Since you're using jQuery, you simply need to "iterate" the JSON result. Technically 0 comes before 1 in JavaScript.
var _result = $data[0];
$.each(_result, function (val)
{
console.log(val);
});
http://api.jquery.com/jQuery.each/
Try this:
<?php
include('connection.php');
$result = mysql_query("SELECT * FROM tenanttemp");
$array = array();
while ($row = mysql_fetch_assoc($result))
{
$array[] = $row['TenantFirstName'];
}
echo json_encode($array);
?>
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.