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.
Related
I added data to the page in Ajax and then I changed to the page
$.mobile.changePage('#postDetails', { transition: "slide" })
but then when I refresh the browser all the contents I added with the Ajax is not there any more.
refreshing a page will remove Ajax data, to resolve that issue you need to add your Ajax call inside pageshow event like following
$(document).on("pageshow","#postDetails",function(){
$.ajax({
url: postDetailsUrl,
type: "post",
data: {id: id},
beforeSend: function () {
$.mobile.loading("show");
},
complete: function () {
$.mobile.loading("hide");
},
success: function (data) {
$('#commentList').html(data);
$('#commentsNum').text($('#commentList .comment').length);
initCommentPage();
},
error: function (requestObject, error, errorThrown) {
alert("Error in communication");
}
});
})
now this ajax request is in pageshow event so every time popstDetails page is shown it will make a ajax call to postDetailsUrl and show the data in commentList element.
to know more about page events see gajotres's blog
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 know this question might be repeated but my query is different let me explain, I have a drop down in page and by selecting value in drop down list,and I click on submit button.. I want by click on submit button I need to load partial view in tag that is list of records of selected drop down list value.
i tried this :
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Search/MDLNoDataList")',
data: mdlno,
success: function (data) { $("#viewlist").innerHtml = data; }
});
});
but not getting result And I m using these many jquery plugins
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
If i understand correctly, below is what you need to do.
HTML Example:
<div id="records">
</div>
<select id="ddlRecordType">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<input type="submit" value="Load Records" id="btn-submit" />
jQuery Code
$(document).ready(function(){
$('#btn-submit').click(function(){
var selectedRecVal=$('#ddlRecordType').val();
$('#records').load('/LoadRecords?Id='+selectedRecVal);
return false; // to prevent default form submit
});
});
Here ?Id= is the query string parameter passed to server to get
the selected item in dropdown.
Edit: The below answer was added, as the question content changed from initial post
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Action("MDLNoDataList","Search")',
data: mdlno,
success: function (data) {
// $("#viewlist")[0].innerHtml = data;
//or
$("#viewlist").html(data);
}
});
return false; //prevent default action(submit) for a button
});
Make sure you cancel the default action of form submission by returning false from your click handler:
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Action("MDLNoDataList", "Search")',
data: mdlno,
success: function (data) {
$("#viewlist").html(data);
}
});
return false; // <!-- This is the important part
});
And if you are using the WebForms view engine and not Razor make sure you use the correct syntax to specify the url:
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '<%= Url.Action("MDLNoDataList", "Search") %>',
data: mdlno,
success: function (data) {
$("#viewlist").html(data);
}
});
return false; // <!-- This is the important part
});
If you do not return false, the form is simply submitted to the server when you click on the submit button, the browser redirects away from the page and obviously your AJAX call never has time to execute.
You will also notice some improvements I made to your original code:
Using the Url.Action helper when pointing to a server side controller action in order to take into account routes defined in your application.
Using jQuery's .html() method instead of innerHTML to set the contents of a given element.
You need AJAX for this purpose.
$.get(url, data, function(data) { $(element).append(data) });
and Partial View that is vague.
element {
overflow:hidden;
}
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)?
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()