$(document).ready(function() {
$("#client-list").on("change", function() {
var selectedValue = $(this).val();
location.reload();
});
});
how to refresh only div with id='calender', instead of refreshing complete page, onchange dropdown list option? Complete source i have created a fiddle or how to keep slected option in drop down which was selected and refresh rest of the page?
You cannot reload only a part of your page unless you use IFRAMES.
Instead, you'll have to use AJAX. Here is a quick example:
<script>
function refreshCalendar()
{
$.ajax({
type: "GET",
url: 'http://yourdomain/api/whatever',
data: "", // You can send some data to the servers
success: function(data) {
$('#calendar').html(data);
}
});
}
</script>
You can refresh fullCalender as like this.
Put you calendar code in a function LoadCalendar then call it once on document ready and once on change of dropdown.
function LoadCalendar() {
$('#calendar').fullCalendar({
//your options
});
}
$(function(){
LoadCalendar();
$("#client-list").on("change", function() {
var selectedValue = $(this).val();
LoadCalendar();
});
});
Related
So for some reason, I created two modals. However, when I open either of them the first time, and then close the modal it will no longer open either of the two when I do t he action that worked the first time.
here is my javascript:
<script>
$(document).ready(function()
{
$("#accountsTable").tablesorter();
$('#newAccount').on('click', function() {
$.ajax({
async:true,
url: '/crm/accounts/create_account_modal',
success: function(res)
{
$('.createAccountModalBody');
alert(res);
$('#createAccountModal').modal({show:true});
$('.createAccountModalBody').html(res);
}});
});
$('tr').on('dblclick', function() {
var AccountID = $(this).find('td').first().html();
alert(AccountID);
$('.editAccountModalBody').load('/crm/accounts/edit_account/1');
$('#editAccountModal').modal('show');
});
$('#editAccountModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
$(this).empty();
$(this).removeAttr('style');
});
$('#createAccountModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
$(this).empty();
$(this).removeAttr('style');
});
});
$('tr').on('dblclick', function() {
var AccountID = $(this).find('td').first().html();
alert(AccountID);
$('.editAccountModalBody').load('/crm/accounts/create_account_modal');
$('#editAccountModal').modal('show');
});
</script>
with
$(this).empty();
you are removing all the html inside the modal, so you'll not have the html displayed on the next click
I suggest to append the data on a particular id / class name and just empty that id and not the whole modal
like:
$("#editAccountModalDATA").empty();
I have a table with a td that updates when i press a button .pauseDocker
When It's paused I'm reloading the page. Surely there's a smarter way to just refresh just part of the page in this case the table.
$(document).on('click','.pauseDocker' ,function(){
var buttonClicked = $(this);
var containerName = $(this).attr('name');
$.ajax({
type: 'post',
url: '/container/pause',
data: {containerName: containerName},
success: function () {
location.reload();
},
error: function() {
}
});
});
You can get the first parameter of the success callback and this will contain data from the response of your server. Use that to retrieve the changed data and update client side accordingly
I have a heavily ajax based application wherein i only have a login page and the main page.
Most of my links are "ajaxed" and i have them done like this:
//get the href of the link that has been clicked, ajaxify ANY links
$(document).on('click', '.tree a', function () {
var link = $(this).attr('href'); //get the href off the list
$.ajax({ //ajax request to post the partial View
url: link,
type: 'POST',
cache: false,
success: function (result) {
$('#target').html(result);
$.validator.unobtrusive.parse($("form#ValidateForm"));
}
});
return false; //intercept the link
});
I want to implement "pushState" on my application and the first step that i have done so far is to add this code:
$(document).on('click', 'a', function () {
history.pushState({}, '', $(this).attr("href"));
});
Now it updates my address bar whenever i click on any of my links and the ajax content gets successfully loaded.
I am kinda new to this API so i don't know what am i missing but here are my issues so far:
when i press the "back" button, nothing happens. I read about "popstate" and browsed through SO to look for solutions but i can't
seem to make them work.
When i click the link from the history, i get the "raw" view of the child html w/o the layout from the master html. What do i need to do if i want it to be displayed like
it was clicked from my main application?
Most of my child views are either forms or list.
This code should help you :
function openURL(href){
var link = href; //$(this).attr('href');
$.ajax({
url: link,
type: 'POST',
cache: false,
success: function (result) {
$('#target').html(result);
$.validator.unobtrusive.parse($("form#ValidateForm"));
}
});
window.history.pushState({href: href}, '', href);
}
$(document).ready(function() {
$(document).on('click', 'a', function () {
openURL($(this).attr("href"));
return false; //intercept the link
});
window.addEventListener('popstate', function(e){
if(e.state)
openURL(e.state.href);
});
});
I am using the "Second Solution" from this problem:
call the same jQuery function in multiple buttons
I am dynamically creating my buttons, based on an input, so there is currently 45 buttons! (used to select page number)
Is there a way to use the value of the button as data in my $.get so I can pull the data for the page?
$('.bclick').click(function(){
$.getJSON("url", { page: [need button data here] }, function(data){
//Some actionable code
})
});
.bclick is the class given to each of the buttons created.
when you are inside of the function, the reserved word this is a reference to your clicked button.
$('.bclick').click(function(){
var page = $(this).val();
$.getJSON("url", { page: page }, function(data){
//Some actionable code
})
});
If your buttons are created dinamically probably this solution won't work. I may suggest you to use $.on():
$("parent selector or form selector").on("click", ".bclick", function(){
var page = $(this).val();
$.getJSON("url", { page: page }, function(data){
//Some actionable code
})
})
If you are generating buttons dynamically, then use .on.
$(function(){
$(document).on("click", ".blick", function(){
var $this = $(this);
var buttonName = $this.attr("name");
});
});
Sample code
Yes you can by adding an extra attribute to your .bclick element, for example
<button class="bclick" data="your data here"></button>.
Then
$('.bclick').click(function(){
var buttonData = $(this).attr('data');
$.getJSON("url", { page: buttonData }, function(data){
//Some actionable code
})
});
On a page with a tab control, each tab contains a table, each tr contains a td with a button which has a value assigned to it.
<td>
<button type="button" class="btn" name="deleteEventBtn" value="1">Delete</button>
</td>
This code below works for the first delete. After the AJAX call & the refresh of the div, no further delete buttons can be clicked. The .on is attached to the document. The same happens if I attach it to the body or anything closer to the buttons.
function deleteRecord(url, id, container) {
$.ajax({
type: "POST",
url: url,
data: { id: id },
success: function (data) {
$('#delete-popup').hide();
$(container).trigger('refresh');
}
});
}
$(document).ready(function () {
$(document).on('click', '[name^="delete"]', function (e) {
e.preventDefault();
var id = $(this).val();
$('#current-record-id').val(id);
$('#delete-popup').modal('show');
});
$('#delete-btn-yes').on('click', function (e) {
e.preventDefault();
var recordId = $('#current-record-id').val();
var recordType = location.hash;
switch (recordType) {
case "#personList":
deleteRecord(url, recordId, recordType);
break;
}
});
});
Any ideas? Could it be related to the wildcard for starts with [name^="delete"]? There are no other elements where the name starts with 'delete'.
EDIT
When replacing
$(container).trigger('refresh');
with
location.reload();
it "works", however that refreshes the whole page, loses the users position and defeats the point of using AJAX.
As the button click is firing at first attempt, there is no issue in that code. All you have to do is, put the button click event in a method and call it after the refresh. This way, the events will be attached to the element again. See the code below,
function deleteRecord(url, id, container) {
$.ajax({
type: "POST",
url: url,
data: { id: id },
success: function (data) {
$('#delete-popup').hide();
$(container).trigger('refresh');
BindEvents();
}
});
}
$(document).ready(function () {
BindEvents();
});
function BindEvents()
{
$(document).on('click', '[name^="delete"]', function (e) {
e.preventDefault();
var id = $(this).val();
$('#current-record-id').val(id);
$('#delete-popup').modal('show');
});
$('#delete-btn-yes').on('click', function (e) {
e.preventDefault();
var recordId = $('#current-record-id').val();
var recordType = location.hash;
switch (recordType) {
case "#personList":
deleteRecord(url, recordId, recordType);
break;
});
}
Apologies to all and thanks for your answers. The problem was due to the way the popup was being shown & hidden.
$('#delete-popup').modal('show');
and
$('#delete-popup').hide();
When I changed this line to:
$('#delete-popup').modal('hide');
it worked. Thanks to LShetty, the alert (in the right place) did help!
If you are using Bootstrap Modal
After Ajax Request before Refreshing page add
$('.modal').modal('hide');
This Line will Close your Modal and reload your page. Before that it will complete all Ajax Request things.
But for google chrome there is no issues :) hope this help someone.