When I query from a page, I submit the form with jquery in sorgu.php. but how do i do it without making it infinite loop?
is there any other way ?
page link
header.php code search mod
<div class="modal fade" id="srcModal" tabindex="-1" role="dialog" aria-labelledby="contacthModal">
<div class="row searchArea modal-dialog modal-content" role="document">
<div class="container ">
<div class="row searchCloserow">
<div class="closeBtn" data-dismiss="modal"> <i class="fas fa-times" aria-hidden="true"></i> Kapat </div>
</div>
<div class="row searchForm d-flex justify-content-center">
<div class="col-md-2 searchText">
<span id="myModalLabel">Sipariş Sorgulama Ekranı</span>
<p>Sorgulamak istediğiniz siparişin kodunu giriniz!</p>
</div>
<div class="col-md-4 searchwell">
<input type="text" name="siparis_key" id="siparis_key" placeholder="Lütfen Sipariş Kodunu Giriniz">
</div>
<div class="col-md-2">
<a href="sorgu" id="siparis_Sorgula" type="submit" class="searchbtn anibut">
Sipariş Sorgula <i class="fas fa-question" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
and header.php jquery code. here i am changing the href href="sorgu?key=asdasdasd"
$("#siparis_Sorgula").click(function(){
$data = $('#siparis_key').val();
$href = $("#siparis_Sorgula").attr('href');
$href = $href+"?key="+$data;
$("#siparis_Sorgula").attr("href", $href);
});
sorgu.php page code
<form action="" method="post" id="jsSorgula">
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="form-group">
<input type="text" name="siparis_key" id="siparis_keyId" placeholder="<?php echo $dil['sipariskodu'] ?>" class="form-control" required>
</div>
</div>
<div class="col-lg-12 col-md-12">
<button type="submit" class="btn btn-primary btn-block"><?php echo $dil['sorgula'] ?></button>
</div>
</div>
</form>
sorgu.php jquery code
<script type="text/javascript">
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
$count = 0;
$(document).ready(function(){
if ($count==0) {
$keys = getUrlVars()["key"];
$('#siparis_keyId').val($keys);
$("#jsSorgula").submit();
$count++;
alert($count);
}
break;
});
The infinity loop could came from your $count = 0. Is set to 0 each time you make a request on that page. Instead of make the validation with count == 0, you should use a method like "on click" or "on change".
Related
I have a food ordering web app in PHP laravel 5.8. The items modal is working fine with the following code but when I am trying to display the deals modal in the same manner, it does not work at all. I am sharing my blade files. The "show.blade.php" file displays the entire front page where these modals have to be shown to the customer. The "modal.blade.php" file is where the modals are defined and their data is coming from the "show.blade.php" page. The first div in the modals file is the one that I want to work and the second is the one that is currently working fine. You can ignore the last modal div.
show.blade.php
#extends('layouts.front', ['class' => ''])
<?php
use Carbon\Carbon;
use App\User;
$name = new User();
?>
#section('content')
#include('restorants.partials.modals')
<section class="section pt-lg-0" id="restaurant-content" style="padding-top: 0px">
<input type="hidden" id="rid" value="{{ $restorant->id }}" />
<div class="container container-restorant">
<hr>
#if ($deals)
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<h1>Deals</h1>
#foreach ($deals as $deal)
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">
<div class="owl-item">
<div id="addToCart1">
<div class="strip">
<figure style="border-radius: 3rem">
<a onClick="setCurrentDeal({{ $deal->id }})" href="javascript:void(0)"><img
src="{{ $deal->image_url }}_thumbnail.jpg" loading="lazy"
data-src="{{ config('global.restorant_details_image') }}"
class="img-fluid lazy" alt=""></a>
</figure>
<span class="res_title"><b><a onClick="setCurrentDeal({{ $deal->id }})"
href="javascript:void(0)">{{ $deal->name }}</a></b></span><br />
<span class="res_description">{{ $deal->description }}</span><br />
<div class="d-flex justify-content-between">
<div>
#php
$dealItems = [];
$dealItems = App\DealItem::where('deal_id', $deal->id)->get();
#endphp
#foreach ($dealItems as $it)
<h6><strong>{{ $it->item->name }}</strong></h6>
#endforeach
</div>
<h6 class="text-success"><strong>Price:{{ $deal->price }}</strong></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
#endforeach
#endif
</div>
#section('js')
<script>
$(function() {
$('.owl-carousel').owlCarousel({
margin: 50,
autoplay: true,
loop: true
});
});
var deals = [];
var currentDeal = null;
var currentDealSelectedPrice = null;
var lastAdded = null;
var CASHIER_CURRENCY = "<?php echo env('CASHIER_CURRENCY', 'usd'); ?>";
var LOCALE = "<?php echo App::getLocale(); ?>";
/*
* Price formater
* #param {Nummber} price
*/
function formatPrice(price) {
var formatter = new Intl.NumberFormat(LOCALE, {
style: 'currency',
currency: CASHIER_CURRENCY,
});
var formated = formatter.format(price);
return formated;
}
function setCurrentDeal(id) {
var deal = deals[id];
currentDeal = deal;
$('#modalDealTitle').text(deal.name);
$('#modalDealName').text(deal.name);
$('#modalDealPrice').html(deal.price);
$('#modalDealID').text(deal.id);
$("#modalDealImg").attr("src", deal.image);
$('#modalDealDescription').html(deal.description);
//Normal
currentDealSelectedPrice = deal.priceNotFormated;
// $('#variants-area').hide();
$('.quantity-area').show();
$('#dealModal').modal('show');
}
<?php
$deals =[];
foreach ($deals as $deal){
$theArray = [
'name' => $deal->name,
'id' => $deal->id,
'priceNotFormated' => $deal->price,
'price' => #money($deal->price, env('CASHIER_CURRENCY', 'usd'), true) . '',
'image' => $deal->logom,
'description' => $deal->description,
];
echo 'deals[' . $deal->id . ']=' . json_encode($theArray) . ';';
}
?>
<script>
$(document).ready(function() {
$("#addToCart1").show();
// $('#exrtas-area').show();
$('.quantity-area').show();
});
</script>
#endsection
modals.blade.php
<div class="modal fade" id="dealModal" z-index="9999" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="modalDealTitle" class="modal-title" id="modal-title-new-item"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-body px-lg-5 py-lg-5">
<div class="row">
<div class="col-sm col-md col-lg col-lg text-center">
<img id="modalDealImg" src="" width="295px" height="200px">
</div>
<div class="col-sm col-md col-lg col-lg">
<input id="modalDealID" type="hidden"></input>
<span id="modalDealPrice" class="new-price"></span>
<p id="modalDealDescription"></p>
</div>
<div class="offset-md-6 col-md-6">
#if(!config('app.isqrsaas'))
<div class="quantity-area">
<div class="form-group">
<br />
<label class="form-control-label" for="quantity">{{ __('Quantity') }}</label>
<input type="number" name="quantity" id="quantity" class="form-control form-control-alternative" placeholder="{{ __('1') }}" value="1" required autofocus>
</div>
<div class="quantity-btn float-right">
<div id="addToCart1">
<button class="btn btn-primary" v-on:click='addToCartAct'
<?php
if(auth()->user()){
if(auth()->user()->hasRole('client')) {echo "";} else {echo "disabled";}
}else if(auth()->guest()) {echo "";}
?>
>{{ __('Add To Cart') }}</button>
</div>
</div>
</div>
#endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="productModal" z-index="9999" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="modalTitle" class="modal-title" id="modal-title-new-item"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-body px-lg-5 py-lg-5">
<div class="row">
<div class="col-sm col-md col-lg col-lg text-center">
<img id="modalImg" src="" width="295px" height="200px">
</div>
<div class="col-sm col-md col-lg col-lg">
<input id="modalID" type="hidden"></input>
<span id="modalPrice" class="new-price"></span>
<p id="modalDescription"></p>
<div id="variants-area">
<label class="form-control-label">{{ __('Select your options') }}</label>
<div id="variants-area-inside">
</div>
</div>
</div>
<div class="col-md-12">
<div id="exrtas-area">
<br />
<label class="form-control-label h4" for="quantity">{{ __('Extras') }}</label>
<div class="row" id="exrtas-area-inside"></div>
</div>
</div>
<div class="offset-md-6 col-md-6">
#if(!config('app.isqrsaas'))
<div class="quantity-area">
<div class="form-group">
<br />
<label class="form-control-label" for="quantity">{{ __('Quantity') }}</label>
<input type="number" name="quantity" id="quantity" class="form-control form-control-alternative" placeholder="{{ __('1') }}" value="1" required autofocus>
</div>
<div class="quantity-btn float-right">
<div id="addToCart1">
<button class="btn btn-primary" v-on:click='addToCartAct'
<?php
if(auth()->user()){
if(auth()->user()->hasRole('client')) {echo "";} else {echo "disabled";}
}else if(auth()->guest()) {echo "";}
?>
>{{ __('Add To Cart') }}</button>
</div>
</div>
</div>
#endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a form in modal and I'm using Livewire, what's really happens is when I submit the form everything works correctly but it just creates duplicate records!
The first time creates 2 duplicates, the second time creates 3 and more and more.
I don't know how to fix this!
I'd be appreciated for your help.
this is my livewire view file :
<div class="modal fade" id="createProfessionModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!--begin::Container-->
<div class="card card-custom card-shadowless rounded-top-0">
<!--begin::Body-->
<div class="card-body p-0">
<div class="row justify-content-center py-8">
<!--begin::Wizard Form-->
<form class="form fv-plugins-bootstrap fv-plugins-framework" id="createProfessionForm" method="post" wire:submit.prevent="store">
<div class="justify-content-center">
<!--begin::Wizard-->
<div class="my-5 step">
<h5 class="text-dark font-weight-bold mb-10">ایحاد حرفه جدید</h5>
<!--begin::Group-->
<div class="form-group row fv-plugins-icon-container">
<label class="col-form-label" for="profession_title">عنوان حرفه</label>
<div class="col-lg-9 col-xl-9">
<input id="profession_title" class="form-control form-control-solid form-control-lg" wire:model.defer="title" name="title" type="text">
<div class="fv-plugins-message-container"></div>
</div>
</div>
<!--end::Group-->
<button type="submit" class="btn btn-primary font-weight-bolder px-9 py-4" >ایجاد</button>
<button type="button" data-dismiss="modal" class="btn btn-outline-info font-weight-bolder px-9 py-4" >بستن</button>
</div>
<!--end::Wizard-->
</div>
</form>
</div>
</div>
</div>
<!--end::Wizard Form-->
</div>
</div>
</div>
script:
document.addEventListener('DOMContentLoaded', function () {
$('#createProfessionForm').on('submit', function (e) {
e.preventDefault();
let professionValue = $('#profession_title').val();
#this.set('title', professionValue, true);
#this.store();
})
})
this is my component
public string $title;
public function store()
{
try {
$profession = new Profession();
$profession->name = $this->title;
$profession->save();
session()->flash('success', 'عملیات با موفقیت انجام شد.');
} catch (\Exception $exception) {
session()->flash('error', __($exception->getMessage()));
}
}
If you are using livewire, you don't need to bind the event in Javascript like you're doing here.
Because if you do that, the request is firing twice. You can check for the same in the network as well.
I just tried to insert data using ajax json but I'm getting a error like this. I checked in the controller, route and model. There's nothing wrong with how to set it up. Please help.
For View Blade
function add() {
save_method = 'add';
$('#form_jabatan')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
$('[name="kode"]').prop("readonly", false);
}
function save() {
var url = "";
if (save_method === 'add') {
url = "<?php echo url('/simpanjabatan') ?>";
} else {
url = "<?php echo url('/simpanjabatan') ?>";
}
$.ajax({
url: url,
type: "POST",
data: $('#form_jabatan').serialize(),
dataType: "JSON",
success: function (data) {
if (data.errors) {
jQuery.each(data.errors, function (key, value) {
jQuery('.alert-danger').show();
jQuery('.alert-danger').append('<p>' + value + '</p>');
});
} else {
alert(data.status);
$('#modal_form').modal('hide');
reloadpage();
}
},
error: function (request, status, error) {
alert("Error json " + error);
json = $.parseJSON(request.responseText);
$.each(json.errors, function (key, value) {
$('.alert-danger').show("");
$('.alert-danger').append('<p>' + value + '</p>');
});
}
});
}
</script>
<!-- Page Content -->
<div class="content">
<h2 class="content-heading">Form Detail Jabatan</h2>
<!-- Dynamic Table Full -->
<div class="block">
<div class="block-header block-header-default">
<h3 class="block-title">DATA TABLE Detail Jabatan</h3>
</div>
<div class=" block-content block-content-full table-responsive">
<button type="button" onclick="add();" class="btn btn-primary mr-5 mb-5" data-toggle="modal">
<i class="fa fa-plus mr-5"></i>Kelola Jabatan
</button>
<div class="table-responsive">
<table id="example" class=" table table-striped js-dataTable-full-pagination ">
<thead>
<tr>
<th >ID JABATAN</th>
<th >JENIS JABATAN</th>
<th >GAJI_POKOK</th>
<th >Aksi</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- DataTables functionality is initialized with .js-dataTable-full-pagination class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
</div>
</div>
</div>
<!-- END Page Content -->
<!-- From Right Modal -->
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="modal-fromright"
aria-hidden="true">
<div class="modal-dialog modal-dialog-fromright" role="document">
<div class="modal-content">
<div class="block block-themed block-transparent">
<div class="block-header bg-primary-dark">
<h3 class="block-title">FORM Detail Jabatan</h3>
<div class="block-options">
<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
<i class="si si-close"></i>
</button>
</div>
</div>
<div class="modal-body form">
<form action="#" id="form_jabatan" class="form-horizontal">
<input name="_token" type="hidden" id="_token" value="{{ csrf_token() }}"/>
<div class="form-body">
<div class="form-group">
{{--<label type="hidden" class="control-label col-md-3">Kode</label>--}}
<div class="col-md-9">
<input name="kode" type="hidden" class="form-control" type="text"
placeholder="Kode">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Jenis Jabatan</label>
<div class="col-md-9">
<select class="form-control" id="jabatan" name="jabatan">
<option value="0">Silahkan Pilih</option>
<option value="1">Ka Mantri</option>
<option value="1">Ka Mantri(baru)</option>
<option value="2">Kasir</option>
<option value="2">Staff Admin</option>
<option value="2">Mantri</option>
<option value="2">Mantri(Baru)</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Gaji Pokok</label>
<div class="col-md-9">
<input type="text" class="form-control" id="gaji" name="gaji"
placeholder="Masukan gaji...">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save();" class="btn btn-primary">Save
</button>
</div>
</div>
</div>
</div>
</div>
<!-- END From Right Modal -->
For Controller
public function simpanjabatan(Request $req)
{
$obj = new DetailJabatanModel();
$obj->id_jabatan = $req->input('kode');
$obj->jabatan = $req->input('jabatan');
$obj->gaji_pokok = $req->input('gaji');
$simpan = $obj->save();
if ($simpan == 1) {
$status = "Tersmpan";
} else {
$status = "Gagal";
}
echo json_encode(array("status" => $status));
}
for route
Route::post('/simpanjabatan', 'FormJabatanController#simpanjabatan');
I want to insert with json but I got erorr:
The GET method is not supported for this route. Supported methods: POST.
I'm a newbie in CodeIgniter and I'm trying to pass my form inputs from the view to the controller. I was able to pass it, and was able to insert it on the database. However, I want to use Ajax for this so the whole page won't reload when I press the submit button. I have watched and tried this youtube tutorial: https://www.youtube.com/watch?v=IURutxKvukA, but it doesn't work for me. :( Thank you in advance!
This is my controller, Teacher.php
public function insert_quiz($quiztitle, $quizdescription, $value="")
{
$data = $this->input->post();
$numData = count($data);
$response = array();
$stringChoices = "";
if($numData > 1)
{
for ($i=4; $i < $numData; $i++)
{
$num = $i-3;
$offset = "inputChoice$num";
if ($i == 4)
{
$stringChoices = $data[$offset];
}
else if ($i != 4)
{
$stringChoices = $stringChoices . "," . $data[$offset];
}
}
}
$quizitems = array('Question' => $data['inputQuestion'], 'Choices' => $stringChoices, 'Correct' => $data['correctanswer'], 'NumSequence' => $data['questionnumber']);
$quizitemid = $this->Teacher_model->insertQuizItemOnQuizItems($quizitems);
if (count($quizitemid) == 1)
{
$quizdeedid = $this->Teacher_model->getQuizDeedId($quiztitle);
$quizdatasetitem = array('QuizSet' => $data['quizsetnumber'], 'QuizItemID' => $quizitemid, 'QuizDeedID' => $quizdeedid);
$quizdatasetid = $this->Teacher_model->insertQuizOnQuizDataSet($quizdatasetitem);
if(count($quizdatasetid) == 1)
{
$response = array(
'status' => "success"
);
echo json_encode($response);
}
}
}
and this is my quiz form, in quizView.php
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary">
<div class="row row-cards-pf">
<!-- Important: if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card-pf">
<div class="card-pf-heading">
<h1 align="center">
<strong><?php echo str_replace("%20", " ", $quizTitle); ?></strong>
</h1>
<h2 class="card-pf-title" align="center">
<label><?php echo str_replace("%20", " ", $quizDescription); ?></label>
</h2>
</div>
<div class="card-pf-body" id="divquizset" style="height: 50px">
<div class="col-sm-2">
</div>
<div class="col-sm-9" id="divquizset">
<div class="col-sm-3">
<p align="right"> QUIZ SET: </p>
</div>
<div class="col-sm-4">
<input align="center" type="text" id="quizset" class="form-control"></input>
</div>
<button class="btn btn-default col-sm-2" align="left" onclick="saveQuizSet()">Save</button>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-sm-12">
<div id="status">
</div>
</div>
</div>
</div>
<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical
nav-pf-persistent-secondary" id="list1" style="padding-top: 0px">
<!-- LIST VIEW PART 1 -->
<div id = "div1" style="padding-top: 0px">
<?php echo form_open("Teacher/insert_quiz/$quizTitle/$quizDescription", "id='myForm'", $hidden= array()); ?>
<div>
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<div class="list-group-item-header" id="div2">
<div class="list-view-pf-expand">
<span class="fa fa-angle-right"></span>
</div>
<div class="list-view-pf-checkbox">
<input type="text" name="questionnumber" id="inputquestionnumber1" class="form-control">
<!-- <b id="questionnumber" name="questionlabel" for="inputQuestion">Question 1: </b> -->
<input type="hidden" name="quizsetnumber" id="quizsetnum" class="form-control" value="">
</div>
<div class="list-view-pf-actions">
<?php echo form_submit('submit', 'Save', $attributes=array("class" => "btn btn-default")); ?>
<!-- <button class="btn btn-default" style="width: 100px">Save</button> -->
<button class="btn btn-default" style="width: 100px">Edit</button>
<button class="btn btn-default" style="width: 100px">Delete</button>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-text form-group">
<input type="text" name="inputQuestion" id="input1" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="list-group-item-container container-fluid hidden" id="containerDiv">
<div class="close">
<span class="pficon pficon-close"></span>
</div>
<div class="row">
<!-- LIST VIEW SUB VIEW -->
<div class="col-md-12">
<form class="form-horizontal" style="padding-left: 100px">
<div class="form-group">
<div class="col-sm-7" align="center">
<dt> CHOICES </dt>
</div>
<div class="col-sm-5" align="center">
<dt> CORRECT ANSWER </dt>
</div>
<div class="col-sm-7">
<div id="divCorrect" style="padding-top: 10px">
<input type="text" name="correctanswer" id="inputcorrectanswer1" class="form-control">
</div>
</div>
<div class="col-sm-5" id="divChoiceContainer1">
<div id="divChoice" style="padding-top: 10px">
<input type="text" name="inputChoice1" id="inpChoice1" class="form-control">
</div>
</div>
<div class="col-sm-7" id="otherDivChoiceContainer1">
</div>
<div class="col-sm-7" align="center" style="padding-top: 20px">
<button type="button" class="btn btn-primary btn-lg btn-block col-xs-9" id = "1" align="center" onclick="addChoiceFunction(this.id)" >Add Choices</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?= form_close() ?>
</form>
</div>
</div>
</div>
<div class="col-sm-3 container-fluid container-cards-pf container-pf-nav-pf-vertical nav-pf-persistent-secondary">
<button type="button" class="btn btn-primary btn-lg btn-block col-md-9" align="center" onclick="addQuestionFunction()">Add Question</button>
</div>
These are the scripts I used, they're also in the quizView.php:
<script>
jQuery(document).ready(function($) {
$('#myForm').ajaxForm({
beforeSubmit: function(formData, jqForm, options){
$("div#status").html('');
},
success: function(response){
var result = $.parseJSON(response);
$("div#status").html('<div class="alert alert-' + result.status + '" role="alert"> HI </div>');
}
});
});
</script>
<script>
$(document).ready(function () {
// click the list-view heading then expand a row
$(".list-group-item-header").click(function(event){
if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
$(this).find(".fa-angle-right").toggleClass("fa-angle-down")
.end().parent().toggleClass("list-view-pf-expand-active")
.find(".list-group-item-container").toggleClass("hidden");
} else {
}
})
// click the close button, hide the expand row and remove the active status
$(".list-group-item-container .close").on("click", function (){
$(this).parent().addClass("hidden")
.parent().removeClass("list-view-pf-expand-active")
.find(".fa-angle-right").removeClass("fa-angle-down");
})
});
</script>
<script>
function addQuestionFunction() {
$num = $('div .list-view-pf-view').length + 1;
$divId = "#" + $num;
$toClone = $('#div1').clone(true).find("input").val("").end();
$($toClone).find("#containerDiv").addClass("hidden").end();
$($toClone).find("#otherDivChoiceContainer1").attr("id", "otherDivChoiceContainer"+ $num);
$($toClone).find("#otherDivChoiceContainer" + $num).find("#divChoice").remove().end();
$($toClone).find("#1").attr("id", $num);
$($toClone).find("#questionnumber").text("Question " + $num + ": ");
if($($toClone).find("span").hasClass("fa-angle-down")) {
$($toClone).find(".fa-angle-right").removeClass("fa-angle-down").end();
}
$('#list1').append($toClone);
}
function addChoiceFunction(clicked_id) {
$num = parseInt(clicked_id);
$divId = "#otherDivChoiceContainer" + $num;
$numChoice = $($divId + " input").length + 2;
$toClone = $('#divChoice').clone(true).find("input").val("").end();
$toClone.find("#inpChoice1").attr("id", "inpChoice" + $numChoice).attr("name", "inputChoice" + $numChoice);
// $toClone.find("#inpChoice" + $num).attr("name", $("#inpChoice"+$num).attr("name").replace(/\\[\d+\\]/,"inputChoice" + $num));
//alert($numChoice);
$($divId).append($($toClone));
}
function saveQuizSet() {
$('#quizsetnum').val($('#quizset').val());
$quizsetval = $('#quizset').val();
$('#divquizset').empty();
$('#divquizset').append(' <p align="center"> QUIZ SET: '+ $quizsetval + '</p>');
// $('#divquizset').append(" <p align="center"> QUIZ SET: A </p>");
}
</script>
And for my script sources I used these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script src="http://www.patternfly.org/components/jquery/dist/jquery.min.js"></script>
<script src="http://www.patternfly.org/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="http://www.patternfly.org/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="http://www.patternfly.org/components/d3/d3.min.js"></script>
<script src="http://www.patternfly.org/components/c3/c3.min.js"></script>
<script src="http://www.patternfly.org/components/datatables/media/js/jquery.dataTables.js"></script>
<script src="http://www.patternfly.org/components/google-code-prettify/bin/prettify.min.js"></script>
<script src="http://www.patternfly.org/components/clipboard/dist/clipboard.min.js"></script>
<script src="http://www.patternfly.org/components/patternfly/dist/js/patternfly.min.js"></script>
<script src="http://www.patternfly.org/components/jquery-match-height/dist/jquery.matchHeight-min.js"></script>
<script src="http://www.patternfly.org/assets/js/patternfly-site.min.js"></script>
<link rel="canonical" href="http://www.patternfly.org/pattern-library/navigation/vertical-navigation/vertical-navigation.html">
This is what my form looks like
quizviewform
And this is what it's returning
returnpage
It's inserting on my database, but it doesn't return on the page and ajax doesn't work. :( I hope someone can help me here. Thanks!
I'm using Laravel 4 on this. I have a form with a list of departments in which there are members per department. I used an accordion to place all members under one checkbox of department. Now when I check the checkbox and submit it I want it to be posted on my ajax.
Here's what I can do but found an error.
Syntax error, unrecognized expression: input[name=dept_id:checked
HTML
<div class="col-md-6 col-sm-6">
<div class="blue-steel box portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-calendar"></i>Bulk select Department off day
</div>
</div><!-- /.portlet-title -->
<div class="portlet-body form">
<div class="form-body">
{{Form::open(['url'=>url('admin/schedule'), 'id' => 'department_bulk_off_day', 'class'=>'form-horizontal', 'method'=>'GET'])}}
<div class="form-group">
<label class="col-md-3 control-label" style="padding-left: 0px;">Select Department</label>
<div class="col-md-9">
<!-- <div id="accordion">
<h3><span id="id"><input type="checkbox"/></span>Text More text </h3>
<div>content etc</div>
</div> -->
<div class="employee_checkbox_wrapper" id="accordion">
<?php $department = DB::table('department')->get(); ?>
#foreach($department as $key => $val)
<label><span id="id"><input type="checkbox" name="dept_id[]" value="{{ $val->id }}"/></span>{{ $val->deptName }} </label>
<div>
<?php
$dept_id = $val->id;
$schedule = '';
$desig_ids = DB::table('designation')->where('deptID', $dept_id)->get();
foreach ($desig_ids as $desig_id) {
$emp_des = $desig_id->id;
$employee_desigs = DB::table('employees')->where('designation', $emp_des)->get();
foreach ($employee_desigs as $employee_desig) {
?>
<label style="margin-left: 15px;"><!-- <input type="checkbox" name="employee_id[]" value="{{ $employee_desig->id }}"/> -->
{{ $employee_desig->fullName }}
</label>
<a data-toggle="modal" data-id="{{ $employee_desig->id }}" data-target="#myModal" title="Add this item" class="open-AddBookDialog btn " href="#addBookDialog">
Change Department
</a>
</br>
<?php
}
}
?>
</div>
#endforeach
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" style="margin-top: 20px;">Select Date</label>
<div class="col-md-3">
<div class="input-group input-medium date date-picker" data-date-format="dd-mm-yyyy" data-date-viewmode="years" style="margin-top: 20px;">
<input type="text" class="form-control" name="off_day" value="{{ date('d-m-Y') }}">
<span class="input-group-btn">
<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12 text-center">
{{Form::token()}}
<input type="hidden" name="department_bulk_off_day" value="2">
<button class="btn btn-button button-tip-form-submit">Update</button>
</div><!-- /.col-md-12 text-center -->
</div>
</form><!-- /.form-horizontal -->
</div><!-- /.form-body -->
{{ Form::close() }}
</div><!-- /.portlet-body form -->
</div><!-- /.blue-steel box portlet -->
</div><!-- /.col-md-6 col-sm-6 -->
And here's my JS
<script>
$('#department_bulk_off_day').on('submit', function(e){
e.preventDefault();
var checkValues = jQuery('input[name=dept_id:checked').map(function()
{
return $(this).val();
}).get();
alert(checkValues);
</script>
you can try the following code
var checkValues = jQuery('input[name="dept_id"]').map(function()
{
var this_var = $(this);
if($(this):checked){
return this_var.val();
}
}).get();
Try This. You have the selectors all messed up.
$('#department_bulk_off_day').on('submit', function(e){
e.preventDefault();
var checkValues = $('input[name="dept_id"]:checked').map(function()
{
return $(this).val();
}).get();
alert(checkValues);