We Keep Coding

AJAX isn't posting to controller method

On my view page I have it where a user can click my 'Add Part' button to add the part they selected from the dropdown. This looks like this
<div id="Part" class="row">
<div class="col-md-2">
#Html.DropDownList("PartID", null, "-- Select --", htmlAttributes: new { #class = "form-control chosen-select Part-select" })
</div>
<div class="col-md-2">
<input type="button" value="Add Part" class="btn" onclick="add()"/>
</div>
</div>
As you can see it includes my button that should call my add() JavaScript function that looks like this
<script type="text/javascript">
function add() {
var token = $("input[name='__RequestVerificationToken']", "#__AjaxAntiForgeryForm").val();
var parts = [];
// Get all part ids and store them in arrays
var partssel = document.getElementsByClassName("Part-select");
for (i = 0; i < partssel.length; i++) {
parts[i] = partssel[i].options[partssel[i].selectedIndex].value;
}
alert("I am an alert box!");
$.ajax({
type: "POST",
url: "#IGT.baseUrl/JODetailsAjax/AddUnits",
traditional: true,
data: {
__RequestVerificationToken: token,
jo_id: #Model.Id,
addPart_id: parts
},
success: function (data) {
if (data.success === "False") {
var errorMessage = data.Message;
alert("Error: " + errorMessage);
return;
}
},
error: function (jqXHR, status, error) {
alert("Error:" + error);
}
});
}
</script>
I verified it's running the method as it hits the Alert, but when it goes through the AJAX section of it, it always returns the 'error' alert in the AJAX method instead of going to my POST Method in my controller. (I verified it's not hitting my POST method by putting a breakpoint at the beginning of it)
Here is what is showing in the network tab of my developer console
Why is this not working?

Change a tooltip content on hover over session times button

My ASP.Net webpage generates buttons with below codes
<a id="1173766" val="248506" titletext="<b>Click to book online for ABC Cinemas</b><strong>$10 tickets </strong>: Preview Screening<br /><br />Seats Available: 35<br />Screening in Cinema 1" target="_self" href="https://localhost:6969/VenueTicketing/Start.aspx?sessionId=248506&cinemaId=cbcc0921bb8e233ab9626690" class="tooltip" title="<b>Click to book online for ABC Cinemas</b><strong>$10 tickets </strong>: Preview Screening<br /><br />Seats Available: 35<br />Screening in Cinema 1">11:30am</a>
When I hover over session I see basic information about session like screen name and seats remaining. Please see screenshot attached
On hover over session I want to display real time seats remaining number, So i am making an ajax call to a function which send api request and get live seats remaining number.
I am trying to update seats remaining number on rendered page by using following java script code.
<script type="text/javascript">
$(document).ready(function () {
function handler(ev) {
var target = $(ev.target);
var sessionid = target.attr('id');
var sessionPOSid = target.attr('val');
var TooolTipText = target.attr('titletext');
target.attr('title', TooolTipText);
if (sessionPOSid == "done")
{
}
else
{
if (target.is(".tooltip")) {
$.ajax({
type: "POST",
url: '../WebService/Home_SessionTimes.asmx/GetSeatsRemaining',
data: "{sessionId: '" + sessionid + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//alert(msg.d);
var n = TooolTipText.indexOf("Seats Available: ");
var t = TooolTipText.substr(n + 17, 3);
if (t.indexOf("<") >= 0) {
if (t.indexOf("<") == 2) {
t = t.replace("<", "");
}
else {
t = t.Substring(0, 1);
}
}
TooolTipText = TooolTipText.replace(t, msg.d);
$('#' + sessionid).attr('title', TooolTipText);
$('#' + sessionid).attr('titletext', TooolTipText);
//$('#' + sessionid).attr('val', "done");
target.attr('title', TooolTipText);
target.tooltiptext = TooolTipText;
},
});
}
}
}
$(".tooltip").mouseover(handler);
});
Above code updates the "titletext" field of tag but does't change anything on "title" field.
Any help would be appreciated.

