Why is jquery post not working? - jquery-post

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.

Related

How to manually render a template in Meteor?

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");
}
});
};

How to change page title dynamicly without refresh site

i wanna have a Faceook-Feature in my website: Everytime a user gets a Private Message, the title should be change in something like "[1 PM] TITLE",
How to do that?
I know its easy to change the page-title, the question is how to run a database query every 10 seconds (or is that to often?) and change the title - Without an user interaction (ajax?)
You can use jquery setInterval to make a AJAX request after a certain interval to get data from the db.
$(function(){
setInterval(function() {
$.ajax({
url: "page.html",
success: {
document.title ='new title';
},
error: function(){
//error occurred
}
});
}, 2000);
});
And on AJAX success you can change the page title.

Have a script (JS) run when I click the month button

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 ..');
});
});

Jquery UI AutoComplete Sending extra dynamic parameters to ashx

I am trying to pass extra parameters through to my ashx when using Jquery UI auto complete.
I have seen lots of examples and have spent ages fiddling but I can't get mine to work.
I have two auto complete textboxes, what ever is entered in the first one needs to narrow down the search for the second one.
On my first autocomplete textbox all works fine and the ID that is returned is set to a hidden field.
$("#<%=txtSearch1.ClientID%>").autocomplete('/Search1.ashx');
$('#<%=txtSearch1.ClientID%>').result(function (event, data, formatted)
{
if (data) {
var id = data[1];
$("#<%=hdnSearched1.ClientID%>").val(id);
}
});
I want to use the value of the hidden field along with the value the user enters into the second textbox to do the search for the second auto complete
I first tried this:
$("#<%=txtSearch2.ClientID%>").autocomplete('/Search2.ashx',{
extraParams: { "Id": $("#<%=hdnSearched1.ClientID%>").val() }});
This fired my ashx but the Id in the extraparams was blank. A bit of googling told me this was because it was set when the page loaded so the value for the extra param was set before I set the value of the hidden field.
I did a bit more fiddling and searching and came up with something like this which a lot of people seem to be using.
$('#<%=this.txtSearch2.ClientID %>').autocomplete({
source: function (request, response)
{
$.ajax({
url: '/Search2.ashx',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
term: request.term,
sId: $("#<%=hdnSearched1.ClientID%>").val()
},
success: function (data)
{
response(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
}
});
}
});
The problem is this doesn't even fire the ashx! I have been fiddling about with this for ages, following example after example but I can't seem to work what I am doing wrong!
I'm sure it must be obvious!
Can anyone help?

How to call a serverside method using jquery?

I'm trying to call a server side method, using jquery, on the textchange event of a textbox which is generated dynamically on the clientside (I dont know how to fetch the id of this). Can somebody help me to do this stuff? The script im using is as follows:
<script type="text/javascript">
$(init);
function init() {
$('#test').droppable( //Div Control where i'll be dropping items
{
drop: handleDropEvent
});
$('a').each(function(idx, item) {
$(item).draggable({ cursor: 'move', helper: 'clone' })
});
}
function handleDropEvent(event, ui) {
var draggable = ui.draggable;
document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
}
$('.textChangeClass').live('change', function() {
/* Evokes on the text change event for the entire textboxes of class .textChangeClass. Is it possible to specify the dynamic textbox generated # clientside here? (like for e.g. : $('#mytextbox').click(function () ) */
$.ajax({
type: "POST",
url: "Webtop.aspx/ServerSideMethod", //This is not getting called at all.
data: "{'param1': AssignedToID}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
alert("From Server");
}
})
});
});
function addColumn(column) {
var iHtml;
//This is how i'm generating the textboxes along with a checkbox bound by a div.
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="textChangeClass" type="text" id="aln' + column + '"> </div>';
return iHtml
}
</script>
I think you have an extra "});" although this probably isn't the problem.
What is "AssignedToID"? Try adding single quotes around that. I seem to remember having a weird problem a couple years ago related to quoting in the json.
Can you see the request in Fiddler/firebug/etc? Is the content correct?
You should be careful of your use of inferred semi-colons too. If you ever minify your javascript (yeah, I know this is embedded, but I'd like to hope that one day it will be moved to a seperate js file) you're eventually going to have a problem. Imagine some other developer comes along, does some refactoring and needs to add a return value after the ajax call.
$.ajax({...})return foo}
EDIT
Fiddler/Firebug Net panel are your friends... They will allow you to inspect the request and the response from the server. This way you don't have to add the error handler (although you may want to for other reasons eventually)
EDIT
To answer the other part of your question, you can access the textbox for which the change event was triggered through the use of the 'this' keyword inside of the event handler.
$('.textChangeClass').live('change', function(event) {
//Note that the 'event' parameter has interesting things in it too.
var changedText = $(this).val();
alert("The value in the textbox is: '" + changedText + "'");
var data = {
param1: changedText
};
$.ajax({
...
//Using json2 library here to create json string
data: JSON.stringify(data),
...
});
});
Note that I added the optional 'event' parameter to the event handler. It has interesting things in it and it's something that is often overlooked by people who are new to jQuery. Read about it here.
You need to write you code of adding the event to textbox after generation of textbox otherwise it's not get fire.
add text box
After that write code to add event to text box or bind event to text box
just follow the above step will do your work
EDIT
Add the error function to your ajax call you will get the error ... will allow you to proceed further
$.ajax({
type: "post", url: "/SomeController/SomeAction",
success: function (data, text) {
//...
},
error: function (request, status, error) {
alert(request.responseText);
}
});

Resources