In my admin pannel i want to create drag&drop fields to update some attribute in database.
for example
i have jquery which allow me to drop user to another table column
after i drop user to this column, i want to update attribute in database using $.ajax put method
Problem:
I dont know how to call my put method
I'm not shure that this way to figure out this issue is correct.
$(".user").draggable({
}
});
$("table tbody tr td:nth-child(3)").droppable({
accept: ".user",
drop: function( event, ui ) {
var url = ui.draggable.attr('data'); // taking the url which specified in the view
here should be some $.ajax action
}// end of drop
});
and controller
def make_an_admin
#user.find(params[:id]
#user.update_attribute(:admin, "true")
end
route
put "make_an_admin/:id", to: 'users#make_an_admin'
any suggestions
Maybe you should try:
$.ajax(url, function(){
type: 'put',
dataType: 'script',
data:
your_optionnal_data: your_optionnal_data_value
success: function (data) { alert('it works'); }
});
url should be something like '/users/make_an_admin/id'.
Related
Its my first time using the tooltip and have done a lot research on it. I used the jquery website to get most of the information. I intend my tooltip to show dynamic data when a mouse clicks the hyperlink. I added the title to my link and have this code below:
var t = 1000;
$(document).tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
$.ajax({ type: "POST",url:'/GetTooltip/', data: 80140}).always(function() {
elem.tooltip('option', 'content', 'Ajax call complete');
});
setTimeout(function(){
$(ui.tooltip).hide('destroy');
}, t);},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
I am not fully knowledgeable with the syntax of the ajax call in reference to the always function and how to get the data to show on my tooltip. the GetTooltip returns JSON data, I just want to post to the GetTooltip script and the returned data to show on my tooltip. At the moment my ajax is posting nothing.
Regarding your statement that you are not fully knowledgeable with
always function: the always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { }); is always executed after the ajax request was executed. For more see the documentation deferred.always() Please look also at jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { })
get the returned data to show on the tooltip - see the example in the fiddle
You can find many other answers on stackoverflow. Take a look at this fiddle and let me know if you need more help.
Updated fiddle 2
If have updated the fiddle. You can pass values from the parameters that are returned from the ajax callback. This is a simple wrapper around the ajax call:
function callAjax(elem){
$.ajax({ url: '/echo/json/',
type: 'POST',
contentType:"application/json; charset=utf-8",
dataType:"json",
data: { json: JSON.stringify({ text: 'some text'})}
}).always(
function(data,textStatus, errorThrown)
{
elem.tooltip('option', 'content'
, 'Ajax call complete. Result:' + data.text);
});
}
I am using JSON.stringify(...) above to create a Json-String. This function may be not present in all browsers. So if you run into troubles please use a current chrome / chromium browser to test it.
So you can use the wrapper function inside the tooltip():
$('#tippy').tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
callAjax(elem);
} // open
});
Above you can see that the always method calls an anonymous function with 3 parameters (data, textStatus, errorThrown). To pass the reply from the ajax call you can use data. Above i am only passing a simple object with the propert text. To access it you can use data.text
I would like to fire a changepage after a loadpage.
Below is the code I use.
After a submit, a database action is fired at an external site (with loadPage). That works.
Next I would like to change to another page with the guid (unique ID) variable posted.
I can't get this working.
Hope somebody can. Thanks in advance.
$(document).on('pageinit', '#page1', function(){
$('form').submit(function(){
var guid = GUID();
$.mobile.loadPage( "http://domain.com/dbaction.php?guid="+guid, {
type: "post",
data: $("form#addtegel").serialize()
});
return false;
$.mobile.changePage ($("#page2"),{ transition: "slideup"} );
});
});
$(document).on('pageinit', '#page2', function(){
DoSomething(guid);
});
First, you need to make guid a global variable. At the moment, it's local to your form submission, so it cannot be accesses outside that form submit action.
Second, instead of using loadPage() - which is jQuery Mobile's internal function called by changePage() by the way - use $.ajax() like this:
var guid;
$(document).on('pageinit', '#page1', function(){
$('form').submit(function(){
window.guid = GUID();
$.ajax({
url: "http://domain.com/dbaction.php?guid="+guid,
type: "post",
data: $("form#addtegel").serialize(),
success: function() {
$.mobile.changePage ($("#page2"), { transition: "slideup"} );
}
});
return false;
});
});
$(document).on('pageinit', '#page2', function(){
DoSomething(window.guid);
});
Also, please be aware that mixing GET and POST data is a very bad habit. I'm talking about this url: "http://domain.com/dbaction.php?guid="+guid
There should only be GET or POST data present in a single request, not both. Would it not be possible to pass guid to dbaction.php in the POST (using a hidden field in your form)?
Friends I have a problem
We need to make a user control that has the ability to delete itself, I made it but we did not clear the mechanism for removal, it should be tied to a nice picture. Code that is attached to the frame is given below, but not
$('#delete').bind('click', function () {
alert('test');
var urlA = '<%=Url.Action("DeleteMessage","Ticket")%>';
$.ajax({
url: urlA,
type: 'POST',
data: { idMessage:$(this).parents("div:first").find("input[name='MessageID']").val(),idticket:$('#TicketID').val() },
success: function (data) {
alert(data);
}
});
});
But when I write this, but to throw me to the homepage what's wrong
$('#delete').live('click', function ()
$("#delete").live("click", function(){
//code
$(this).remove(); //delete itself
});
If your image is declared as input type="image" then it will behave like a submit button and submit your page. You should prevent the default behavior of submitting the page by adding an event.preventDefault() or equivalent to your javascript function.
Why, if i write html method in javascript, it's called only once, but if i have only alert, it's calles every time, i change wy value in input (blur).
$(".quantity").blur(function() {
console.log("upd");
$.ajax({
url: "/line_items/update_quantity/"+$(this).attr("id"),
type: "GET",
data: {quantity: $(this).val()},
success: function(text)
{
alert(text);
$('.right').html(text);
},
error: function(){
alert('Ошибка javascript');
},
dataType : "html"
});
});
I need reload html partial after every blur...
Try doing this..
$(document).on('blur', '.quantity', function() {
// place your code here
});
I suspect you're replacing the dom element that the original blur binding is applied against. If you do that you remove the event handler. On() will keep it alive.
If .quantity is dynamic element (I think so) then try
$(document).delegate('.quantity', 'blur', function() {
// code
});
read here about delegate()
I am making a jQuery ajax request in a asp.net mvc page:
$.ajax({
type: "POST",
url: "/Home/Go",
data: dataObj,
success: function (data) {
// update html here
}
}
});
This call is within a page, which has a form and other elements which submit to other url (lets say "/Home/Do"). Now after the ajax call returns, If I click on any other element the form still submits to url1 instead of url2
Note I tried adding a "return false" statement to click event handler where the ajax call is made. But even this did not help
The ajax call is made within the jQuery dialog:
$('#myDialog').dialog({ buttons:
[
{
text: 'Next',
click: function () { HandleNext(); return false; }
}
],
title: 'Dialog-Title'
});
function HandleNext()
{
$.ajax({
type: "POST",
url: "/Home/Go",
data: dataObj,
success: function (data) {
// update html here
}
}
});
return false;
}
Anybody faced a similar issue? any solutions?
return false in the click handler is mandatory for ALL ajax requests. The web browser will visit the url otherwise. In other words: The ajax request is made first and then a regular request.
No urls can automagically be replaced with other urls. You either do it in your javascript code, or in your action/view.