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();
}
}
});
});
Related
Can I use Tag Manager to change this line:
function verify(...
$.ajax({...
...
success: function (data, textStatus, jqXHR) {
if (data) {
...
if (data.imagePixelUrl) {
$("#footer").append("<img id='imagePixel' src='" + data.imagePixelUrl + "'/>");
to this:
function verify(...
$.ajax({...
...
success: function (data, textStatus, jqXHR) {
if (data) {
...
if (data.imagePixelUrl) {
$("#footer").append("<img id='imagePixel' src='" + data.imagePixelUrl + "'/>");
dataLayer.push({'event' : 'success'});
?
The new line is the dataLayer.push. Note it's inside a success call of an AJAX command.
Use the global ajax event handlers in jQuery, specifically the success handler. To discern between your different functions you can i.e. check the settings.url (i.e. the url you called to make your ajax request which is presumably different per function). E.g.:
$( document ).ajaxSuccess(function( event, xhr, settings ) {
if ( settings.url == "ajax/urlone.html" ) {
dataLayer.push({'event' : 'verfiy'});
} else if ( settings.url == "ajax/urltwo.html" ) {
dataLayer.push({'event' : 'function two'});
} else {
dataLayer.push({'event' : 'default'});
}
});
Update: I just found a sort-of-solution for the same question asked on Linkedin (I assume asked by the same person), so I might as well add it here. "Sort-of-solution" because it does not answer the question but solves the problem.
As the added pixel is an image and an image has an onload event one can simply attach an function to the onload handler of that image.
<script>
$('#imagePixel').on('load',function() {
alert("I am pixel hear me roar");
});
</script>
This fires as soon as the image is appended. I tested this with simple setup and it seems to work nicely.
I am trying to make a template render something on the client; I think I tried everything possible (apart from the correct thing apparently).
Html:
<head>
<title>Groups</title>
</head>
<body>
{{loginButtons}}
{{>TplGroups}}
</body>
<template name="TplGroups">
groups found: {{ GroupCount }}
{{#each GetAllGroups}}
<div> hello, {{name}} group! </div>
{{/each}}
</template>
serverStartup.js:
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
Meteor.publish("GroupCount"), function()
{
return Groups.find({});
}
});
}
and the Groups.js collection which exposes the two methods GroupCount and GetAllGroups, which I want to access on client side:
var Groups = new Meteor.Collection("groups");
Groups.insert({name: "John"});
if(Meteor.is_client)
{
Meteor.subscribe("GetAllGroups");
Meteor.subscribe("GroupCount");
Template.TplGroup.GetAllGroups = function()
{
return Groups.find({});
}
Template.TplGroup.GroupCount = function()
{
return Groups.find().count();
}
}
I have removed "insecure" and "autopublish" packages.
Where is my mistake? The two functions won't show on client.
Also what is the difference between declaring the functions as "publish" or declaring them as Template functions?
In browser console I get this:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. (jquery.js)
The publish method should look more or less like this
Meteor.publish("GetAllGroups", function () {
return Groups.find({});
});
#apendua pointed to the right solution. I took your code and refactored it to make the solution a little clearer:
server.js:
if (Meteor.isServer) {
// Publish groups
Meteor.publish('groups', function() {
return Groups.find();
});
}
groups.js
Groups = new Meteor.Collection('groups');
Groups.insert({name: 'John'});
if (Meteor.isClient) {
// Subscribe to groups
Meteor.subscribe('groups');
Template.TplGroup.GetAllGroups = function() {
return Groups.find();
}
Template.TplGroup.GroupCount = function() {
return Groups.find().count();
}
}
It is enough to publish just groups. In your groups.js you try to subscribe to a publication that does not exist (GetAllGroups). Better to just publish and subscribe to simply 'groups' and return the groups count as described above. Also with a newer version of meteor you should use Meteor.isClient and not Meteor.is_client.
The jQuery error you described is not related to your code and appears (at least what I think) because of some issue with Meteor and/or jQuery itself. Don't worry about that.
oups you just forgot "s" in your template name in your js file :
<template name="TplGroups"> <!-- what you wrote -->
and in your js you wrote :
Template.TplGroup.xxx
instead of :
Template.TplGroups.xxx
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 });
});
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 ..');
});
});
recently I came up with the following problem:
In my web site in all html pages I call a function in body onLoad event:
<body onLoad="func1();">
This is part of my template for html, so it appears on every page in my site and I can't change that. Now, the deal is that on some pages, I need to call some other functions onload and I tried with window.onload property, but it wipes the calling of func1...
I now that I can just say:
window.onload = func2(); //where func2() calls to func1()
but this seems dirty and lame? Isn't it ?
So, is there a way to add some functions to those that are about to be executed onload, without deleting the old one? In addition I use asp.net if that could help ...
Thanks!
You can use jQuery to chain on load handlers. Repeatedly using jQuery.load or jQuery(document).ready will chain your handlers (I believe). You other option is to do it programmatically, which means you need an auxiliary function that will chain your onload handlers for you. You can do this with a closure (or anonymous function):
var addOnLoadHandler = function(newHandler) {
if (typeof window.onload != 'function') {
window.onload = newHandler;
}
else {
var oldHandler = window.onload;
window.onload = function() {
if (oldHandler) {
oldHandler();
}
newHandler();
};
}
};
You will have to bind your functions programmatically though, so you would have to do:
addOnLoadHandlers(function() {
alert("Hi I am the first onLoad handler!");
});
addOnLoadHandlers(function() {
alert("Hi I am the second onLoad handler!");
});
in a javascript file (or in your html file).
Another approach is to use an array:
var onloaders = new Array();
function runOnLoads() {
for (i = 0; i < onloaders.length; i++) {
try {
var handler = onloaders[i];
handler();
} catch(error) {
alert(error.message);
}
}
}
function addLoader(obj) {
onloaders[onloaders.length] = obj;
}
In your HTML or Javascript file you do:
addLoader(function() {
alert("Hi I am the first onLoad handler!");
});
addLoader(function() {
alert("Hi I am the second onLoad handler!");
});
Then in your html you can just do <body onload="runOnLoads()">
You may want to make the best out of anonymous functions:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
Borrowed from the Top 10 custom JavaScript functions of all time.
jQuery has a nice shorthand for adding multiple defined handlers to the "ready" event (does not work with anonymous functions where you have to use $(document).ready(function(){});).
simply
$(myFunction);
$(myFunction2);
One big advantage is that if the DOM has already loaded, this still gets fired, whereas anything you bind to window.onload after the event will not get called.
have you considered a javascript library like jquery, i know that there are other approaches but jquery will make your life so much easier...
$(function(){
//Do stuff when DOM is loaded.
func1();
$('#link').click(function(){
//bind a click event
});
});
The classic approach is to just stick all of your functions at the bottom of the page :)
In jquery you can do
$(document).onload(function() {
// do something
}
//then later on do
$(document).onload(function() {
// do something here too!
}
jQuery will intelligently add both events to the onload event and both will be executed when the page loads. With jQuery you also get crossbrowser support as an added bonus.