Bootstrap toggle disappears when paginating using Jquery DataTable - javascript

I am working on an application that manages the presence of participants at an event. I have a problem with the bootstrap toggle. I'm using it in a Jquery datatable. As soon as I change the page to go to the next page with the arrows of the table the toggle disappears i have just a white checkbox. I have the impression that it does not reload when the new page is loaded. Somebody would have a solution to this problem. I put the captures of the bugs in attachments.
Thanks in advance.
Bootstrap Toogle:
DEMO
<?php include 'admin/db_connect.php' ?>
<?php
$event = $conn->query("SELECT * FROM events where md5(id) = '{$_GET['c']}'")->fetch_array();
foreach($event as $k => $v){
$$k = $v;
}
?>
<div class="content-header">
<div class="container-md">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0"><?php echo ucwords($event)." Event" ?></h1>
</div><!-- /.col -->
</div><!-- /.row -->
<hr class="border-primary">
</div><!-- /.container-fluid -->
</div>
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-outline card-primary">
<div class="card-header">
<div class="card-tools d-flex justify-content-end" style="width: calc(40%)">
<a class="btn btn-block btn-sm btn-default btn-flat border-primary col-sm-4 mr-2" href="javascript:void(0)" onclick="location.reload()"><i class="fa fa-redo"></i> Rafraîchir</a>
<?php if($status != 2): ?>
<!--<a class="btn btn-block btn-sm btn-default btn-flat border-primary new_attendee m-0 col-sm-4" href="javascript:void(0)"><i class="fa fa-plus"></i> Nouveau participant</a>-->
<?php endif; ?>
</div>
</div>
<div class="card-body">
<?php if($status == 2): ?>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> L'inscription et la participation à l'événement sont désormais closes. </div>
<?php endif; ?>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Noms & prénoms</th>
<th>Sexe</th>
<th>Email</th>
<th>Participation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$qry = $conn->query("SELECT a.*,concat(a.lastname,', ',a.firstname,' ',a.middlename) as name,e.event FROM attendees a inner join events e on e.id = a.event_id where e.id = $id order by unix_timestamp(e.date_created) desc ");
while($row= $qry->fetch_assoc()):
?>
<tr>
<th class="text-center"><?php echo $i++ ?></th>
<td><b><?php echo ucwords($row['name']) ?></b></td>
<td><b><?php echo ucwords($row['gender']) ?></b></td>
<td><b><?php echo $row['email'] ?></b></td>
<td class="text-center">
<input type="checkbox" name="status_chk" id="" data-bootstrap-switch data-toggle="toggle" data-on="Present" data-off="Waiting" class="switch-toggle status_chk" data-size="xs" data-onstyle="success" data-offstyle="danger" data-width="5rem" data-id='<?php echo $row['id'] ?>' <?php echo $row['status'] == '1' ? 'checked' : '' ?>>
</td>
<td class="text-center">
<div class="btn-group">
<?php if($status != 2): ?>
<button href="button" class="btn btn-primary btn-flat edit_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-edit"></i>
</button>
<?php endif; ?>
<button href="button" class="btn btn-info btn-flat view_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-eye"></i>
</button>
<?php if($status != 2): ?>
<button type="button" class="btn btn-danger btn-flat delete_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-trash"></i>
</button>
<?php endif; ?>
</div>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_attendee').click(function(){
uni_modal("Détails du participant","view_attendee.php?id="+$(this).attr('data-id'))
})
$('.new_attendee').click(function(){
uni_modal("Nouveau participant","manage_attendee.php?event_id=<?php echo $id ?>","mid-large")
})
$('.edit_attendee').click(function(){
uni_modal("Modifier les détails du participant","manage_attendee.php?id="+$(this).attr('data-id')+"&event_id=<?php echo $id ?>","mid-large")
})
$('.delete_attendee').click(function(){
_conf("Êtes-vous sûr de supprimer ce participant ?","delete_attendee",[$(this).attr('data-id')])
})
$('.status_chk').change(function(){
var status = $(this).prop('checked') == true ? 1 : 2;
if($(this).attr('data-state-stats') !== undefined && $(this).attr('data-state-stats') == 'error'){
$(this).removeAttr('data-state-stats')
return false;
}
var _this = $(this)
// return false;
var id = $(this).attr('data-id');
start_load()
$.ajax({
url:'admin/ajax.php?action=update_attendee_stats',
method:'POST',
data:{id:id,status:status},
error:function(err){
console.log(err)
alert_toast("Something went wrong while updating the attendee's status.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
end_load()
},
success:function(resp){
if(resp == 1){
alert_toast("attendee status successfully updated.",'success')
end_load()
}else if(resp == 2){
alert_toast("Event Registration and Attendance is close.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
setTimeout(function(){
location.reload()
},2000)
}else{
alert_toast("Something went wrong while updating the attendee's status.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
end_load()
}
}
})
})
$('table').dataTable()
})
function delete_attendee($id){
start_load()
$.ajax({
url:'admin/ajax.php?action=delete_attendee',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)
}
}
})
}
</script>

