I have an opensliding side panel in wich I display content. I have a working example, but it works on an ajax var that I've put in. I would like to scan a folder for the files loaded in my ajax code. How can I pass folder content into my ajax?
PHP
<div class="standorte-wrapper">
<div class="panel left"><!-- start pannel left -->
<div class="pan-item tl">
<button class="show-hide" data-ajaxFile="0">OPEN</button>
</div>
<div class="pan-item tr">
<button class="show-hide" data-ajaxFile="1">OPEN</button>
</div>
<div class="pan-item bl">
<button class="show-hide" data-ajaxFile="2">OPEN</button>
</div>
<div class="pan-item br">
<button class="show-hide" data-ajaxFile="3">OPEN</button>
</div>
</div><!-- end pannel left -->
<div id="open" class="panel right"><!-- start sliding pannel right -->
<div class="close-button">
close
</div>
<div id="content">
<div id="php-content"></div>
</div>
</div>
</div>
AJAX
$(document).ready(function() {
var ajaxUrls = [
'/standorteContent/brauerstrasse.php',
'/standorteContent/gutterstrasse.php',
'/standorteContent/kauffmannweg.php',
'/standorteContent/konradstrasse.php'
];
var ajaxFiles = [];
for (var i = 0; i < ajaxUrls.length; i++) {
$.ajax({
method: 'GET',
url: ajaxUrls[i],
success: function(data) {
//console.log(data);
ajaxFiles.push(data);
}
});
}
$('.adres-wrap > button').on('click', function() {
if ($('.panel.left').hasClass('open')) {
//alert('already open');
} else {
$('.panel.left').addClass('open', 1000, "easeInBack");
$('.standorte-wrapper').addClass('expand');
}
$('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
setTimeout(function (){
$('.panel.right div').fadeIn(400);
}, 500);
});
$('#close').on('click', function() {
$('.panel.right div').fadeOut(400);
setTimeout(function (){
$('.panel.left').removeClass('open');
$('.standorte-wrapper').removeClass('expand');
}, 500);
});
});
LOOKS LIKE
QUESTION
How can I change so that I don't have to add data-ajaxFile="nr" manual for every button? And I would like ajaxUrls get the path for php files only in a directory on my server. Can anyone help me out on this one?
Related
I have a custom PHP page in WordPress and need to display buttons connected to a map plugin's shortcode. Each button needs to change the map displayed on the page. The Ajax action is working, but only displays the map's ID, not the full shortcode.
I found a similar post here on StackOverflow doing something similar with Contact Form 7 shortcodes.
Javascript used:
<script type="text/javascript">
$(function () {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$('.button-map').click(function () {
$.ajax({
url: ajaxurl, //global variable provided by WP
type: 'GET',
data: {
'action': 'get_map_frame',
'map_id': $(this).data('id')
},
success: function (data) {
$('#map_area').html(data);
}
});
});
});
</script>
Ajax Call in functions.php:
add_action('wp_ajax_get_map_frame', 'get_map_frame');
add_action('wp_ajax_nopriv_get_map_frame', 'get_map_frame' );
function get_map_frame() {
if (isset($_GET['map_id'])) {
$map_id = (int) $_GET['map_id'];
echo do_shortcode('[cspm_main_map id="' . $map_id . '"]');
}
exit();
}
On-page code HTML:
<div class="w-col w-col-12">
<div class="column-29 w-col w-col-3">
<div><a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5425">Dining and Drinks</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5695">Entertainment and Transportation</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5697">Shopping</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5698">Pets and Parks</a>
</div>
</div>
<div id="map_area"></div>
</div>
What I'm trying to achieve is each button pulls up its individual map associated with the map ID. Currently when the button is clicked it only returns the actual map ID on the page, but not the rest of the shortcode to display the map intended.
http://aopmap.villagegreenmarketingservices.com/test123/
I have a page using bootstrap 3 framework that has a button which when pressed collects data from another page (mydata.php) with ajax and echoes it out within <div id="results"> on the page. The code works fine but as soon as I add <div class=\"col-xs-6\"> to mydata.php nothing appears on the page although I can see it within firebug.
If I change $("#results").append(html); to $("#results").text(html); the html echoes onto the page but as text without any formatting. If I remove <div class=\"col-xs-6\"> from mypage.php the data gets displayed on the page as expected. Why is the data from mydata.php not displayed when I add <div class=\"col-xs-6\">?
<div class="container">
<div class="row">
<div class="col-xs-12 col-centered">
<div class="col-xs-8 col-md-3 col-lg-3">
<button type="submit" name="btn" value="search" id="myButton" class="search_button btn btn-small btn-default btn-pull-right">Press</button>
</button>
</div>
</div>
</div>
<div class="row">
<div id="results"><!--data displayed here-->
</div>
</div><!--Row-->
</div><!--Cont-->
jQuery
$(document).ready(function(){
$(function() {
$("#myButton").click(function() {
var btn = $("#myButton").val();
var data = 'btn='+ btn;
// if location is not empty
if(data) {
// ajax call
$.ajax({
type: "POST",
url: "mydata.php",
data: data,
success: function(html){
$("#results").append(html);
}
});
}
return false;
});
});
});
mydata.php looks like this:
<?php
if (isset($_POST['btn'])) {
echo "
<div class=\"col-xs-6\">
<ul>
<li><h4>Data in this Div</h4></li>
</ul>
</div>
<div class=\"col-xs-6\">
<ul>
<li><h4>And Data in this Div</h4></li>
</ul>
</div>";
}
?>
if you do not add jQuery library then include it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-centered">
<div class="col-xs-8 col-md-3 col-lg-3">
<button type="submit" name="btn" value="search" id="myButton"
class="search_button btn btn-small btn-default btn-pull-right">Press
</button>
</button>
</div>
</div>
</div>
<div class="row">
<div id="results"><!--data displayed here-->
</div>
</div><!--Row-->
</div><!--Cont-->
<script>
$(document).ready(function () {
$(function () {
$("#myButton").click(function () {
var btn = $("#myButton").val();
var data = 'btn=' + btn;
// if location is not empty
if (data) {
// ajax call
$.ajax({
type: "POST",
url: "http://localhost/edit.php", // your file path
data: data,
success: function (html) {
$("#results").append(html); // if you want to replace results div then change $("#results").html(html);
}
});
}
return false;
});
});
});
</script>
it is working fine my side, i have tested in my local side
this is output:
Removing the ajax part works without problems... Are you sure you are receiving that exact HTML?
$('#result').append("<div class=\"col-xs-6\">"+
"<ul>"+
"<li><h4>Data in this Div</h4></li>"+
"</ul>"+
"</div>"+
""+
"<div class=\"col-xs-6\">"+
""+
"<ul>"+
"<li><h4>And Data in this Div</h4></li>"+
"</ul>"+
"</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
</div>
$('#myButton').on('click',function(){
var form = jQuery("#form");
$.ajax({
url: 'mydata.php',
type: 'POST',
data: form.serialize(),
cache: false,
dataType : 'json',
success: function(data){
if(data==true){
$("#results").append(data);
}
if(data==false){
}
},
error: function(){
}
});
return false;
});
I'm using this plugin to upload files:
https://github.com/hashmode/cakephp-jquery-file-upload
The upload works, but the progress bar always completes before the file is uploaded. Prior to using this plugin, I attempted to use the blueimp uploader standalone. I had the same problem.
Any idea how to make the progress bar work properly?
I'm testing this via a proxy. I can see the proxy is still awaiting the response. Yet the progress bar is 100%.
This is the code I'm using in my view:
<?php echo $this->JqueryFileUpload->loadCss(); ?>
<?php echo $this->JqueryFileUpload->loadScripts(); ?>
<div class="row">
<div class="col-md-12">
<div class="card ">
<div class="header">
<h4 class="title">Import Session Data</h4>
<p class="category">category text</p>
</div>
<div class="content">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
</div>
<div class="footer">
<hr>
<div class="stats">
<i class="fa fa-history"></i> footer
</div>
</div>
</div>
</div>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = '/sessions/import';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
success: function(response) {
var json = $.parseJSON(response);
alert(json['message']);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
In my controller I have:
public function import()
{
if ($this->request->is('post')) {
$options = array(
'max_file_size' => 2048000,
'max_number_of_files' => 10,
'access_control_allow_methods' => array(
'POST'
),
'accept_file_types' => '/\.(png|jpg)$/i',
'upload_dir' => '../uploads/workbench/', //WWW_ROOT . 'files' . DS . 'uploads' . DS,
'upload_url' => '/files/uploads/',
'print_response' => false
);
$result = $this->JqueryFileUpload->upload($options);
print_r($result);
die();
}
}
Solved. It was something to do with me using a proxy. When I removed the proxy it worked fine. No idea why that happens though.
I'm currently using JQuery UI Dragabble, Droppable and sortable. I have two div sections at top and bottom of my php file were i'm dragging and dropping contents from bottom to top div sections.
In top div section i'm performing Sortable JQUery opertions my next requirment is when i perform sorting operation in top section its order should be automatically updated in my MYSQL DB i gotta stuck like how to pass the sorted order to my MySQL db via ajax and php file. Can somebody suggest some help in Achieving it!
Thanks!
Html/PHP code
<div class="drop_list">
<ol id="sortable" style="list-style:decimal;"></ol>
</div>
<div class="sort_list">
<ul id="draggable">
<?php
for($i=1;$i<=5;$i++)
{
?>
<li data-id='article_<?php echo $i;?>' class="draggable_li qitem" >
<div class="main_div">
<div class="secondary_div">
<div class="form_div">
<form>
<input style="width:15px;" type="checkbox" class="hello"/>
</form>
</div>
<label class="item_div">
<span class="item">Item = <?php echo $i; ?></span>
</label>
</div>
<button class="hello btn btn-success add_top">
Add to Top Stories
</button>
<span class="AH_section" style="display:none;float:right;">
<input type="checkbox"/>Home Section
<input type="checkbox"/>App Home Section
</span>
</div>
</li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</div>
JQuery code
$(document).ready(function() {
$("#sortable").sortable({
revert: true,
refreshPositions: true ,
helper : 'clone',
cursor: "move",
delay: 1,
tolerance: 'pointer',
revert: 50
/*stop:function(event,ui){
var data = $(this).sortable('serialize');
}*/
}).serialize();
$("ol li").disableSelection();
$(".sort_list li").draggable({
//containment : "#container",
tolerance:"pointer",
helper : 'clone',
refreshPositions: true ,
revert : 'invalid',
opacity:.4,
});
$(".drop_list ol").droppable({
revert:true,
//hoverClass : 'ui-state-highlight',
greedy: true,
refreshPositions: true,
drop : function(ev, ui)
{
$(ui.draggable).clone().appendTo(this);
if($(this)[0].id === "sortable")
{
console.log($(this).closest("button").find('.hello'));
$(this).find('.hello').hide();
$(this).find('.AH_section').show();
//$(ui.draggable).draggable( 'disable' ); //this will not append dragged list at top of the container
ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
return true;
}
}
});
});
change data-id='article_<?php echo $i;?>' to id='<?php echo $i;?>'
add this to your sortable(),
update: function (event, ui) {
var serial=$(this).sortable('serialize');
save_sortable(serial);
}
so here on update, you are calling save_sortable() function, from ajax , update your db in the order returned from sortable()
function save_sortable(serial)
{
$.ajax({
url: "path to your file to update in db.",
type: 'POST',
data: serial,
success: function (data) {
//alert(data);
}
});
}
You can add some id attribute to li, in my case will be get_id.
and then call below function onDropSendSort(); when you want, ie after drop.
<li data-id='article_<?php echo $i;?>' get_id="<?php echo $object_id; ?>" class="draggable_li qitem" >
function onDropSendSort() {
var data = [];
$('#draggable li').each(function() {
var id = $(this).attr('get_id');
data.push(id);
});
// data = [id_1, id_3, id_n];
$.ajax({
url: 'some_url',
type: 'POST',
data: {sort: data},
complete: function(res) {
console.info(res);
}
});
}
I don't know what I am doing wrong, but the PHP does run (I can notice it with the POST data on Firebug), but isn't echoed.
Here's my JS file :
$('.table_item').click(function() {
var ticket_nbr = $(this).children('td').attr("class");
var dataString = 'ticket_nbr='+ ticket_nbr;
$.ajax({
url: 'display.php',
type: 'POST',
data: dataString,
success: function(data) {
console.log(data);
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
error: function(e) {
console.log(e)
}
});
});
and the called PHP file :
if($_POST)
{
$ticket_nbr=$_POST['ticket_nbr'];
?>
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
<?php
}
And here's the output I get on Firebug :
<div id="DisplayTicket" class="ui large modal transition hidden" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
ticket_3 // The post data sent
</div>
<div class="content">
<p>Merci, <span class="test_display"></span>.
</div>
</div>
Any help or hint would be great !
Thanks.
You're returning HTML but never adding it to body
success: function(data) {
console.log(data);
$(data).appendTo('body'); // <----------------------
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
Also, ideally dataString = 'ticket_nbr='+ ticket_nbr should be dataString = {'ticket_nbr': ticket_nbr}
You have to show/append the below div in the body or div.
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
then use the below code on success.
$('#DisplayTicket').addClass('active');
$('#DisplayTicket').css('visibility','visible');