I have solved this by using qtip. Every time user hovers over div with 'sessiontimes' class, I make ajax call to generate tooltip text (that comes from server based upon session time).
This is my output now:
This is the jQuery code. you need to import qtip css and script files from their website.
<script type="text/javascript">
$(document).ready(function () {
$('.sessiontimes').qtip({
style: { classes: 'qtip-bootstrap' },
content: {
text: function (event, api) {
$.ajax({
url: '../SessionToolTip.aspx',
data: 'sid=' + $(this).children("a").attr("id"),
dataType: "text",
})
.then(function (content) {
api.set('content.text', content);
}, function (xhr, status, error) {
api.set('content.text', status + ':' + error);
});
return 'Loading...';
}
}
});
});
</script>

If you may look at this post and see if the same answer could apply to your situation
JQUERY Change Title not working with tooltip

Dynamicly Change & Pass variable to partial in rails

Ok what i have is a Data table that has many records in it and each has there own button to open a dialog box. I want each dialog box to be able to change the data each time thru an AJAX request and is opened to the right data...
Problem is I need the sub variable to change dynamically and be different every time the AJAX script is ran..
Works perfectly the first time... but doesn't change on next load.. not sure if it is the Div replaceWith() or if it is something else.
Button:
<input class="payment_lookup" id="<%= account["account_code"] %>" type="button" value="View Payment Info">
Javascript:
$(".payment_lookup").on("click", function(event) {
var id = event.target.id;
$.ajax({
url: "/billing/" + id + "/toggle_partial",
type: "POST",
success: function (data) {
$("#payment_data").dialog("open");
},
error: function (jqXHR, textStatus, errorThrown) {
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;
});
$("#payment_data").dialog({
autoOpen: false,
width: $(window).width()-100,
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
});
Routes:
post 'billing/:id/toggle_partial' => "billing#toggle_partial"
Controller:
def toggle_partial
code = params[:id]
#sub = subscription_info(code)
respond_to do |format|
format.js
end
end
def subscription_info(paysysid)
unless paysysid.nil? || paysysid.empty?
Recurly::Account.find(paysysid)
end
end
toggle_partial.js
$("#payment_data_details").replaceWith("<%= escape_javascript(render(:partial => 'payment_data', :sub => #sub )) %>");
Also Tried this:
$("#payment_data_details").replaceWith("<%= escape_javascript(render(:partial => 'payment_data', :locals =>{ :sub => #sub } )) %>");
Update:
I have logged everything:
everything works perfectly to the toggle_partial.js
#sub changes everytime it hits that partial JS file. and it passes the #sub to the partial as sub
BUT:
once sub is set in the view the first time it does not change it on the second request...
2nd UPDATE...
Have it Narrowed Down to The replaceWith() if i change it to append() it appends with the new variable information... but i would rather have it replace the previous information... not actually append....
SOLVED
added $("#payment_data_details").empty(); into the Onclick Javascript so that it emptys the contents of that div. before it trys to set new.
$(".payment_lookup").on("click", function(event) {
var id = event.target.id;
$("#payment_data_details").empty();
$.ajax({
url: "/billing/" + id + "/toggle_partial",
type: "POST",
success: function (data) {
$("#payment_data").dialog("open");
},
error: function (jqXHR, textStatus, errorThrown) {
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;
});

using colorbox over another colorbox using jquery/ajax

i have a page where i'm using a with id="emailfrnd", from the following script i successfully implemented the colorbox:
<script type="text/javascript">
$(document).ready(function(){
$("#emailfrnd").colorbox({
inline: true,
href:"#ef",
close:"",
opacity:0.95,
onClosed:function(){
//window.parent.location.reload(true);
}
});
});
</script>
now the new colorbox contains a form with a send button in it of id "emailfrnd_submit" now i had written some validations using the jquery & ajax and if there are no errorMessages i'll get another colorbox and the code is as follows:
if (errorMessage == '') {
$.ajax({
type: 'POST',
url: root_url + '/services/services.php?method=emailfrnd',
data: "name=" + name + "&email=" + email + "&message=" + message,
async: true,
success: function (data) {
if (data == 1) {
$("#emailfrnd_submit").colorbox({
inline: false,
close: "",
html: "<div style='height:230px;width:400px;display:block;'><p style='color:black;font:16px verdana;'>Your email was successfully sent.</p><br/><p style='color:gray; font:16px verdana;'>Thank you for telling your friend</p><div id='emailfrnd_sub' style='width: 50px;margin-top:30px;float: right;'><input type='submit' value='OK' name='emailfrnd_submit' id='emailfrnd_sub' class='redbut' style='float:right;position:absolute;right: 198px;margin-top: 0px;color:white;'></div></div>",
opacity: 0.95,
onClosed: function () {
//window.parent.location.reload(true);
}
});
//window.location.assign("../index.php");
} else {
alert('mail not send');
}
}
});
} else {
alert(errorMessage);
}
});
upto now i succeed in getting the things as i want, here after doing the validations and onclick the send button according to this code a new colorbox with the html content as above is coming, here i have a Ok button here, i want to make that button as the closing button of this colorbox. how can i get that functionality for the ok button here??
anyone help is much appreciated....thanks in advance.....

You don't need 2 colorboxes to do it.
Why don't you simple create a div which class is message_content and you update it's text according to the ajax status ?
It's much better.
Example:
html:
<div id="colorbox_content"> //#todo: change to colorbox id
<form id="your_form"> //#todo: change according to your form id
</form>
<div class="message_content">
<p class="message"></p>
<span class="close">Close</span>
</div>
</div>
js:
/**
* Close message
*/
jQuery('#colorbox_content').on('click', '.close', function() {
jQuery(this).closest('#message_content').slideUp();
});
/**
* On form submit
*/
if (errorMessage == '') {
$.ajax({
type: 'POST',
url: root_url + '/services/services.php?method=emailfrnd',
data: "name=" + name + "&email=" + email + "&message=" + message,
async: true,
success: function (data) {
if (data == 1) {
var message = "Your email was successfully sent.";
//window.location.assign("../index.php");
} else {
var message = "Your email was successfully sent.";
}
jQuery('#colorbox_content').slideDown().find('.message').text(message);
}
});
} else {
alert(errorMessage);
}
Update based on this comment:
If you want the same funcionality for different buttons you have to use the same class for them.
here's what do you need.
demo
I changed some ids to classes so you don't need 2 events with the same code.
And here's the las version.
You can see that you can store your options for each kind of colorbox and then pass them thrue parameter.

i got the answer and the fiddile shows how to do it.....::::)))))
http://jsfiddle.net/srinivaswaterdrop01/4vuDC/189/