it looks like your problem is in this file:
admin/ajax.php?action=update_attendee_stats
can you share the script here?

Related

How to get data from a form using JS/JQuery and pass info to a controller using yii2?

Im trying the following:
I have a form where some columns are created dynamically depending on the length of a certain array as follows:
<div class="row box-table">
<div class="col-sm-12">
<div class="panel-heading bold panel-title">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> text-center">
<span><?= Yii::t('app', 'Referral Code') ?></span>
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFillers[0]['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<span><?= $key ?></span>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<span><?= Yii::t('app', 'Actions') ?></span>
</div>
<!-- Actions -->
</div>
<!--<div data-key="%{id}" class="hidden row-model">-->
<div data-key="%{id}" class="row-model">
<div class="table row-type edit-model">
<!--<form id="%{id}" method="post">-->
<form id="formulario" method="post">
<?php foreach ($hbwellMarginsDataFillers as $hbwellMarginsDataFiller): ?>
<div class="row">
<!-- Referral Code -->
<div class="col-xs-<?= $widthReferralCodeColumn ?> <?= $style ?> text-center">
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[referralCode]" data-original="%{referralCode}"><?= $hbwellMarginsDataFiller['referralCode'] ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-referralCode"><input type="text" id="hbwell-margins-referralCode" name="HbwellMargins[referralCode]" value="<?= $hbwellMarginsDataFiller['referralCode'] ?>" class="form-control"></div>
</span>
<!-- ORIGINAL -->
<?/*= $hbwellMarginsDataFiller['referralCode'] */?>
<!-- ORIGINAL -->
</div>
<!-- Referral Code -->
<!-- Pay Methods -->
<?php foreach ($hbwellMarginsDataFiller['payMethods'] as $key => $value): ?>
<div class="col-xs-<?= $payMethodsColumnsWidth ?> <?= $style ?> text-center">
<?php if($value === null): ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}">null</span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span>null</span>-->
<!-- ORIGINAL -->
<?php else: ?>
<span data-editable="false" class="toShow" style="display: block" data-id="HbwellMargins[payMethods]" data-original="%{payMethods}"><?= $value ?></span>
<span data-editable="true" class="toHide" style="display: none">
<div class="form-group hbwell-margins-payMethods">
<input type="text" id="hbwell-margins-payMethods" name="HbwellMargins[payMethods]" value="<?= $value ?>" class="form-control">
</div>
</span>
<!-- ORIGINAL -->
<!--<span><?/*= $value */?></span>-->
<!-- ORIGINAL -->
<?php endif ?>
</div>
<?php endforeach ?>
<!-- Pay Methods -->
<!-- Actions -->
<!--<div class="col-xs-<?/*= $widthActionsColumn */?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button"><span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span></a>
<button data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept"><span class="glyphicon glyphicon-ok"></span></button>
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>-->
<div class="col-xs-<?= $widthActionsColumn ?> text-center">
<a id="clickOnEdit" data-editable="false" class="toShow" style="display: block" href="javascript:void(0)" data-id="%{id}" class="edit_button">
<span class="glyphicon glyphicon-pencil v-aling-middle icon edit"></span>
</a>
<!--<button data-editable = "true" class="toHide" style="display: none" data-request-id="10" role="button" class="btn btn-sm btn-request accept" type="submit" onclick="return epaCuliao();">
<span class="glyphicon glyphicon-ok"></span>
</button>-->
<a id="submitChanges" type="submit" onclick="return epaCuliao();" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request accept">
<span class="glyphicon glyphicon-ok"></span>
</a>
<!--<button id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class=" btn btn-sm btn-request cancel">
<span class="glyphicon glyphicon-remove"></span>
</button>-->
<a id="stopOnEdit" data-editable="true" class="toHide" style="display: none" data-request-id="10" role="button" class="hidden btn btn-sm btn-request cancel"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<!-- Actions -->
</div>
<?php endforeach ?>
</form>
</div>
</div>
</div>
</div>
When pencil icon is clicked form can be edited.
Well my problem is how to get all the information from that form and pass it to a function (actionEditHbwellMargins) in a controller (ClinicController).
I started using JS/JQuery copying code from other parts of my project, but I dont know how to get a solution in this case:
$(document).ready(function () {
var editable_fields = {
'referralCode': 'HbwellMargins[referralCode]',
'payMethods': 'HbwellMargins[payMethods]',
};
document.getElementById('submitChanges').onclick = function() {
edit();
}
function edit() {
alert("Epa culiao");
var el = $(this);
var container = el.closest('.row-type.edit');
var form = container.find("form");
var id = form.attr('id');
var values = {};
var params = 'id='+encodeURI(id);
$.each(editable_fields, function(key,key2){
var input = container.find("[name=\""+key2+"\"]");
var val = input.val();
values[key2] = val;
//para generar la url
params += "&"+key+"="+encodeURI(val);
});
var thisapp = this;
axios.post('/clinic/edit-hbwell-margins?'+params)
.then(function (response) {
$.each(values,function(key,val){
container.find("span[data-id=\""+key+"\"]")
.text(val)
.attr('data-original', val);
container.find("[name=\""+key+"\"]").val(val);
});
container.removeClass('editable');
})
.catch(function (error) {
console.log(error);
edit_cancel();
});
}
}
'payMethods': 'HbwellMargins[payMethods]' will be an array with variable length.
Please would you be so kind to help me or giving me some hint to achieve a solution? I'm desperate to find out a solution.
Thank you!

modal not opening after generated

I am in the process of creating a support ticket system, however I have ran into a problem with getting generated modals to open. Below you will find the code that generates the list of tickets (As well as the button to open the modal) along with the modal generation itself.
<table class="table table-hover table-vcenter">
<tbody>
<?php
$Status = $_GET['filter'];
$DataArray = mysqli_query($con,"SELECT * FROM Tickets WHERE Status='$Status'");
while($row = mysqli_fetch_array($DataArray)) {
?>
<tr>
<td class="font-w600 text-center" style="width: 80px;">#TCK<?php echo $row['ticketID']; ?></td>
<td class="hidden-xs hidden-sm hidden-md text-center" style="width: 100px;">
<?php if ($row['Status'] == 'Open') { echo "<span class=\"label label-success\">Open</span>";}elseif($row['Stauts'] == 'Pending'){echo"<span class=\"label label-warning\">In Progress</span>";}else{echo "<span class=\"label label-danger\">Resolved</span>";} ?>
</td>
<td>
<a class="font-w600" data-toggle="modal" data-target=<?php echo $row['ticketID']; ?> href="#"><?php echo $row['Title']; ?></a>
<div class="text-muted">
<em><?php echo humanTiming($row['Created']); ?> ago</em> by <?php echo $row['Username']; ?>
</div>
</td>
<td class="hidden-xs hidden-sm hidden-md text-muted" style="width: 120px;">
<em><?php echo $row['Catagory']; ?></em>
</td>
<td class="hidden-xs hidden-sm hidden-md text-center" style="width: 60px;">
<span class="badge badge-primary"><i class="fa fa-comments-o"></i> <?php echo CountTicketComments($con,$row['ticketID']); ?></span>
</td>
</tr>
<?php } ?>
</tbody>
The above snippet is where I generate the table of tickets, 'data-target' should be the name of the modal as im aware, in this case i simply set the data-target to the tickets ID.
<?php
$Status = $_GET['filter'];
$DataArray = mysqli_query($con,"SELECT * FROM Tickets WHERE Status='$Status'");
while($row = mysqli_fetch_array($DataArray)) {
?>
<div class="modal fade" id=<?php echo $row['ticketID']; ?> tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout">
<div class="modal-content">
</div>
</div>
</div>
<?php } ?>
Lastly the above snipped is where I generate each modal (I removed the content to reduce clutter) as you can see I set the modal's 'id' to the ticketID just as I did with the data-target...
So I am unsure as to why this is not working, any help would be greatly appreciated.
The data-target attribute should be set to #elementID you're missing the # character at the start.
Try:
<a ... data-target="#<?php echo $row['ticketID']; ?>" ... > ... </a>

Retrieve ACF unique ID generated by repeater field for use in a JavaScript function

I'm using advanced custom fields to repeat divs. There is a unique ID injected into the wrapper div for a click function that reveals content (i can't use a class because it triggers all the divs at once).
How do I target this ID in my javascript function dynamically? Here is my code;
<?php if( have_rows('team') ): $i = 0; ?>
<?php while( have_rows('team') ): the_row(); $i++;
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" id="wrap-<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
And my function;
<script>
(function($) {
$('#wrap-1').on('click',function(){
$('#show-1').slideToggle('slow');
});
$('#show-1 .close').on('click',function(){
$('#show-1').slideToggle('slow');
});
})( jQuery );
</script>
Edit: the id is dynamically injected here;
id="wrap-<?php echo $i; ?>"
I would add the ID to each element in a data attribute, and use this and that ID to toggle appropriately. To summarize the JS, when you click on the button, you get the stored data attribute, which can be used to find the appropriate target for toggling.
To the HTML, I add the data ID to the #show divs, and removed the id completely from the button. It's not needed.
HTML changes:
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
and
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`
Javascript
(function($) {
$('.teamInfo').on('click', function() {
var id = $(this).data('toggle-id');
$('#show-' + id).slideToggle();
});
$('.card-reveal .close').on('click',function() {
var id = $(this).closest('.card-reveal').data('toggle-id');
$('#show-' + id).slideToggle('slow');
});
})( jQuery );
And the entire HTML as you posted it:
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
I'd look at using this. You can still use a class for an event selector, and in the handler, have context to know which was selected.
<script>
(function($) {
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
})( jQuery );
</script>
^ i'm not clear if you were adding the .close class for a visual cue or if you wanted to use that to trach shown state. Might just need the one handler to act as a toggle. Or an if statement in the toggle if other things need to happen on the transition.

Get multiple checkbox values in Yii

I have a page in which a user is able to select his desired category and get a listing of organizations. As for now, I've managed to get data from one selected category.
My issue now is getting multiple selected categories and retrieve data from multiple ids.
List of categories:
<div class="col-md-4 sidebar well col-md-push-8">
<div class="sidebar__block">
<div class="sidebar__inner">
<h4 class="h4">Filter by category</h4>
<?php foreach ($categories as $c): ?>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="category[]" id="<?php echo $c->id;?>" value="<?php echo $c->id;?>" class="styled" <?php if($c->id==$_GET['category']){ echo 'checked="checked"'; } ?>>
<label for="<?php echo $c->title; ?>"><?php echo $c->title;?></label>
</div>
</div>
<?php endforeach ?>
<div class="form-group">
<button type="submit" class="btn btn-sd btn-sd-green full-width filter_button" name="subscribe">Filter <i class="icon-right-small"></i></button>
</div>
</div>
</div>
</div>
List of data(organizations according to category selected):
<div class="col-md-8 col-md-pull-4">
<!--start show category with title-->
<div class="lgi__block lgi__block-2" id="appnendGridId">
<!--start show single category with title-->
<?php if(!empty($enterprises)): ?>
<?php foreach ($enterprises as $e): ?>
<div class="lgi__item category1">
<a class="lgi__item-inner" target="_blank" href="<?php echo $this->createUrl('frontend/enterprise', array('id' => $e->id)) ?>">
<div class="lgi__block-img">
<h5 class="lgi__label"><?php if($e->isIdeaEnterpriseActiveAccreditedMembership()): ?><?php echo $e->renderIdeaEnterpriseMembership('text')?><?php endif; ?></h5>
<img class="img-responsive-full lgi__img wp-post-image" src="<?php echo $e['imageLogoUrl']; ?>" alt="">
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4><?php echo $e['title']; ?></h4>
<p><?php echo ysUtil::truncate($e['text_oneliner'], 85) ?></p>
</div>
</a>
</div>
<?php endforeach ?>
<?php else: ?>
<?php echo Notice::inline('Enterprises not found in this category or keyword') ?>
<?php endif; ?>
<!--end show single category with title-->
</div>
<!--end show category with title-->
<div class="row load_more_div">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts collapse please_wait_btn_class">
<h4 style="margin-top: 7px; color: #fff;">Loading...</h4>
</button>
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts load_more_btn_class">
Load More <i class="icon-arr-down"></i>
</button>
</div>
</div>
</div>
JS :
$(document).on('click','.filter_button',function(e){
e.preventDefault();
var category = [];
$.each($("input[name='category[]']:checked"), function(){
window.location.replace('/idea/frontend/explore/category/'+$(this).val());
});
});
Appreciate if anyone could help me in this matter.

Javascript | onClick function not executing on .php page

I have created a very basic piece of js to call a image dependent on user input into a text field (i.e. - 'brick1' calls image brick1.jpg). This will work on normal html page, but when I try to add to .php page the onClick won't trigger. As I am new to PHP, any help would be much appreciated.
Here's what I am working with :
<script type="text/javascript">
var brickPath = "http://www.legoexample.com.au" + "/brickdata/";
function dothisnow(name){
var picId = document.images["imageId"];
picId.src = brickPath + name + "_T.jpg";
}
</script>
<form name="myForm">
<p style="text-align: center;"> Enter Lego Part #<br>
<input type=text name="picid" size="25">
<br><br>
<input type=button value="Click Here to See Your Photo" name="clicker" onClick="dothisnow(document.forms['myForm'].elements['picid'].value);">
<br>
<img id="imageId" onerror="alert('Could not find the image.');">
</form>
<script type="text/javascript">
dothisnow('brick1');
<script>
This is the PHP :
<?php
if($new_auction_step == 2)
{
$img_nr = get_option("ad_theme_pic_nr");
$catid = $_SESSION['posted_thing_cat'];
$wii = get_option('ad_uploaded_image_width');
if(empty($img_nr)) $img_nr = 5;
global $current_user;
get_currentuserinfo();
$cid = $current_user->ID;
if($uploaders == "html") $enc = 'enctype="multipart/form-data"';
?>
<!-- ########################### -->
<?php
if($uploaders == "jquery"):
?>
<ul class="post-new">
<li>
<h2><?php echo __('Images', 'AuctionTheme'); ?>:</h2>
<p>
<div id="mcont">
<form id="fileupload" action="<?php bloginfo('siteurl'); ?>/?uploady_thing=1&pid=<?php echo $pid; ?>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="pid" value="<?php echo $pid; ?>">
<input type="hidden" name="cid" value="<?php echo $cid; ?>">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span><?php _e('Add files...','AuctionTheme') ?></span>
<input type="file" name="files[]" multiple>
</span>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span><?php _e('Cancel upload','AuctionTheme') ?></span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span><?php _e('Delete','AuctionTheme') ?></span>
</button>
<input type="checkbox" class="toggle">
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The loading indicator is shown during file processing -->
<div class="fileupload-loading"></div>
<br>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
<!-- modal-gallery is the modal dialog used for the image gallery -->
<div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd" tabindex="-1">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"><div class="modal-image"></div></div>
<div class="modal-footer">
<a class="btn modal-download" target="_blank">
<i class="icon-download"></i>
<span>Download</span>
</a>
<a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
<i class="icon-play icon-white"></i>
<span>Slideshow</span>
</a>
<a class="btn btn-info modal-prev">
<i class="icon-arrow-left icon-white"></i>
<span>Previous</span>
</a>
<a class="btn btn-primary modal-next">
<span>Next</span>
<i class="icon-arrow-right icon-white"></i>
</a>
</div>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span><?php _e('Start','AuctionTheme') ?></span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span><?php _e('Cancel','AuctionTheme') ?></span>
</button>
{% } %}</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<img src="{%=file.thumbnail_url%}">
{% } %}</td>
<td class="name">
{%=file.name%}
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="icon-trash icon-white"></i>
<span><?php _e('Delete','AuctionTheme') ?></span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
</script>
</div>
</p>
</li>
</ul>
<?php endif; //endif jquery uploads ?>
<!-- ########################## -->
<form method="post" <?php echo $enc; ?> action="<?php echo AuctionTheme_post_new_with_pid_stuff_thg($pid, $new_auction_step);?>" >
<ul class="post-new">
<?php
if($uploaders == "html"):
?>
<li>
<h2><?php echo __('Images', 'AuctionTheme'); ?>:</h2>
<p>
<?php
$args = array(
'order' => 'ASC',
'orderby' => 'post_date',
'post_type' => 'attachment',
'post_parent' => $pid,
'post_mime_type' => 'image',
'numberposts' => -1,
); $i = 0;
$attachments = get_posts($args);
$default_nr = get_option('AuctionTheme_nr_max_of_images');
if(empty($default_nr)) $default_nr = 5;
$actual_nr = count($attachments);
$dis = $default_nr - $actual_nr;
for($i=1;$i<=$dis;$i++):
?>
<input type="file" class="do_input file_inpt" name="file_<?php echo $i; ?>" />
<?php endfor; ?>
</p>
</li>
<li>
<div id="thumbnails" style="overflow:hidden;">
<script type="text/javascript">
function delete_this3(id)
{
jQuery.ajax({
method: 'get',
url : '<?php echo get_bloginfo('siteurl');?>/?_ad_delete_pid='+id,
dataType : 'text',
success: function (text) { jQuery('#image_ss'+id).remove(); window.location.reload(); }
});
//alert("a");
}
</script>
<?php
if($pid > 0)
if ($attachments) {
foreach ($attachments as $attachment) {
$url = wp_get_attachment_url($attachment->ID);
echo '<div class="div_div2" id="image_ss'.$attachment->ID.'"><img width="70" class="image_class" height="70" src="' .
AuctionTheme_wp_get_attachment_image($attachment->ID, array(70, 70)). '" />
<img border="0" src="'.get_template_directory_uri().'/images/delete_icon.png" />
</div>';
}
}
?>
</div>
</li>
<?php endif; //image uploaders html ?>
If it is working in html it also should work in php, could you show the php? The problem is probably in syntax or js integration. I will try to help you.

Categories