Develop Reference

jQuery function not working inside sweetalert2 modal

I'm using sweetalert2 modal in which I have a bunch of cards with a link tag and upon clicking the link tag a function updates a hidden input's value. the function does not works. but when I manually inject the JavaScript via console it begins to work. I have tried defining the function above the main code and below the main code but still no luck.
Here's the sweetalert code
$(a_gateway2).click(function() {
Swal.fire({
title: '<strong>Select Coin</strong>',
html:
`<div class="col-md-10 offset-md-1">
<div class="card shadow-new">
<div class="card-body">
<a class="coin_card card-block stretched-link text-decoration-none" data-coin="bitcoin" href="#">
<div class="row" >
<div class="col-4">
<img src="assets/img/bitcoin.svg" alt="Bitcoin">
</div>
<div class="col-8">
<span>Bitcoin</span>
</div>
</div>
</a>
</div>
</div>
</div>`,
showCancelButton: false,
showConfirmButton: false
})
});
and my function
$(document).ready(function(){
$("a.coin_card").click(function(){
var value=$(this).attr('data-coin');
$('#gateway-value').val( value );
return false;
});
});
HTML
<input type="hidden" value="" id="gateway-value">

events on multiple calendar it is not taking the id of selected tab

Hi there I have this calendar can someone help me how can I display data of proper agent id this foreach is showing the same for each calendar is it possible to make a query or something
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var agent_id = $(e.target).attr("agent_idja") // activated tab
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
$('#calendar' + agent_id).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
events: [
#foreach($appointments_agents as $appointmenti)
{
title : '{{ $appointmenti->agent_id }}',
start : '{{ $appointmenti->start_at }}',
},
#endforeach
],
drop: function(event) {
var apo_id = $(this).attr('apo_id');
console.log(agent_id);
$.ajax({
method: "POST",
url: "{{ url('/change-agent') }}",
data: {
_token: "{{ csrf_token() }}",
agent_id: agent_id,
appointment_id:apo_id
},
success: function () {
console.log("ok");
},
error: function () {
console.log("error");
}
});
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
});
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Agents</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs customtab" role="tablist">
#foreach($agents as $key=> $agent)
<li class="nav-item"> <a class="nav-link " data-toggle="tab" agent_idja="{{$agent->id}}" href="#agent{{$agent->id}}" id="tab{{$key}}" role="tab"> <div class="user-profile dropdown m-t-20">
<div class="user-pic">
<img src="{{ asset('app/assets/images/users/1.jpg') }}" alt="users" class="rounded-circle img-fluid" />
</div></div> <span class="hidden-xs-down">{{$agent->name}}</span></a> </li>
#endforeach
</ul>
<div class="p-20">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Appointments </h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id='external-events'>
#foreach($appointments as $appointment)
<div class='fc-event' apo_id="{{$appointment->id}}" > {{$appointment->firstname}} <br>{{$appointment->start_at}}</div><br>
#endforeach
<p>
<input type='checkbox' id='drop-remove' checked/>
<label for='drop-remove'>remove after drop</label>
</p>
</div>
</div>
</div>
</div>
</div><div class="col-lg-9">
<div class="tab-content tabcontent-border">
<?php $i=1; ?>
#foreach($agents as $key=> $agent)
<div class="tab-pane agent tabs{{$key}}" id="agent{{$agent->id}}" agent_id="{{$agent->id}}" role="tabpanel">{{$agent->id}}
<div class="card-body b-l calender-sidebar">
<div id='calendar-container'>
<div id='calendar{{$agent->id}}' class="calendar" agent-id="{{{$agent->id}}}"></div>
</div>
</div>
</div>
<?php $i++; ?>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So this is how it is shown
As you can see here on the attached screenshot I managed to change the calendars with tabs and when I switch it shows the calendar for that agent id, but for the events it does not work I dont know why does someone have an idea what should I do..? I tried inside the foreach of appointment to use a condition like if $appointment->agent_id == agent_id but does not work

Force foundation reveal to stay open unless button is clicked?

I'm using Foundation and Select2. When I select something within the select2 selector, my reveal closes. This happens when selecting from the dropdown list or clicking anywhere outside of the select. I don't know what is causing this and am already disabling esc and any other ways to close the reveal. I'm thinking that a good work around would be to just have it so that the modal can only ever close if a specific button is clicked, everything else won't close it.
I currently have the modal opening on page load.
Modal HTML:
<div class="reveal" id="first_open_modal" data-reveal data-options="closeOnClick:false; closeOnEsc: false;">
<div class="row">
<h3>Contact Info</h3>
<hr>
<div class="row">
<!-- First Name -->
<div class="large-4 columns">
<p>First Name</p>
<input type="text" id="first_name_input">
</div>
<!-- Last Name -->
<div class="large-4 columns">
<p>Last Name</p>
<input type="text" id="last_name_input">
</div>
<!-- Phone -->
<div class="large-4 columns">
<p>Phone</p>
<input type="text" id="phone_input">
</div>
<!-- Email -->
<div class="large-12 columns">
<p>Email</p>
<input type="email" id="email_input">
</div>
</div>
<h3 class='last'>School Info</h3>
<p>After selecting a school, the modal will close and you can begin picking your colors.</p>
<hr>
<div class="row">
<!-- School Name -->
<div class="large-12 columns">
<p>School Name</p>
<!-- <select id="school_input"></select> -->
<input type="hidden" id="school_input">
</div>
</div>
</div>
</div>
Select2 / Javascript:
// Open Modal
$('#first_open_modal').foundation('open');
// Enable Select2
$("#school_input").select2({
placeholder: "Lookup a school...",
minimumInputLength: 3,
ajax: {
url: 'http://services.sidearmsports.com/services/globalopponentlookup.ashx',
dataType: 'jsonp',
data: function (term) {
return { school_name: term };
},
onselect: function () {
alert("test");
},
results: function (data) {
var schools = data.schools || [];
return {
results: $.map(schools, function (v, i) {
return { id: v.school_id, text: v.school_name };
})
};
}
}
});