Passing parameters to a JQuery function

I'm creating HTML with a loop that has a column for Action. That column
is a Hyperlink that when the user clicks calls a JavaScript
function and passes the parameters...
example:
<a href="#" OnClick="DoAction(1,'Jose');" > Click </a>
<a href="#" OnClick="DoAction(2,'Juan');" > Click </a>
<a href="#" OnClick="DoAction(3,'Pedro');" > Click </a>
...
<a href="#" OnClick="DoAction(n,'xxx');" > Click </a>
I want that function to call an Ajax jQuery function with the correct
parameters.
Any help?

Using POST
function DoAction( id, name )
{
$.ajax({
type: "POST",
url: "someurl.php",
data: "id=" + id + "&name=" + name,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
Using GET
function DoAction( id, name )
{
$.ajax({
type: "GET",
url: "someurl.php",
data: "id=" + id + "&name=" + name,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
EDIT:
A, perhaps, better way to do this that would work (using GET) if javascript were not enabled would be to generate the URL for the href, then use a click handler to call that URL via ajax instead.
Click
Click
Click
...
Click
<script type="text/javascript">
$(function() {
$('.ajax-link').click( function() {
$.get( $(this).attr('href'), function(msg) {
alert( "Data Saved: " + msg );
});
return false; // don't follow the link!
});
});
</script>

If you want to do an ajax call or a simple javascript function, don't forget to close your function with the return false
like this:
function DoAction(id, name)
{
// your code
return false;
}

Do you want to pass parameters to another page or to the function only?
If only the function, you don't need to add the $.ajax() tvanfosson added. Just add your function content instead.
Like:
function DoAction (id, name ) {
// ...
// do anything you want here
alert ("id: "+id+" - name: "+name);
//...
}
This will return an alert box with the id and name values.

try something like this
#vote_links a will catch all ids inside vote links div id ...
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(\'#vote_links a\').click(function() {// alert(\'vote clicked\');
var det = jQuery(this).get(0).id.split("-");// alert(jQuery(this).get(0).id);
var votes_id = det[0];
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){

<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
function omtCallFromAjax(urlVariable)
{
alert("omt:"+urlVariable);
$("#omtDiv").load("omtt.php?"+urlVariable);
}
</script>
try this it work for me