I have set the number X to 5.
When clicking a button a script is run to update the database without refreshing - that works fine.
Now i want a number on the page to update to 6, also without the page refreshing.
I tried JS, but ended up having the number in an input field which looks bad. Is there any other way, maybe with jQuery.
This will let you get the element by its id and update its value.
document.getElementById('theId').innerHTML = newValue;
If you are not currently using jQuery then do not use it just for this. If you are using jQuery you can do the following.
$('#theId').html(newValue);
or
$('#theId').text(newValue);
Depending on whether the newValue may or may not have html in it.
Both the jquery and straight javascript examples are equivalent.
You don't have to use jQuery.
You can update everything on page by pure JavaScript, without jQuery.
Example from Javascript Tutorial at tizag.com:
<script type="text/javascript">
function changeText()
{
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>
Welcome to the site <b id='boldStuff'>dude</b>
</p>
<input type='button' onclick='changeText()' value='Change Text'/>
with jquery $("your containerselector").html(parseInt($("your containerselector").html()) + 1) Though you need to be sure your container just contains on int.
Related
I want to create a button with press & release actions, so, for example, when i press it, it shows some text and when i release it it hides the text. Can anybody help?
What i have already tried:
<form action="forwardon.php" method="get">
<input type="submit" value="Forward">
</form>
This just creates a button which redirects to a page which is running the desired action: but you cant create press & release actions with this..
And i cant find any way how to do this.. Or is it just not possible with php?
Well, yes. It's not possible with php, you need to use javascript for that.
Every button has events: onmousedown and onmouseup. You can see the list of events here
Basically, you need to create functions, that will be fired in javascript while pressing/releasing. It would look like this
<html>
<-- your html here -->
</html>
<script>
document.getElementById('id-of-your-button')
.addEventListener('mousedown', function() {
//change the text you need here with pure javascript
});
</script>
The same goes with onmouseup event too.
To know more about javascript visit w3schools
Like James already said. In PHP it isn't possible to make something like button events, because PHP is a ServerSideLanguage.
As he also mentioned, you have to use for example JavaScript.
With the following script you are able to change the text with mouse events
<input type="button" value="Forward" onmousedown="getElementById('text').innerHTML = 'pressed';" onmouseup="getElementById('text').innerHTML = '';">
<p id="text"></p>
PHP won't be able to do this without refreshing the page/going to a new page.
JavaScript can give you what you are looking for.
see w3schools first example for showing text.
Hope this helps
I'm quite new to PHP and I'm dealing with a problem I have no idea how to solve. I'm generating a table of users (name, username, e-mail) from a MySQL database. There is an edit link in each row. This links displays a pop-up DIV (made using jQuery) that contains three form fields (name, username, e-mail) that can be used to edit (update) the particular row.
I would like to pre-load the current values from the database into these form fields to make it more convenient to edit them.
The problem is that the DIV is displayed without refreshing the web page, meaning that I'm unable to pass any parameters from the edit link and therefore I cannot tell the server which values to pre-load.
Is there any solution to this?
Thanks!
You can pass them using this way:
Note : when u generate the values(name,username,email) in Server (using PHP)..do it as follows :
<a class='editBtn' data-x="the username info" data-y="the email info" data-z="name">Edit</a>
then at Client side catch them using on click events:
jQuery('.editBtn').each(function(i,v){
jQuery(v).click(function(eve){
eve.preventDefault();
eve.stopPropagation();
var username= jQuery(v).attr('data-x');
var email= jQuery(v).attr('data-y');
var name= jQuery(v).attr('data-z');
/*
display ur Modal Box here
Happy Coding :) ,
*/
});
});
try this:
$(your var in JS) = <?PHP echo $(your rowname in the prepaired statement)['(your ID tablevariable)'];?>
that could work but i hadn't seen the code so, this is the only thing i could give tou to try
if you want to refresh the data in realtime about your html with your new values, you must use AJAX. JQuery give us a simple api about this: https://api.jquery.com/jQuery.ajax/
I like to use a hidden <iframe> at the bottom of all my pages. I can load a php script into that, which than can be used to update the parent frame by using javascript.
<iframe name="hidden" id="hidden" style="display:none"></iframe>
To call the script, just use a link or button to call it.
Click to load script!
Once you get the data from mysql, use javascript to change the variables.
<script language="javascript">
parent.document.getElementById('name').value = '<?PHP= $sqlResults['name']; ?>';
parent.document.getElementById('username').value = '<?PHP= $sqlResults['username']; ?>';
parent.document.getElementById('email').value = '<?PHP= $sqlResults['email']; ?>';
</script>
I have a list of links which when clicked opens a link's corresponding DIV. These div's are hidden by default using both jquery .hide() and css display:none.
These divs all contain a php include to a file with a jquery product zoomer in, and because of the way I've made it, only the first one works and the div's below in the source order fail to work (they are included, but the jquery doesnt work) as I'm assuming it conflicts.
I'd love to be able to fix this apparant conflict, but haven't a clue what the issue may be, and as the site is "secret" I can't show the source here without giving away what it is.
So, i was thinking - instead of including these files via php, have them load in when the link is clicked, so only one of these includes is in the page at any one time!
Is this possible using jquery and some php?
--- edit ---
On further investigation - thanks to some of your comments below, it looks like jQuery's .load() looks suitable, but won't work for me. Here is my jQuery:
`
$('.urbaneCarousel li.dowrImg').click(function(){
$('ul.urbaneCarousel').hide();
$('.dowrDiv, .dowrDiv div').show();
$('.dowrDiv .insert').load('path/to/dowr.php');
return false;
});
`
Any advice? I'm 100% certain the path/to/ part is correct.
JQuery .load http://api.jquery.com/load/ | I guess you have to try to play with .load =)
It sounds like you might have some conflicts between those php files. it shouldn't be an issue to include different php's into your hidden divs at all. In any case, couple ways you can do this:
Include all your content via php upfront and simply show the divs on the browser (sounds like what you're doing)
< div id='mydiv1' style='display:none'>
< ?php include('myfile1'); ?>
< /div>
< div id='mydiv2' style='display:none'>
< ?php include('myfile2'); ?>
< /div>
etc.
Then, on some click event, you would do $("#div1").show(), etc.
or
2) simply create your divs empty and bind click events to the .load or .get calls for specific divs
so let's say you have two buttons btn1 and btn2 for those divs.
$('#btn1').bind('click', function() {
$("#div1").get('myfile1');
$("#div1").show();
});
The only problem with the second solution that it will go to the server to fetch data every time button is clicked.
UPDATE
try specifying full path in your .load or .get just to be safe. That might be giving you problems too. Here's a quick example (I am using codeIgniter, thus base_url() reference)
$('#btn_trigger').live('click', function(){
$("#dowrInsert").load("<?php echo base_url();?>auth/index");
});
<input type='button' value='Trigger' id='btn_trigger'/>
<div id="dowrInsert">
My text
</div>
This works fine
Well, I managed to resolve the conflict which was leading to me needing to use the .load() method.
I'm sure there was something within my wordpress theme which was causing this to mess up, so thanks to all those who helped me looking for ways round this, but I managed to accidentally fix my initial conflict in any case, so no longer need the .load() method as a workaround.
I have the following HTML page:
<div id="foobar">
<?php echo $dynamicVar; ?>
</div>
<input type="button" value="Submit" id="subButton"/>
When I press submit, the value of $dynamicVar will change. Is there a way, without using Ajax callbacks, .each(), or anything complicated, to do a dead-simple refresh of the div element? I know there's a jQuery function, I've seen it before, but I can't find it now. This function will just refresh an element. Everything I've found requires me to write unnecessarily complicated code to attempt to refresh a very small very simple element.
For example, if the the entire div had the value "1" inside of it, and I pressed the button, I want to refresh in order to show the value "n".
Here's the jQuery code:
$('#subButton').live('click',function() {
//dead-simple element refresh, nothing fancy necessary
});
Example #2:
<div id="foobar">
<?php echo time(); ?>
</div>
<input type="button" value="Submit" id="subButton"/>
Since time generally goes forward, the timestamp should be different from a few seconds ago when the web server gave me the timestamp. I would want to have the div element do a very simple update of itself so that I would see the new timestamp upon button click.
Any help?
Were you thinking of .load()? It's a high-level ajax function. You'd use it something like this:
$('#subButton').live('click',function() {
$('#foobar').load('thispage.php #foobar > *');
});
You'll have to use AJAX AFAIK, but in your $.ajax() callback, you can use $.replaceWith() (documentation).
$('#foobar').load('my/script.php');
I have the following jQuery code in my PHP file (edited Jan 19 2010 # 10:40 MST):
<?php
$count = 0;
foreach($attachments as $attachment) :
echo '<script type="text/javascript">
$(\'#a_'.$count.'\').click(function() {
$(\'#d_'.$count.'\').show(200);
});
// if "no" is clicked
$(\'#d_'.$count.' .no\').click(function() {
$(\'#d_'.$count.'\').hide(200);
});
// if "yes" is clicked
$(\'#d_'.$count.' .yes\').click(function() {
$(\'#d_'.$count.'\').hide(200);
// update database table -- this is why I need the script inside the for loop!
var jsonURL = \'http://path/to/update_db_script.php\';
$.getJSON(jsonURL, {\'post_id\' : '.$attachment->ID.'}, function(data) {
alert(\'Thank you. Your approval was received.\');
});
$(\'#a_'.$count.'\').replaceWith(\'<span>Approved</span>\');
});
</script>';
echo '<li>';
if($attachment->post_excerpt == 'approved') {
// Check the proof's status to see if it reads "approved"
echo '<span>Approved</span>';
} else { ?>
// If not yet approved, show options
<a class="approve" id="a_<?php echo $count; ?>" href="#">Click to Approve</a>
<div class="confirm-approval" id="d_<?php echo $count; ?>">
<p>Please confirm that you would like to approve this proof:</p>
<a class="yes" href="#">Yes, I approve</a>
<a class="no" href="#">No, not yet</a>
</div><?php
} ?>
</li>
<?php $count++;
endforeach; ?>
The page in question is available here. The "click to approve" links do not work (that's my problem).
When I view source, the PHP variables appear to have echoed properly inside the jQuery:
<script type="text/javascript">
$('#a_0').click(function() {
$('#d_0').show(200);
});
... etc ...
</script>
This looks correct, but nothing happens when I click any of the links. However, when I replace the PHP echo statements with plain numbers (0, 1, etc.) the click functions work as expected.
You may be asking: why on earth do you have this inside a for loop? The reason is that I need to retrieve the attachment->ID variable and pass it to an external PHP script. When someone clicks "approve" and confirms, the external script takes the attachment->ID and updates a database value to read "approved".
Why won't the click function fire when PHP is in place? Is there some kind of greater force at work here (e.g., hosting limitation), or am I missing a fundamental piece of how PHP and JavaScript interact?
Since you didn't post your HTML its a little hard to troubleshoot.
First, I am not sure why one is working and the other is not since the code it is outputting looks correct. Either way, I still would make some changes. Move your a_0,a_1, etc and d_0,d_1, etc into the id attribute instead of a class:
<div>Click Me</div>
<div class="confirm_approval" id="d_0">Show Me</div>
<div>Click Me</div>
<div class="confirm_approval" id="d_1">Show Me</div>
Now, instead of outputting your code in a loop in PHP, place this jQuery code once on your page:
$(document).ready(function(){
$("a.approve[id^='a_']").click(function(e){
var id = this.id.replace('a_',''); // Get the id for this link
$('#d_' + id + '.confirm-approval').show(200);
e.preventDefault();
});
});
This code finds any a element with the approve class that has an id that starts with a_. When this is clicked, it grabs the number off the id a_0 = 0 and uses that id to find the confirm-approval element and show it.
Since the javascript is run on the client and has no way of knowing whether the script was generated using PHP or not, I think that particular part is a wild goose chase...
When I replace the PHP echo statements
with plain numbers (0, 1, etc.) the
click function works as expected.
Do this again and compare the actual output using view-source in a browser. I'll bet you find that there is a difference between the working and failing scripts, other than one of them being generated by PHP.
It seems that the problem is in jQuery selectors. Instead of dynamically binding click() events on multiple objects with an output of PHP code, use just one class selector and bind to objects with this class. And you can specify an id attribute to make them unique.
Something strange too is to have the script tag and the
$(document).ready(function()
in the loop. I don't know if this causes any problems, but it's sure not very efficient, one time is enough.