I have the following html:
<div id="tabsuseradmin" class="tabui">
<ul>
<li>Add Users</li>
<li>Delete Users</li>
</ul>
<div id="tabs-1ua">
<div>
</div>
</div>
<div id="tabs-2ua">
<div>
</div>
</div>
</div>
and the following inside my js file document ready function:
$('.tabui').tabs({
activate: function (event, ui) {
$.ajax({
cache: false,
url: "/Session/Index/",
success: function (result) {
if (result.length == 0) {
window.location.href = '/Home/Index/'
}
}
});
}
});
$("#tabs-1ua").tabs({
activate: function (event, ui) {
alert("User add tab has been clicked.");
}
});
Above, you can see I am trying to specify behavior for all tab selections in general using the class tabui (this works fine) and also a specific behavior for an individual tab. This specific action does not work (the alert message does not appear and the breakpoint on the alert doesn't get hit). What should I do to fix it? Thank you.
Based on your comments, you want to do this:
https://jsfiddle.net/Twisty/eoa9tafm/
$(function() {
$('.tabui').tabs({
activate: function(event, ui) {
$.ajax({
cache: false,
url: "/Session/Index/",
success: function(result) {
if (result.length == 0) {
window.location.href = '/Home/Index/'
}
}
});
}
});
$("a[href='#tabs-1ua']").click(function(event, ui) {
alert("User add tab has been clicked.");
});
});
$("a[href='#tabs-1ua']").on('click', function() {
console.log("User tab clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<div id="tabsuseradmin" class="tabui">
<ul>
<li>Add Users</li>
<li>Delete Users</li>
</ul>
<div id="tabs-1ua">
<div>
</div>
</div>
<div id="tabs-2ua">
<div>
</div>
</div>
</div>
Related
I have a scenario:
Here's my HTML code:
<input type="submit" id="btnpin" data-url="#Url.Action("PIn", "PIO")" value="P In" class="btn pin-btn" data-toggle="modal" data-target="#popup-article"/>
<div id="popup-article" class="popup">
<div class="popup__block">
<div style="overflow: auto">
<div class="top-left-logo">
<img src="~/Images/my-logo.png" width="270" height="99">
</div>
<div class="modal-top-right animated bounce delay-3s">
</div>
</div>
<div class='grid'>
<div class='col modal-left-panel '>
#{
foreach (var m in DTR.Models.DataDetails.lstDetails)
{
<div class="modal-left-text-container-top">
<div class="modal-employee-name animated bounceInLeft fast delay-2s" >#m.Name</div>
<div class="modal-employee-info">#m.Pos</div>
<div class="modal-employee-info">#m.Dep</div>
</div>
<div class="modal-left-text-container-mid">
<div class="modal-show-punch">
<div class="modal-show-punch-text">#m.PIO</div>
<div class="modal-show-punch-time">#m.IO</div>
<div class="modal-show-punch-date">#m.DateIO</div>
</div>
</div>
}
}
</div>
<div class='col modal-right-panel'>
}
</div>
</div>
</div>
</div>
And Here's my JS code:
$(document).ready(function () {
$('#btnpin').click(function () {
var url = $(this).data('url');
var punchIn = 'PunchIn';
$.ajax({
async: false,
type: "post",
contentType: "application/json; charset=utf-8",
data: "{'punchIn':'" + punchIn.toString() + "'}",
url: url,
success: function (response) {
//$(document).ajaxStop(function () {
// punchIn = null;
//});
if (response !== null && response.success) {
window.location.href = "#popup-article";
location.reload();
}
else {
alert("Already P In.");
}
},
error: function (response){
alert("Error Message");
},
});
});
});
This Code is working fine but my Problem is i need to use location.reload();
upon clicking the button btnpin because the value not showing if don't have this location.reload();
When loading the page the value is already fetched and done but when i click the button there's nothing else showing on the popup portion.
The problem of this location.reload();, the page showing two times and its annoying but the page and the value load perfectly.
How to make it with out using this location.reload();? it seems like i need to have some .fucos() on that particular popup class when the page is loaded.
Any idea is pretty much appreciated.
Good day guys, can I combine load() and append() in JQuery/Ajax?
ex.
can I combine load() and prepend()? ex.
$('#notify').load(' #notify',function(){
$('#notification').prepend(`
<li>notif1</li>
<li>notif2</li>
`);
})
Updated:
The original code was like this.
function notif(){
$.ajax({
url: `/iaccs-hook-notifications`,
method: 'GET',
success: function(data){
console.log(data);
// if (data.success){
// $("#notify").load(" #notify");
// }
if (data.length > 0) {
//proceed
$('#btn-notif').addClass('js-has-new-notification');
$('#notif-list').append(`
<li>
<div class="an-info-single unread">
<a href="{{url('iaccs-hook-list')}}">
<span class="icon-container important">
<i class="icon-setting"></i>
</span>
<div class="info-content">
<h5 class="user-name">Update Client</h5>
<p class="content"><i class="icon-clock"></i>${data[0].created_at}</p>
</div>
</a>
</div>
</li>
`);
}
},
error: function(err){
swal('Error!','Please report this issue.', 'error');
}
});
}
$(document).ready(function(e) {
// let refreshNotification = () => {
// $('#notify').load(location.href + ' #notify');
// $(this).unwrap()
// }
notif();
var socket = io('http://www.iaccs-admin-console.test' + ':8080');
socket.on("message", function(message){
notif()
// $('.unread').on('click',function(){
// $.get('/markAsRead');
// });
});
});
and here is the view.
<div class="dropdown-menu" id="notify">
<p class="an-info-count">Notifications <span>{{count(auth()->user()->unreadNotifications)}}</span></p>
<div class="an-info-content notifications-info notifications-content">
<ul class="nav" id="notif-list">
</ul>
</div> <!-- end .AN-INFO-CONTENT -->
<div class="an-info-show-all-btn">
<a class="an-btn an-btn-transparent fluid rounded uppercase small-font" href="#">Show all</a>
</div>
</div>
The problem with the code above is that you need to refresh the page first for the whole drop down menu will notify the user and display the count of the notifications.
There is lots of question and answer regarding form validation (client side) for inactive tabs, but however I couldn't do it myself right. I have three tabs on same form and using MVC data annotation, I can validate last tab(active) but it doesn't validate other 2 tabs. Here is my jquery code
var SaveUser = function () {
$("#SaveUserForm").validate({
ignore: ""
});
if (!$("#SaveUserForm").valid()) {
return false;
} else {
var formdata = new FormData($('#SaveUserForm')[0]);
$.ajax({
type: "POST",
url: "#Url.Action("SaveUser", "UserMenu")",
data: formdata,
processData: false,
contentType: false,
success: function(d) {
if (d.Result === 'true') {
alert('success');
} else {
alert('not success');
}
},
error: function() {
}
});
}
return true;
}
Is there any process that could validate inactive tabs as well?
How could make error tab focus-able?
Thanks in advance....
Update
Html code for tabs:
<ul class="nav nav-tabs">
<li class="active">Basic Information</li>
<li>Login Information</li>
<li>Login Time</li>
</ul>
and Tabs content:
<div class="tab-content">
<div class="tab-pane active" id="activity">
//Some input fields
</div>
<div class="tab-pane" id="timeline">
//other input fields
</div>
<div class="tab-pane" id="settings">
//Input fields with
<i class="fa fa-floppy-o"></i> Save
</div>
</div>
JQuery:
$("#shoppingCart").droppable(
{
accept: ".block",
drop: function (ev, ui) {
var droppedItem = $(ui.draggable).clone();
$(this).append(droppedItem);
$.ajax({
type: "POST",
url: '/Social/AddSocialToList/' + $(ui.draggable).attr("id"),
success: function (data) {
}
});
}
}
);
});
Controller:
[Route("socialmedia")]
public class SocialController : Controller
{
[HttpPost, Route("AddSocialToList")]
public IActionResult AddSocialToList(string _id)
{
TwitterModel tm = new TwitterModel { Key = _id, ScreenName = "Screen1" };
_db2._SocialList.Add(tm);
_db2.SaveChanges();
return RedirectToAction("Index", "Social");
}
}
Html:
<div id="imageboundary">
<div id="shoppingCart" style="background:#00ffff; width:200px; padding:10px; margin:10px;">
<ul id="cart"></ul>
#foreach (var socialList in Model)
{
#Html.Partial("_SocialList", socialList)
}
</div>
<article class="blog-post" style="display: inline" >
<ul class="links">
<li>
<img alt="Widget View" src="~/images/thumbnailtwitter.jpg" style="width: 50px; height: 50px;">
#Model.Key
#Model.ScreenName
</li>
</ul>
I am new to MVC I have done serval tutorials. I have List of objects coming from a database successfully through the controller So I would like to drag and drop a copy of the object from the draggable div into a droppable. But I would like to add that object to the database. But stays on the same page. When I send the ID across to the controller to query it is saying:
jquery-3.1.1.min.js:11 POST http://localhost:61615/Social/AddSocialToList/undefined 404 (Not Found)
I would like to take the database key (Model.Key) from the draggable object and pass it through the jquery.
I think it's because your droppable item "article" does not have an attribute named "id".
Try something like this:
HTML:
<article data-key="#Model.Key" class="blog-post" style="display: inline" >
<ul class="links">
<li>
<img alt="Widget View" src="~/images/thumbnailtwitter.jpg" style="width: 50px; height: 50px;">
#Model.Key
#Model.ScreenName
</li>
</ul>
JQuery:
$("#shoppingCart").droppable(
{
accept: ".block",
drop: function (ev, ui) {
var droppedItem = $(ui.draggable).clone();
$(this).append(droppedItem);
$.ajax({
type: "POST",
url: '/Social/AddSocialToList/' + $(ui.draggable).data("key"),
success: function (data) {
}
});
}
});
I'm trying to develop my skills with Ajax
I want to change my wrapper content with a different pages wrapper content without having to refresh the page.
I'm using:
$(function () {
$("#page2btn").click(function () {
$.ajax({
url: 'page2.asp',
data: { id: $(this).attr('id') },
success: function (data) {
$('#Wrapper').html(data);
}
});
});
});
<div id="Wrapper">
<div id="menu">
<a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
<a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
<a class="navbutton" onclick="MakeRequest3()">Page3</a>
</div>
<h1>Test1</h1>
</div>
and another page called page2.asp
with a different wrapper content saying Test2
But my wrapper wont change when I click the button.
any help would be appreciated.
Try to simplify it to determine if this is a problem with your front-end or back-end code...
Try this and see of it works any better..
$('#Wrapper').load('page2.asp?id='+$(this).attr('id'));
Try this:
$(function () {
$("#page2btn").click(function () {
$.ajax({
url: 'page2.asp',
data: { id: $(this).attr('id') },
success: function (data) {
$('#dynamic_content_div').html(data);//data = <h1>Test 2</h1>
}
});
});
});
HTML:
<div id="Wrapper">
<div id="menu">
<a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
<a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
<a class="navbutton" onclick="MakeRequest3()">Page3</a>
</div>
<div id="dynamic_content_div">
<h1>Test1</h1>
</div>
</div>
Javascript is case sensitive. You are using lowercase in case of assigning the event -
$(function () {
$("#page2btn").click(function () { //lowercase P
...
});
});
but using uppercase for html id
...
<a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span> //upper case P
...
so, it never finds the item to bind to, thus nothing happens when you click. Either change js to -
$("#Page2btn").click(function ()
or change html to -
<a class="navbutton" id="page2btn">Page2</a> <span class="navbutton">|</span>
Other than this, I don't see the error.
Try jQuery replaceWith method, like this:
$(function () {
$("#page2btn").click(function () {
$.ajax({
url: 'page2.asp',
data: { id: $(this).attr('id') },
success: function (data) {
$("#Wrapper").replaceWith(data); //try with double qoutes
}
});
});
});
*The link below maybe helpful:
Change content of div using jQuery