I am using wpdatatables to display data.
I have added MySQL Query in backend, and that query has 2 dynamic parameter like
SELECT some fields
FROM tbl1 tb1
JOIN tbl2 tb2
ON some conditions
JOIN tbl3 tb3
ON some conditions
WHERE DATE(Date) BETWEEN '%VAR1%' AND '%VAR2%';
wpdatatables Generate shortcode like [wpdatatable id=some_id] ,
I have create 2 date-picker for Start Date and End Date on Frontend.
Now I have to pass dynamic parameter like [wpdatatable id=some_id var1="strt_dt" var2="end_dt"]
So to get strt_dt and end_dt, I have call AJAX and pass parameters.
My problem is I am showing all this data inside popup.
I mean when user clicks on See Report Button
one popup will be open. Data also Displayed correctly. But it showing without wpdatatables Layout.
It is not Considering wpdatatables JS or CSS
Here is my AJAX Callback Function :
public function get_datatable_data() {
echo do_shortcode('[wpdatatable id=some_id var1="'.$_POST['strt_dt'].'" var2="'.$_POST['end_dt'].'"]');
wp_die();
}
Here is Code in which I am appending data :
var params = {"strt_dt":strt_dt,"end_dt":end_dt,action:"get_datatable_data"}
jQuery.post(ajaxurl,params,function(data){
if(data){
jQuery(".some class").empty().append(data);
}else{
jQuery(".some class").empty().append("No data Found");
}
This would have been possible if you are using normal datatable where you can re-initalize datatable on ajax success by using following code.
$("#div").dataTable().fnDestroy()
$("#div").dataTable();
But if you are using Plugin then there is no direct way to achive this, one possible solution is to create a normal page with datatable shortcode in it and then in you ajax callback you call that page in iframe.
for eg: you create page www.mysite.com/datatable - this page will have the actual shortcode
public function get_datatable_data() { ?>
<iframe src="www.mysite.com/datatable" height="200px"></iframe>
<?php
wp_die();
}
this will allow datatable to get initalize in iframe.
Related
I am trying to filter group with meta query with reference of bellow reference link code
https://gist.github.com/boonebgorges/2638943
This link code i have added in my function.php
and bellow code of spinet i have added in /wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/groups/index.php in div groups dir-list
$meta_filter = new BP_Groups_Meta_Filter( 'group-custom-field-cat', 'Art and Culture' ); //print_r($meta_filter);
echo #json_decode($meta_filter, true);
Now if you visit the group page this code filtering the group which have meta key=group-custom-field-cat and value=Art and Culture.This workaround are good working.
On this same page i have to add one select box with option Art and Culture
If user select this option it will call the ajax query and run the bellow code so it will filter the group if have meta key and value like bellow.so how do i call ajax.
<?php if ($groupname=="Art and Culture"){
$meta_filter = new BP_Groups_Meta_Filter( 'group-custom-field-cat', 'Art and Culture' );
echo #json_decode($meta_filter, true);
}
?>
working example:-http://tamrielfoundry.com/groups/
Can anyone know about this how to call ajax query which will fit to my need.
I want to add a show sucess message using :-
session->flash(); ?> in view and added the message in controller :-
Session->setFlash("Record has been saved successfully."); ?>
But I donot want to reload the whole page.
I am just inserting the new record using ajax.. and refreshing the div having list of all record.
session->flash(); ?> this works if i reload the whole page.
how can I show message once the record is saved using ajax.
Solutions (i recommend the first one):
Create AJAX method in controller that return 200 code with JSON/HTML record's data or any other error code if sth goes wrong. Then in js do:
$.ajax({ ... }).done(function( data ) {
// Success, show the record and message
$('#flash').text('Success!').show();
// ...
}).error( function() {
// Error
$('#flash').text('Error!').show();
});
Refresh the records list by calling ajax method and return not only the view with list of all records, but also a flash message (in the same view). Then show it or move using javascript.
Is it possible to insert a view using javascript?
I wish to perform an ajax call, get the data, then insert a view in to a page and provide the data from the ajax call to that view?
Is this possible?
Yes you can use the render method on a view. Like so;
$view = View::make('your.view')->render();
And then return the html (which is the output) from your controller method by returning the data stored in $view.
If you need to add any data to the view just add the second parameter to the view make.
alternatively you can do this,
set the route for pages you want to call.
e.g.,
Route::get('callajax','PagesController#showAjax');
and then in PagesController#showAjax you return the view.
e.g.,
public function showAjax()
{
return View::make('ajaxpages');
}
and then in ajax call you code this
$.ajax({
url:'callajax',
});
Inside a component's view, I have something like this:
<?php echo TestcompHelperFind::loadStates(...); ?>
<?php echo TestcompHelperFind::loadCounties(...); ?>
The above static functions load <select> dropdowns with the state names and countries respectively.
The class TestcompHelperFind is located in the file /administrator/components/com_testcomp/helpers/find.php.
How do I load States dropdown list based on the country selected using AJAX? I'm not sure what url I should provide in the ajax function.
On the client, you will need a function that watches the country select for changes, and when it happens calls the appropriate url with a callback that will populate the counties select.
On the server, you need to output the select content.
Since you have the html output already working, let's use this approach. As an alternative you could have your server method return a json object and use the javascript to parse it and populate the select. But let's stick to html communication, i.e. the server returns the html contents of the select.
1. On the server
1.a. Output the counties select
We only need to return the result of the TestcompHelperFind::loadCounties(...); to the ajax call. This is achieved easily writing a new method in the component's controller, i.e. the controller.php in the root of the component folder or one of the sub-controllers if appropriate. It's up to you to place it in a meaningful spot.
Inside the controller simply add a new public task such as
class SomethingController extends JController
{
public function getCountiesHTML() {
$input = JFactory::getApplication()->input;
$country = $input->getCMD('filter_country');
// load helper if necessary, then:
echo TestcompHelperFind::loadCounties($country);
exit; // this will stop Joomla processing, and not output template modules etc.
}
Please note the exit; at the end, this will make Joomla output only the component's output (our echo) and not the whole template/modules etc.
1.b Add an ID to the country and county selects so that it will be possible to manipulate them on the client; I'll assume filter_country and filter_county ;
2. On the client
you will want to invoke the url
index.php?option=com_something&action=getCountiesHTML&filter_country=UK
when the country select is changed. It will also need to cancel any pending requests to avoid overlapping messages. To keep things simple, let's assume you use a library to handle Ajax, I'll write an example for jQuery:
<script>
var xhr;
jQuery(function($) {
$('#filter_country').change(function(){
var filterCountry = $('#filter_country').val();
if (xhr && xhr.abort) {xhr.abort();xhr=false;}
xhr = jQuery.ajax(
url: 'index.php',
data: 'option=com_something&task=getCountiesHTML&filter_country='+filterCountry,
success: function(data){
jQuery('#filter_county').replaceWith(data);
}
);
});
});
</script>
For cancelling the previous request, please see a dedicated answer such as this one.
When the following (PrimeFaces) button is pressed
<p:commandButton value="Search"
actionListener="#{personController.searchPersons}"
update="resultTable"/>
I load a list of objects and display them in a table on the current page. This is done via an Ajax call.
Now I'd like to do the following: If only one object is found, don't update the result table but link directly to the "detail page". (e.g. detail.xhtml)
How can this be done?
I know that i can control the navigation via the return value of my searchPersons() method. But It doesn't work as it should. I think it has to do with the update="resultTable" of my button. But I currently don't know how to solve this...
You can bring in some JS in oncomplete attribute. It will be executed when the bean action and the partial update is completed. You can change the window location in JS by assigning window.location a new URL.
Here's a random kickoff example, assuming that you've a persons table with id persons and that the detail link look something like <a class="detail" href="detail.xhtml?id=123"> somewhere in the table row.
oncomplete="var $persons = jQuery('#persons tbody tr'); if ($persons.length == 1) window.location = $persons.find('a.detail').attr('href');"