The problem:
I have a series of 'accept' buttons, on click it opens a lightbox (a modal- using bootstrap), of course this is done without refreshing the page.
On the lightbox I need to show information regarding what is being accepted (therefore I need to pass a PHP variable to the lightbox). So the problem is how can I pass on a variable on click without refreshing the page? I tried using javascript, but the thing is once I set up a variable in JS I can't get that variable to PHP without refreshing the page.
The button has this code.
<button class="btn btn-acceptColor m-t-lg">Accept</button>
The other code isn't relevant for the purpose of this question. I just need the concept of how to actually do it.
Any help!?
there are many examples.
I provides some links, you can use them in your code as you suitability..
1). Ajax Tutorial
2). jQuery Ajax POST example with php
3). jQuery Ajax POST example with php
4). show data in lightbox
5). How to add jquery lightbox to content added to page via ajax?
I hope above links helpful for you
$(".btn-acceptColor").click( function (){
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$.ajax({
type: "POST",
url: "exaple.php",
data: person,
success: function(msg) {
var msg = $.parseJSON(msg);
if(msg.success=='yes')
{
return true;
// fill you light-box form get value from example.php page
}
else
{
alert('Server error');
return false;
}
}
});
});
Related
I am searching this for an hour but I dont get any perfect solution for it. I want pagination which doesnot load all data at once and loads only what are currently showing on the page. I dont want to refresh whole page while going from 1st page to any other page of pagination. And I am preffering to use JQuery. Just give me any good pagination link. I dont have tables I have divisions for pagination
This would be pretty simple to do by hand, no libraries needed. You'd put an event listener on the buttons
$('#button').on('click', function(){
changePage($(this).data('page-number');
}
var changePage = function(pageNumber)
{
$.ajax({
url: 'whatever.php',
data: {
page_number: pageNumber
},
success: function(r){
var html = //build html based on ajax respone
$('#page-wrapper').empty().append(html);
}
});
}
Realistically though if there are not going to be a huge amount of pages, you should get the data for ALL the pages and simply store it in Javascript variables and then access those variables when you click a page number.
I´m using AJAX to execute some server-side actions and refresh a table inside the page without reloading the page itself. All works fine at first view. But I wrote a function in PHP to send an email and execute it via AJAX. When I´m starting this action for a second time old responses gets triggered.
What exactly happens:
I´m clicking a Button to execute the "Sendmail-Action"
a Modal asks me if I want to execute the action and I´m clicking yes
a PHP-Script gets executed and sends the email
the Modal gets closed after the PHP-Script finishes (~2s)
the table (with emails and so on) gets refreshed and the status updated
What happens next:
I´m clicking a Button to execute the "Sendmail-Action" for the same
or another entry in my table
a Modal asks me if I want to execute the action and I´m clicking yes
the Event triggers twice / 4xAjax-Request instead of 2 (I can see it in my Chrome-Console)
the Modal closes and 2 Mails sended
What I´ve tried to get rid of this behaviour:
checked my JS with JSHint
checked my PHP-Code (no errors in apache error.log)
redesigned the PHP-Script (Sendmail), now the AJAX executes a function
tried different browsers
deactivated AJAX-Caching
completely deactivated Caching with Apache (correct Headers)
deactivated Session-Caching in my php.ini (I don´t use sessions)
unset all variables in PHP
cleared the cache for all of my browsers
checked all headers
searched several hours for solutions
More information about my setup:
jQuery 2.1.4
php 5.4
Apache 2.2
I can´t find a solution to my problem and maybe this is caused because I´m adding the content dynamically to the table. I had the same problem in the past and I´m thinking the Modal (which is also dynamic) triggers the click on the "Yes-Button" twice.
You can put your ajax click handler outside of that function:
$(document).on('click', '.email-resend, .email-send, .show-doc, .show-acc, .more-acc, .no, .yes, .termin', function(){
$.fn.doAction(classname, comEntry);
});
As you mentioned that you have placed this in the function. Instead you should put this outside of it:
$(document).on('click', '.bt-ok', function(){
$.ajax({
....
});
});
Edit by #pandora: Or just use a second function (in my case) like this:
$(document).on('click', '.bt-ok', function(){
$.fn.sendRequest($('#modal').attr('data-1'), $('#modal').attr('data-2'));
});
Then I can call the function like this and execute the AJAX:
$.fn.sendRequest = function(data1, data2) {
$.ajax({
url: 'target.php',
cache: false,
data: { gimme1 : data1, gimme2 : data2 },
success: function(response) {
// Show Error
if(response.length > 0){
alert(response);
}
// Reload Content
$.fn.Reload('','');
// Close Modal
$('#modal').css({'display' : 'none'});
}
});
};
I am confused with the following problems in using Ajax and History:
Specifications:
I have a page that calls another page using Ajax.
Now the loaded page has datatables which inturn uses Ajax to get data(As of now 2 ajax calls)
I have used history.js for page navigation, which uses common ajax call for loading the content in page div
Now, I face with the following problem:
For first datatable page call, I get one ajaxcall.
Surprisingly, when I navigate to another page using history and call the datatable page, the ajax call now doubles. It goes on in a linear manner.
This is a new problem I have been facing while loading a page using ajax which inturns contain Ajax call. What can be the major cause of this problem? Also, what is the solution of this problem?
My common code looks like this:
<script>
var index=function(url,update_id,state){
$.ajax({
url: url,
}).done(function(data) {
$("#"+update_id).html('');
$("#"+update_id).html(data);
if(state == 1){
history.pushState({url: url,id:update_id},"name",url);
}
});
}
jQuery(document).ready(function($) {
$(document.body).on('click','.link_click',function(){
var url = $(this).attr('href');
var update_id = $(this).attr('update_id');
index(url,update_id,1);
})
});
window.addEventListener('popstate', function(event) {
if(event.state.url != null){
index(event.state.url,event.state.id);
}
});
</script>
My link looks like this:
My Contact
I am using this common code for linking every page using Ajax and history
Are you using a framework for your project? I've noticed similar behaviour before using the Yii Framework. What I noticed is that if you create your objects with a static Id, it will cause a multiplication in the number of ajax calls.
Try giving your objects unique ids so that the events don't get clogged.
Just an idea: Does the page loaded with Ajax by any chance attach the click-event on the "link_click"-links again?
Currently I am facing a problem with Jquery ajax call. The Ajax call in my jsp takes more time to load data where as javascript form submit takes less time.
Using javascript form submit i am unable to load the content form result in another tab.
Could any one help me on this
Javascript Function
function getCircuitMaintenanceDetails(event,refno)
{
var eve = event;
var ref_no = refno;
var url = "circuitMaintenanceDetails.do?EVENT_KEY="+eve+"&REF_NO="+ref_no;
document.getElementById('sessReferenceId').value=refno;
$.ajax({
type:'post',
cache:false,
url:url,
beforeSend: function ( xhr ) {
$('#content02').html('<div class="loading"><center><img src="../images/ajax-loader.gif" alt="Loading..." /><center></div>');
},
success:function(data){
window.scrollTo(0,0);
$('#content02').html(data);
}
});
}
Above javascript function loads data in another tab using ajax call. It takes more time
The jsp code has been placed in http://jsfiddle.net/mJ8m3/
I am using IE8 and Jquery 1.7.1 in my jsp file. Any one guide me how to improve the performance of Ajax call or could guide me how to load data in second tab ie (content02) tab using javascript function.
If I use document.forms[0].submit is loading the content in the same tab instead of tab2.
After Submitting the form in javascript I am unable to load the content in another tab defined using div tag
Any one can help me in this problem. Really need a solution for this. Help me to increase the speed
You can use jquery's load() method.
A page source snippet has the HTML:
Next
I know that the "#" is a placeholder that is handled by Javascript on the page. I believe the relevant Javascript snippet is:
function changepage(start) {
makerequest('/ajax/inventory_search.php', collectformvalues(start));
}
// do not flash the search options when using next/prev - just when the search is changed
function changepageforpagerlink(start) {
doEffectOnAjax = false;
changepage(start);
return false;
}
I need to know if there is a way that I can submit a URL and have the next page's page source returned. Is there a URL that is submitted at all in the above example?
My environment is VBA. I'm not using a browser, just communicating with the server. One thing I thought of is to mimic the "makerequest" function, but I don't know how to do that or if would even work. I know at the heart it's all just sending text to the server and receiving text back so I would think there is a way. . .
Bottom line is that I need to access the page source from the next page via VBA and not using a browser.
you can use JQuery to achieve this:
function changepage(start) {
makerequest('/ajax/inventory_search.php', collectformvalues(start));
}
changes to
function changepage(start) {
$.ajax({
type:POST,
url:"/ajax/inventory_search.php",
}).done(function(){
//do anything when it's done.
});
}