The issue was that Select2 was adding .close which would close both the select and the foundation reveal. I solved it by chaining:
.on("close", function(e){
e.stopPropagation();
})
onto the select2.

asp.net mvc loading first entries and the others - late

I'm using asp.net mvc razor
The page must show a very long list. Phonebook employees - about 500 people. Page is loading too slowly because of too many entities.
How to load first 50 entries, and later the others 450 entries - by background?
Thank you so much!
Code on page:
#model WarehouseSearch.Controllers.PhonesList
#{
string LastFirstChar = "";
}
<div id="main-content">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-8" style="border:1px solid #ddd;background-color:white">
<div class="row" style="background-color:rgba(247, 225, 181, 1);margin-bottom:1em;padding:0.5em;">
<div class="col-md-7 text-left" style="padding-left: 1em; padding-top: 0.2em; padding-right: 1em; padding-bottom: 0.3em;">
<span class="fa fa-user fa-2x blue"></span> <input type="text" name="Search" id="search_input" placeholder="search ..." class="search_input" />
</div>
<div class="col-md-3">
</div>
</div>
<ul id="phones" class="interleave">
#foreach (WarehouseSearch.GetPeoplePhonesListResult p in Model.allphones)
{
<li style="padding-top:2em;" class="row">
<div class="col-md-2">
#if (LastFirstChar != #p.FirstChar)
{
<span style="background-color:#41a7e2;color:white;position:relative;left:-4em;font-size:210%;padding:0.3em;" class="text-right"><b>#p.FirstChar</b></span>
LastFirstChar = p.FirstChar;
}
<img style="width: 85%; display: block;" src="#p.BigPhoto" /><br />
</div>
<div class="col-md-5">
<h3 class="phone smarttlink" style="margin-bottom:0.1em;margin-top:0;">#p.Family</h3>
<div>#p.FirstMiddleName</div>
<br />
<small style="color:#666">#p.Title</small>
</div>
.... some other info about people....
</li>
}
</ul>
</div>
</div>
</div>
</div>
<script>
$('#search_input').animate({
//"width": "100%",
//"padding": "4px",
"opacity": 1
}, 300, function () {
$(this).focus();
});
$(function () {
$(function () {
$('#search_input').fastLiveFilter('#phones'
, {
selector: ".phone, .phone2"
, callback: function (total) {
$('.phone').unhighlight();
searchTerm = $('#search_input').val();
if (searchTerm.length > 0) {
$('.phone').highlight(searchTerm);
}
}
, translit : true
}
);
});
});
</script>
in Controller:
:
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}

First I would recommend you to use an external CSS file instead of inline styling.
That way the CSS can be cached in the browser and might help you to boost the performance.
Also in a div with a class "row" you have only 12 columns,it should be like this.
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-2">
</div>
</div>
I would try change this Action to take the first 50
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().Take(50).ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}
And later in the view after it finished to iterate over the top 50 phones
Call to another function from the controller that will retrieve the rest of the phones.
#{
((HomeController)this.ViewContext.Controller).GetLast450();
}
And iterate that, probably a partial view will be good here.

Angular-file-upload and Rails with Carrierwave

I've been trying to workout upload photo using angular-file-upload and Rails with the carrierwave .. I got an error Converting circular structure to JSON, I already google the problem it seems I didn't get the idea how to remove that I error. I just followed the tutorial in https://github.com/nervgh/angular-file-upload/blob/master/examples/simple/index.html.
Angular
$scope.sp = { serviceprovider: {
avatar: { name: $scope.uploader = new FileUploader() }
},
categories: [],
clearances: [2]
};
$scope.registerProvider = function registerProvider () {
console.log($scope.sp);
$http.post('/serviceproviders/new_serviceprovider/', $scope.sp )
.success ( function onLink ( response) {
location.href = "index";
})
.error ( function onLink ( response ) {
console.log(response)
});
}
HTML
<section ng-controller="RegisterServiceProviderCtrl">
<!-- multistep form -->
<form id="msform" ng-submit="registerProvider()" novalidate>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Authentication</li>
<li>Personal Information</li>
<li>Professional Skill</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<!-- <h3 class="fs-subtitle">This is step 1</h3> -->
<div class="row">
<div class="col-xs-12">
<center><div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" nv-file-select uploader="uploader"/><%#= f.file_field :avatar %></span>
Remove
</div>
</div></center>
</div>
</div>
..... code