I am making a test project in PHP. I want to show some information on click of button named 'View Details'. But there are 3 different buttons like this. Each are showing different information. I want to manage like user can see only one information at a time. Can Any one help me?
Thanks in advance.
You will manage flag to show/hide your information.
e.g if any one click on view details button you have set flag=1 in javascript and check this flag on another button click if is already 1 then does not display any information.
You could create a wrapper div say "resultsDiv" and display the response (ajax) from your php file to this DIV. So that only one information is seen at a time, like:
//First ajax call on first button click,
$.ajax({
...
..
success: function(resp) {
$("#resultsDiv").html(''); //clear the DIV html
$("#resultsDiv").html(resp); //place the response
}
});
//Second ajax call on second button click,
$.ajax({
...
..
success: function(resp) {
$("#resultsDiv").html('');
$("#resultsDiv").html(resp);
}
});
//more ajax calls
//your div that will hold response of ajax call on various button clicks
<div id="resultsDiv"></div>
Did you mean something like this
Related
i need to call a click event from another file...
On my index.php I have a 'select' to choose a name, once I did, I call by Ajax a form by the name I choosed before, this form is on espacio.php, once I complete the form I must have to click a button to save the info, when I click this button the info are passed by Ajax to espacio2.php and there is here where I show a success or a failure message.
This message shows on my index.php and this is good, but I want to hide it after a few seconds.
How can I call the click event from espacio.php?
This is a code that works only if a click is pressed on the same page:
$(document).ready(function(){
$(".botoncete").click(function(){
$(".prueba").fadeIn();
Esconder();
});
function Esconder(){
setTimeout(function() {
$(".prueba").fadeOut();
},2000);
}
});
I've already solved the problem, thanks to #Barmar, and as he said: "If you're sending the data by AJAX, you stay on the same page".
I really don't know what was I thinking...
I have a table with a bunch of products from my database table. Each product has an update button which will produce a populated form via ajax for the user to ammend any details they wish.
On submit, I want to update the database and then return back to the page I was just on showing real-time updating data. With anything else I do, I send back a view to the ajax success function and it gets displayed. Only I can't seem to do it with this. I take the action and method out of my form tag and let an ajax function handle it, but it doesn't return a view, it just displays the view only, whereas I want my div to go into a specific div on the existing page
/***** submit update form *****/
$(document).on('click', '#updateSubmit', function() {
$.ajax({
type: "POST",
url: 'products/updateProduct',
success: function(data) {
$('#viewProducts').fadeIn(1000, function(){
$(this).html(data);
// THIS IS WHERE I WANT MY VIEW TO BE RETURNED TO(the #viewProducts). CAN THAT BE DONE?
})
} // end success
}); // end ajax
}); // end submit event
Try to use
url: '/products/updateProduct' in place of url: 'products/updateProduct'
if still not works try to use full path in place of relative path............
I have a page set-up, with several divs.
For now all we need is
<div id="main">...</div> & <div id="sidebar">...</div>
Each div has code such as:
<?php include("page.php") ?>
The main div does all the work, and includes a JavaScript function. E.g. at the moment the user can click a button to remember an item displayed in a table.
Am I able to only reload the sidebar instead of the whole page when the user calls this function?
I am posting the function here, and all I need now is to be able to refresh the sidepanel and its included php files if that is possible? I assume something along the lines of this could do the job? or am I wrong? load("#sidebar")
function saveToFavorites(code)
{
$.ajax({
async:false,
type: "POST",
url: 'formPostsUser.php?reqtype=addToFavorite',
data:'coursecode='+ code,
success: function(data)
{
$('.result').html(data);
if(data != "")
{
alert(data);
load("#sidebar")
}
}
});
}
Kind regards
Alex
Happy about any and every reply and hint ;)
First thing
<div="sidebar">..</div>
The above markup is wrong HTML. You should give the sidebar as the value of your properties such as id or class
<div id="sidebar">..</div>
Loading the Sidebar content
You can use jQuery ajax to load content of this div using jQuery load method like this
$(function(){
$("#sidebar").load("yourPHPPageToReturnSideBarContent.php");
});
Assuming yourPHPPageToReturnSideBarContent.php is the PHP page which renders the HTML Markkup for the sidebar. Note that this will load the content on the document ready event.
Loading the side bar content on an event
If you want to load it on a purticular event like a button click you can do it like this
$(function(){
$(document).on("click","yourButtonId",function(){
$("#sidebar").load("yourPHPPageToReturnSideBarContent.php");
});
});
The above script will load the side bar content on a button click. The button's id is e "yourButtonId" in this example.
Note that i used jQuery on here to bind the function because it will take care of current element and future element in case if you want to load the markup which contains the button dynamically.
Can I make an AJAX call immediately after loading a page? To be more specific, I have an ajax action on click of some html tag (say in page 1). Now when I come to the same page (page 1) from some other page (say page 2), (i.e.. on ready of the document) can I make that ajax call which is present in the onclick of that appropriate html tag? I am using PHP as server side script..
There were confusion on my question.. Let me explain more.
I have an phtml page where there are lot of ajax calls on click of various tags.
Lets say, tag1 has send-message functionality ajax call which on click loads a compose message part of html.
Similarly tag2 has photo display funcitonality ajax call which on click loads the photo display part of html.
Now I'm in page 2 which is a search result page Where I have a link for page 1. That link is send-message link. So now I have to come to page 2 and with compose message part html loaded. I want to load it via ajax which will be performed on clik of the send-message link (tag 1)in page 1. How to accomplish this? How will I inform to page 1 to load the compose message part of html through ajax?
you can call that function explain below
<script type="text/javascript">
function_name();
</script>
Im not sure what you want to achieve here but if you're asking if you could do AJAX on ready of the document, then i think you can..
Check this out in jquery
$(document).ready(function(e) {
$.ajax({
type:'POST',
url:g_site_path+'search/agentpopup',
dataType:'html',
data:data,
success:function(html){
$("#agentpopup").html(html);
}
})
}
$_SERVER['HTTP_REFERER']
Is the php data-feild that will tell from where the page request is coming (Ex. Page 2 has requested Page 1). Note that HTTP-Referer is by its very nature risky and can easily be spoofed. To test for document ready, you can use something like jQuery
$(document).ready(function() {
$.ajax('your_ajax_script.php', function(result) {
/* Do what ever you want to do of result*/
console.log(result);
});
});
I am working with a dynamically generated page written in PHP. The divon the page contain contents listed FancyBox links that open editing screens.
Once editing is complete and the user closes the FancyBox modal the changes
need to be reflected on the parent page.
Right, so I was able to find a solution that refreshes the entire page on submit
using
parent.location.reload (true);
to refresh the entire parent page. But, that causes a browser prompt
that is confusing to users and a bit of over kill as I really only
need the information edited to refresh.
how can I get just a single div to refresh on submit as
apposed to the entire page??????
You need to submit the form through AJAX. Since your using something that uses jQuery, you can use it to do it.
Here you can find a tutorial on how to do it
I think the best way is loading page fragments with .load().
something like,
$('#pageNeedToBeRefreshed').load('test.html #pageNeedToBeRefreshed');
User ,
It should be pretty easy
have a div place holder like below
<div id="dataToRefresh"> </div>
Once you close the dialog, have a event handler...
$('dataToRefresh').html('testing'); // give your data here
it should upate the parts of the page
let me know if you need anything else
please go thruogh .html api for more info
http://api.jquery.com/html/
Suppose you have the below div to refresh:
Then write
$("#dataToRefresh").load();
Might it will be helping you
Instead of using submit in html you can submit your form using the ajax -
$('#formid').submit(function(){
var data = $(this).serialize(); //this gives you the data of all elements of form in serialized format
$.ajax({
type: 'POST',
dataType:"json",
url: 'your url',
data: data,
success: function(data){
//replace the contents of the div you want to refresh here.
}
});
});
jQuery('#id_of_div').load('/url/to/updated/html');
See jQuery docs for load()