I am developing an PHP/Mysql application whereby if the user enter a certain value, the results should be displayed to him in a Mootools SqueezeBox alert.
But all the usages of Squeeze I am seeing involve link-activated alerts i.e. when someone clicks a link, the Squeezebox alert appears.
How can it be as I mentioned?
Thanks
Seems like what you want to do is feasible. Use a text input that you can add information to, then use the value set to modify the link, and click the link. Something like:
$('userinput').addEvent('change', function(evt){
var userValue = $('userinput').getProperty('value');
var url = 'http://www.example.com/?property=' + encodeURI(userValue)
$('linky').setProperty('href');
$('linky').fireEvent('click');
});
With html like:
<input type="text" name="userinput" id="userinput" />
SqueezeBox Link
Assuming SqueezeBox is adding click events, this should work.
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 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.
I'm a beginner with PHP and I'd like to do the following but I have not a clue of how to do this :
I have a webpage where I ask a user to submit his postal code. After he/she submits it the page redirects to another PHP page where I search in a datebase the city corresponding to the postal code. Then I write : "You're city is ...".
What I'd like is to have this happen using only one webpage (with no visible redirection for the user). I know we can use header to redirect to the first page but I don't know how to transmit the content (city).
You can pass city name in query parameter like
headers('Location: serachdatabase.php?city='.$cityname);
But that may not be what you are looking for. You can consider using Ajax to do this. Using Ajax the page will not refresh completely but only the portion of page can be refreshed. Ajax, if you dont know about it, is widely used.
It sounds like you're looking for an AJAX post. This might sound like an advanced topic for a beginner, but if you check out a framework like jQuery (http://api.jquery.com/jQuery.post/) you'll see it's quite simple.
Try something like this:
$('#myform').submit(function() {
var url = 'databasequery.php';
var postcode = $('#postcode').val();
$.post( url, { postcode: postcode },
function( data ) {
$( "#result" ).empty().append( data );
}
);
return false;
});
In your HTML you would tag your form as myform and create an empty div with the id "result".
Your 'databasequery.php' file should accept a POST variable called postcode and simply output the response you want to display on your page.
You can redirect using header("Location:...");
or you could simply just post a form
<form method="post" action="yourURL">
Postal code <input type='text' name='postal_code' /> <br/>
<input type="submit" value="submit form" name="submit" />
</form>
and then do in php something like this:
<?php
$postal = $_POST["postal_code"];
// match against databse..
?>
Note that this code isn't "safe" to put it in a mysql query!
If you don't want any page redirect, you'll need to use either an iFrame or some CSS-id'd divs to load your content into using javascript's XMLHttpRequest or jQuery's axaj or similar to load info from another PHP page and insert it inside the current document.
Here is an example use of XmlHttpRequest, and Here is jQuery's API documentation on its ajax method.
The key to your problem's solution are GET and POST parameters. Learn about HTML forms.
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.