I don't know if this is possible but what I'm trying to accomplish is that when ever I click this link
<a href=?name=$value1 id=$value1 class='txt_value'>Edit</a>
$value1 is a variable of my ID which i retrieved from my database.
my link could be
<a href=?name=$value1 id=$value1
<a href=?name=$value2 id=$value2
<a href=?name=$value3 id=$value3
etc..
my point is whenever I click any link above, a dialog box(jquery) would appear and insert
$value1 into a textbox inside the dialog box. Question is, is it possible that whenever I click a link all data that is associated with that ID (ex. first name, last name with ID #1 ) would also be called and displayed into that dialog box.
this is my initial code
$(".bordered a").click(function(){
$(".ok").val($(this).attr("id"));
$(".create-modal").dialog({
height: 200,
modal:true,
width:300
});
});
<div class="create-modal">
<input class="ok" type="text">
</div>
This is possible. The simplest way is to make a ajax request via jQuery to a PHP script which will return a json string. You can get a PHP array and print it via json_encode function to accomplish that. The JQuery function will take care of the json string and convert it into a JavaScript object.
Related
Simply, I have an <a> tag having values(ID) which will be posted to the same page in clicking,
I wanted to load data into the table based on the ID provided by the post method. On the other hand I am having a clock which is rested again and again when fired a post method.
I simply wanted to do the same via jQuery.
In short I wanted to Implement ajax using jQuery
Also I am using database MySQL, with PHP scripting
Any sort help will be appreciated.
<a class="D" href="?ID=<?php echo $rows[0]; ?>" onclick="">Question<?php echo $QNo; ?></a>
I wanted the same above and get ID for searching relevant data against the ID.
I might be wrong here, but you basically want to query a PHP page based on an ID and display relevant content in a div?
To make an AJAX call, setup a PHP page that will query your database and in turn return HTML data which you can then display in a DOM element.
A very simple example of this would be:
HTML
Load table 1
Load table 2
<div id="contentToPopulate"></div>
jQuery:
$('a.linkToLoadTable').click(function(){
var pageId = $(this).data('tableId')
$.ajax({
url: 'loadTable.php?id='+pageId
}).done(function(data) {
$('#contentToPopulate').html(data)
});
})
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 am stuck in a problem and in need of support from you guys.
My problem is I want to pass a php variable(dynamically called through database in loop) to another div on the same page without page refresh
//This is a loop
<td><a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a></td>
//The div which should get the above php variable
<div class="tabright" id="existingcase">
<?php
$c_id = $_GET['case_id'];
echo $c_id;
?>
</div>
//the javascript code for calling divs on the same page
<script>
$(".linkright").click(function(){
$(".tabright").hide();
theDiv = $(this).attr("href");
$(theDiv).slideToggle();
});
</script>
It shows in the url like this index.php#existingcase?case_id=2012001 but never passes the case id to #existingcase. And also #existingcase div does not load either but without passing caseid value, #existingcase loads.
Any suggestions would be great.
I think you want to print clicked case_id in div without page load. To do this, you don't want to pass it using url. you can simply achieve it using javascript.
If your div id existingcase is just change your code like this below.
you are printing that same case_id as a text of anchor tag using $row_mycases['case_id'];. So, you can easily get that text using javascript and you can easily print it in your #existingcasediv.
<td><a class="linkright" href="#existingcase"><?php echo $row_mycases['case_id']; ?></a></td>
I don't know about your other scripts. in .linkright click function place this code like this
$(".linkright").click(function(){
$('#existingcase').text($(this).text()); //if your div id is existingcase it will print your case id.
});
try this code. And let me know the result.
SEE THIS FIDDLE DEMO
UPDATED:
To pass client side value to serverside without page reload, you can use jquery.post() method.
Place this PHP code at the top of your page.
<?php
if (isset($_POST['id'])) {
$caseid = $_POST['id'];
return print_r($caseid);
}
?>
$caseid will contain currently clicked case_id value. So, you can use this $caseid wherever you want in this page. If you click on the another case id, it will update with respect to currently clicked case_id
replace your js with below code,
$(".linkright").click(function () {
$(".tabright").hide();
theDiv = $(this).attr("href");
$(theDiv).slideToggle();
$.post("yourPHPFile.php", { //use your current php file name instead of "yourPHPFile.php"
id: $(this).text()
}, function (caseid) {
$('#existingcase').text(caseid);
});
});
id : $(this).text() means, get the current element .text() and assign it to $_POST variable name of id. It will post to yourPHPFile.php. And you can retrieve that value like $caseid = $_POST['id'];.
In function (caseid) {, caseid contains the value of $caseid. So, only in this code, I assigned $caseid = $_POST['id'];
By this you can directly print clicked case_id text to your #exixtingcase div.
Any values after # are not sent to the server. Since PHP is a server technology you php code will never see the values after #
<a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">
try doing
<a class="linkright" href="existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">
instead and your php code should fill the div.
In my understanding of your explanation I think you are making a mistake. You are trying to mix Javascript and PHP with out page refresh. This is not possible through your code as PHP is server side and only works on the server. You can't do href within the same page and expect PHP code inside this div to be executed. The PHP code will not be there. You can try "view source" in your browser and check it out.
I think the only way to solve your problem is to make AJAX call using Javascript, get the response and put wherever you want (without refreshing the page)
Hope this helps and excuse my English
EDIT : Here is a working example for making a simple AJAX call using Jquery.
Your table should be some thing like this:
<td>
<a class="linkright" href="#" data-id="<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a>
</td>
You will notice I added "data-id" attribute. We will use this id in our AJAX call. Put this in your JS :
// Create Jquery ajax request
$("a.linkright").click( function() {
$.get("example.php", // Put your php page here
{ case_id : $(this).attr("data-id") }, // Get data, taken from the a tag
function(data) { // Call back function displays the response
$(".tabright").html("<p>" + data + "</p>");
}); // Get
}); // click event
}); // Document Ready
I tested the code and it is working. You will need to customize it to work for you. If all of this AJAX is new to you I suggest these links for you :
http://www.w3schools.com/ajax/default.ASP
http://learn.jquery.com/ajax/
I have used a form to submit an image id to the another page. I have done this rather than r than via url because it makes the url cleaner. However, when the user now reloads, it asks if they want to submit the form again. The won't know they have submitted a form, as far as they are aware they have simply clicked an image and been brought to a page that displays that image bigger.
Is there any way around this, that saves the image id the hidden form field has sent via the form, yet refreshes the page for the user?
HTML
<a class="gallery-img span4 js-img-submit" href="#">
<img src="img.jpg"/>
<form action="/image" method="post">
<input type="hidden" value="<?=$img['id']; ?>" name="image_id"/>
</form>
</a>
JQUERY
$('.js-img-submit').click(function(){
$(this).find('form').submit();
})
PHP
$image_id = isset($_POST['image_id']) ? $_POST['image_id'] : false;
Somehow the parameter needs to be send to the image page.
GET: You dont want that.
POST: You use that, but causes the refresh problem.
SESSION: Will be hidden, but cause troubles, when he opens multiple images, and then refreshing the first page.
So, i would to the following:
Use the hashtag, and load the image via javascript then. finally remove the hashtag:
MainPage:
<a class="gallery-img span4 js-img-submit" href="/image#<?=$img['id']; ?>">
<img src="img.jpg"/>
</a>
ImagePage:
<script language="javascript">
$(document).ready(function(){
var imgid = document.location.hash.slice(1);
document.location.hash = ""; //Remove
loadImage(imgid);
})
</script>
loadImage then needs to be the required javascript function.
The user might notice it for a split second. IF the user is not allowed to see, then your only way would be to use the PHP Session with seperate variables for every opened image-window.
You can do something like this:
$('.js-img-submit').click(function()
{
$.post("image.php", {id: $(this).find('input').val()});
})
I have a list of names (1-15 rows) I display from an array. I want the administrator to select the correct name from the list by clicking on the hypertext called "link." The record id is in the array and I want that passed to the called script.
I found this javascript that works except that I want the linkur.php page to print (with its information messages). I know it doesn't print because of the void(0) but can not figure the correct method needed.
<a href="javascript:void(0);" onclick='$.get("linkur.php",{ rid: "<?php echo $k['id']; ?>", uid: "<?php echo $uid; ?>", } ,function(data){ $("#link<?php echo $k['id']; ?>").html(data); });'>Link</a>
Also, is it possible to do the hyperlink with pure HTML? The hyperlink is straight forward except for passing the array values.
Thanks for any ideas.
Carl
I'm a bit confused by your request. You don't mention needing an asynchronous request, yet that is what your code is doing using the jQuery library. If you don't need an asynchronous request, and want to see the end-page, you just build a regular link:
Link
This would be rendered on the page with solid values rather than variables:
Link
Once you clicked the link, you would pass rid=123 and uid=281 to the end-script, seeing its output on the screen.
Properly Adding some Asynch'ness
If you need to load this data asynchronously, there is only a small addition to the code. Keep the original link that we just referenced above, but add a class to it:
Link
Now with jQuery we can incercept these requests and load up their HTML elsewhere:
$(function(){
// Intercept the click event of our links
$(".loadme").click(function(e){
// Prevent them from leaving the page
e.preventDefault();
// Fire off a request for their content
$.get($(this).attr("href"), function(data) {
// Load their content into a container on our page
$("#content-viewer").html(data);
}, "html");
});
});
Note that I referenced a #content-viewer. You would need to have this on your page someplace:
<div id="content-viewer">I will show the content .loadme links!</div>
Your approach is a bit hacky, to say the least. Now you need to have the javascript stuff on every link, whereas the correct way to do it would be to bind the functions separately. You could do something like this instead:
Link
Which would output to the browser as:
Link
And in a separate Javascript file:
$('a.some_links').click(function() {
$("#link"+$(this).attr('rel')).load($(this).attr('href'));
return false;
});
If I understood your code correctly, this will do the exactly same thing – loading the content from linkur.php with passed variables to #link+rid element.