I am trying to figure out how to have a script run when I select "month" in a full calendar derivative.
How would I go about this? Click it and EVERYTHING else happens, but a script of my choosing also runs.
regardless of whether you are using the select or dayclick, you should be able to have a function run within that callback and then use $.ajax function to run your php script (assuming you are using php since you did not specify). Here is a short example...
var calendar = $('#calendar').fullCalendar({
select: function(s, e, a) {
myfunction();
}
});
And then outside of the calendar var...
function myfunction(){
$.ajax({
url: 'myscript.php',
data: {myvariable: myvariable},
type: 'post',
success: function(data){
alert(data);
}
});
}
I cant see why this wouldn't work
Here you go:
$(document).ready(function() {
// ... you can have other things here ...
$('.fc-button-month > .fc-button-inner').live('click', function() {
alert('I am here ..');
});
});
Related
The Discover Meteor book shows how to use the sasha:spin package to show a loading spinner template (<template name="loading">) while IronRouter waits for data.
How do I use this same loading template while I'm waiting for a regular jQuery ajax call to finish?
var locationInfoByZipcode = function(zipcode, callback){
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// Render the loading template. I tried Blaze.render("loading") but I'm not using it right
}.
success: function(response){
// Stop the loading template.
},
error: function(){
callback("error");
}
});
};
Blaze.render takes a template and a parent, not a string, so it'd be Template.loading and then the parent template you want to render into. You'd probably want to destroy it in the success callback.
What might be a little bit cleaner is putting the HTTP req inside a method along with a reactive variable & calling that method on click. Then, you can keep the loading template inside an #if reactiveVarIsTrue type thing in spacebars. Just a personal preference to not use jquery ajax calls if I can help it because they're not very expressive.
I got it.
var locationInfoByZipcode = function(zipcode, callback){
var renderedView = {};
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// $('body')[0] is the DOM node object that .render() needs
renderedView = Blaze.render( Template.loading, $('body')[0] );
},
success: function(response){
// to remove the template you need to pass Blaze.remove() the returned value from the initial Blaze.render() call
Blaze.remove(renderedView);
callback(response);
},
error: function(){
callback("error");
}
});
};
When I use ajax, I noticed that Jquery effects don't work. The reason is "The new HTML you're adding to the DOM (page) didn't exist when your jquery ran the first time "
another similar question
Therefore, I changed my code to following but still I don't get the jquery effects.
Where I have done the mistake?
Previous code
$("#sendemp").click(function(e) {
e.preventDefault();
var submit_val = $("#searchbox").val();
//alert('submitval is ' + submit_val);
$.ajax( {
type : "POST",
//dataType :"jason",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'employee_pimary_details',
user_name : submit_val
},
success : function(data) {
// alert('hhh');
$('#accordion21').html(data);
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
});
New code
$("button").on( "click", "#accordion3",function(){
$.ajax( {
type : "POST",
dataType : "json",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'employee_deatils_search',
user_name : submit_val
},
success : function(data) {
// alert('hhh');
$('#accordion3').html(data);
$("tr:odd").css("background-color", "#F8F8F8");
$("#accordion3").accordion({ heightStyle: "fill", active: 0 });
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
} );
I have following submit button
<input type="submit" id="sendemp" value="Search" />
I don't think your click binding is correct, if you want to handle clicks on button inside #accordion3 change it to:
$("#accordion3").on( "click", "button",function(){...});
It is hard to tell without your html, but it looks like in your old code you are replacing the sendemp button. In your new code your event delegation is incorrectly specified. You are applying delegation to a button element (which doens't exist since your sendemp button is an input element).
Apply delegate to something that is the parent of #sendemp like so:
$('body').on('click', '#sendemp', function() {
// your ajax call
});
I could fix the issue, I tried the above solution that is using on method. However, it doesn't make sense to my problem.
As following artical explain I think, Accordion is already instantiated and effects are persistance. When it is called second time, it won't create again since there is already the effects.
Therefore, I needed to destroy it and recreate accordion.
support link
I changed the code on success as follows
success : function(data) {
// alert('hhh');
$('#accordion3').accordion('destroy');
$('#accordion3').html(data);
$("tr:odd").css("background-color", "#F8F8F8");
//$("#accordion3").accordion( "disable" );
$("#accordion3").accordion({ active: 0 });
}
And out of $(document).ready(function() {
I added
$(function() {
$("#accordion3").accordion({
// heightStyle: "fill",
active: 0 });
});
Dont know what's wrong with the following jquery.I can't get to grab the the variable 'ltable' with 'GET' in my PHP script which is in a div #dispsome in the same page.
var text = $('#ltable option:selected').val();
$.get('searchnsendmail2.php', {ltable:text}, function(data) {alert(ltable);
$('#dispsome').fadeIn('fast');
$('#sall').fadeOut('fast');
});
Just to make the question clearer, I need to use the value of Text in a PHP mysql query in #dispsome. I am trying to capture it with $_GET['ltable']. But doesnt work ! The alert is showing [Object HtmlSelectElement] and not the value of ltable/text
use $.ajax my example:
$("#edit_client").submit(function(){
var data = $(this).serialize();
$.ajax({
type:"POST",
url:"./../ajax/ajax.php",
data: data,
success: function(response){
$("td#output").html(response);
}
});
event.preventDefault();
});
It works.
I might be wrong about what is actually happening here but i have 3 Html.dropdownlists. And im using jquery to handle filtering which does actually work. However, there is some odd behaviour which i think might be because data isnt finished loading before the next function is called.
For instance:
Some background.
Company: Owns several field offices
Field Office: Owns several facilties
So logically, when you change company, field offices should change, which then changes facilities.
$(function () {
$(document).ready(function () {
var cid = $("#CompanyId").val();
$.post("/ManifestSearch/GetFilteredFieldOffices", { id: cid }, function (data) {
$("#FieldOfficeId").loadSelect(data);
});
var fid = $("#FieldOfficeId").val();
$.post("/ManifestSearch/GetFilteredFacilities", { id: fid }, function (data) {
$("#FacilityId").loadSelect(data);
});
});
});
Now, when the page loads, everything looks fine. All the dropdownlists have the correct data.
When i change company, this calls.
$(function () {
$('#CompanyId').change(function () {
var cid = $(this).val();
$.post("/ManifestSearch/GetFilteredFieldOffices", { id: cid }, function (data) {
$("#FieldOfficeId").loadSelect(data);
});
var fid = $("#FieldOfficeId").val();
$.post("/ManifestSearch/GetFilteredFacilities", { id: fid }, function (data) {
$("#FacilityId").loadSelect(data);
});
});
});
This changes the field offices to the correct list, however facilities changes to whatever field offices was set to before the company change occured. I dont know enough about jquery to figure out exactly what is going on, but my instinct tells me that the two posts are happening at the same time, and the second post happens before the first one is finished.
It's the nature of an asynchronous request.. you don't know which order they will finish in so you can't always assume the data from the first one will be available to the second one.
Ideally, your second request should be within the onSuccess callback function of the first request, with an onFailure/onError function handler to take care of any problems that arise.
I'm using the following jQuery script to send a 'Make' parameter to filter my 'Models':
$(document).ready(function () { $(".autocomplete_make").autocomplete("/AutoComplete/Make.ashx"); });
$(document).ready
(function () {
$(".autocomplete_model").autocomplete("/AutoComplete/Model.ashx"
, extraParams: {
make: function() {return $(".autocomplete_make").val(); }
}
);
});
The text entered is passed to the .ashx file as a 'q' querystring, however, I'm not sure how I access my extraParam 'Make' so I can pass this to my stored procedure in the Generic Handler file. How do I do this?
Thanks,
Curt
It should be as simple as:
context.Request("make")
Which I believe you know already.
The only other problem I see is that your javascript looks a little flawed because you are not passing in an object as the second parameter (the options).
Here is the corrected code (I hope):
$(document).ready(function () {
$(".autocomplete_model").autocomplete("/AutoComplete/Model.ashx", {
extraParams: {
make: function() {
return $(".autocomplete_make").val();
}
}
});
});