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>
Related
I've been looking around for solutions for this for quite sometime and sadly, haven't found a proper solution for it.
Here's the situation.
I have a Bootstrap modal that displays text ( let's call it 'header' ) depending on which button was clicked. The header value is picked up from the data-attribute of the button and using jQuery, I update the text for the respective modal. I hope I've been clear enough about this.
Now, I want to use the same header text in a PHP Script that queries my MySQL table with this 'header' value in the LIKE clause of my query as '%header%'.
Seems simple enough but I can't get my head around it.
Here are some issues that I face:
The header value is empty in the PHP script when I try to pass it to the script. I tried using script_tags to strip the tags around the HTML of the header and just extract the text and also tried PHP DOM but it did not work.
Here are the basic steps for further clarity:
I have a PHP script that needs to get a text value from the HTML on the same page.
This text value was picked up from a data-attribute of a button and updated via jQuery to the HTML.
This text value must be included in the LIKE clause of MySQL query in the PHP script for any updates to the table.
I can handle everything else except the extraction of text and sending it to the PHP script part.
Thank you.
Adding Code for reference:
This is the HTML code that houses the data-attribute:
The $project_title variable was set previously and appended to the button.
echo "<a class='delete_icon' data-project_title='$project_title'><i class='fa fa-trash'></i></a>";
This is the jQuery code:
$('#project_profile_modal').on('show.bs.modal', function (event) {
var del_icon = $(event.relatedTarget);
var project_title = del_icon.data('project_title');
modal.find('h4').text(project_title);
}
This is the excerpt of the PHP script that is relevant:
<?php
$result = "SELECT content FROM my_table WHERE content LIKE '%$project_title%';
?>
Question is: how do I get the text contained in h4 to $project_title/my LIKE clause.
Assuming button looks something like:
<button class="modal-button" data-text="..." data-row_id="...">
Then in click handler you gather all the data and send to server:
$('.modal-button').click(function(){
var data = $(this).data();
// send to server
$.post(url, data, function(response){
// update modal header and content
$('modal-header-selector').text(data.text);
$('modal-content-selector').html(response);
})
})
I am trying to do the following, can someone please help.
I have created a php file that accepts json objects. This web page is meant to be displayed directly to the users.
How can I open this page from another page without using html forms? I need a easy solution that would look something like the following.
Javascript (with JQuery support if needed):
var JsonParamToPass=jsonObj;
var postData=JsonParamToPass;
window.open("www.myAwesomePageThatAcceptsPostData.com",'_blank',method=POST,postData);
//the last two variables are made up and i need to find a way to do that, that can easily be given to other people to use.
I want to avoid using an ajax request and writing the output to a new page, and I want to avoid creating a form if possible.
Thank you,
You could use the javascript window.opener method to access the parent windows variables.
var myVar = window.opener.parentVar;
Any reason you couldn't use a hidden form and submit it using javascript like this:
(this would be in your original window and document.submit would open a new window rather than using the current window)
<form name="myForm" action="http://yourAwesomePage" method="POST">
<input type="hidden" id="myVar" name="myVar" value = "">
</form>
<SCRIPT type="text/javascript">
document.myForm.myVar.value = someValue;
document.myForm.submit();
</SCRIPT>
I have a form which uses the target attribute to target an iframe when the form is posted which posts to a PHP script. This part is working fine but I need to do something based on several results that the php script will put in the iframe.
What I am thinking of doing is when the PHP script has finished posting it echo's out some hidden input fields that contain various elements, such as the state of the post, whether it succeeded and what the final result was if it was successfully posted.
However, if I did this it would put it into the iframe so then the main web page wouldn't be able to access the hidden input fields.
How would the main web page be able to access these hidden input fields so that the main web page can perform some action, I.e. make a div within the web page show a specific error message or whatever.
The other thing is, once I know how I can get the data from the hidden input field, how would I know when I can go and get the values. I was thinking that when the form is posted via a JavaScript document.forms["myform"].submit() code I could then do a while loop and check to see if another hidden input field status is set to complete and once it says complete I can then get the values from the hidden input field.
I'm not sure if the way I suggested is the right way or doing what I want to achieve or if there is a better way of doing it.
UPDATE
I've tried what #lanzz suggested but it doesn't appear to have worked. Below is what I have tried.
$("iframe#image_upload_frame").on('load', function()
{
var iframeBody = this.contentDocument.body;
var data = $(iframeBody).find("#imageDirectory");
alert("data: " + data);
});
Below is how the iframe is defined
<iframe id="image_upload_frame" name="image_upload_frame"></iframe>
and I am echoing out a hidden input field in the php script that's within the iframe.
echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />';
The echo is definetly working as when I see view the iframe source I can see the hidden input however, the alert dialog is never shown as if something isn't working. There are no errors being reported either by the google chrome dev console.
If I understand correctly - you need a value from the iframe in the parent window, once the value is loaded into the iframe. I would add javascript to the iframe calling the parent and executing a function.
In the main frame:
function incomingValue(val) {
alert(val)
}
and somewhere in the generated iframe:
<script type="text/javascript">
parent.incomingValue("Hello world");
</script>
This should work assuming both frame sources share the same domain.
You can use postMessage for cross document communication between an iframe and it's parent.
See:
http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes
http://javascript.info/tutorial/cross-window-messaging-with-postmessage
Since you're running on the same domain, your main page's Javascript will have no trouble to access the contents of the <iframe> (example uses jQuery, you could rewrite into whatever libs you plan to use):
$('iframe#the-id-of-the-iframe').on('load', function() {
var iframeWin = this.contentWindow;
var iframeBody = this.contentDocument.body;
// access global JS vars defined in the iframe:
var someIframeVariable = iframeWin.globalIframeVariable;
// or, directly access elements in the iframe:
var someIframeElement = $(iframeBody).find('#element-id-inside-iframe');
});
A while ago I wrote a piece of code to upload a picture using some javascript and two iframes. The most important thing for me was to preview the pic. Maybe it will help you:
HTML:
<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div>
<iframe src='uploadform.php' name'pic_frame'></iframe>
<iframe src='#' name='target_frame'></iframe>
both the iframes are hidden. The targetframe has no source (or an empty page, if you want to).
uploadform.php contains a form:
<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''>
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'>
</form>
and then some javascript:
First of all something to trigger the filebrowser when the user clicks the fake
function select_pic(){
b=window.frames['pic_frame'];
b.document.upload_form.realfoto.click();
}
And then a part to actually upload the pic, triggered by the onchange() in the input element:
function foto_upload(o){
var b=o;
o=getElementById(o);
if(o.contentDocument ) {o = o.contentDocument;}
else if(o.contentWindow ){o = o.contentWindow;}
else{return false;}
if(test_pic(o,b)){ //test if it is really a pic
getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value;
o.getElementById('doctype_nr').value=b;
o.fotoform.submit();
}
else{
return false;}
}
In dosomething.php I perform actions on the uploaded pic (rename, resize etc). And it contains a few lines of javascript:
$a = 'upload was succes';
$b = 'my_image_name';
$c = 'whatever you want to put here';
?>
<script type="text/javascript">
window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script>
<?php
if you create in javascripty a function named smurf(a,b,c) you can pass along whatever you want form the php-script. One of the most important things for me was that I now can pass the filename of the uploaded pic to javascript, and use it to change an image.src for a preview.
Hope you can use something of it.
Your iframe source page should has a javascript call function instead of the hidden field. The function will call the opener window (your main page) and then it do any functionality you want. As blue print look at the following:
//in iframe src.php
<?php
if ($something){
?>
<script>
function doSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doSomethingWithOpenerWindow()
</script>
<?php
}
else{
?>
<script>
function doAnotherSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doAnotherSomethingWithOpenerWindow()
</script>
<?php
}
?>
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 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.