Get content of div from ajaxForm response - javascript

I have a search form that submits with ajaxForm, and I want to get the html inside of a specific div, and it tried:
$(function search() {
$("#socialSearchUsers").validate({ // initialize the plugin
// any other options,
onkeyup: false,
rules: {
query: {
required: true
}
}
});
$('form').ajaxForm({
beforeSend: function() {
return $("#socialSearchUsers").valid();
},
success : function(result) {
var page = $(result);
var statusText = page.find('#status').innerHTML;
console.log(statusText);
$("#results").html(statusText);
}
});
});
but that (in the console) tells me "undefined" (no quotes).
I'm new to JS and JQuery so if there's an easy way to do it I don't know.

.innerHTML is a POJS property, not jQuery.
Try :
var statusText = page.find('#status').html();

Related

AJAX async:true breaks site on mobile browsers

I am using this function to return search results via AJAX. However, it kills mobile browsers on search. It works if I set it to 'async:false' but this means that I can't have a loading icon.
I cant find anything online to indicate why this would not be working on mobile, when it works fine on desktop.
Any ideas?
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);
I was able to solve this problem by adding a separate 'loader' div with an ID of loader to my page, and add the loading class to this instead. The code now looks like this:
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function(){
delay(function(){
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type : 'post',
url : myajax.ajaxurl,
async: true,
data : {
action : 'load_search_results',
query : query
},
beforeSend: function() {
input.prop('disabled', true);
$('#loader').addClass('loading');
},
success : function( response ) {
input.prop('disabled', false);
$('#loader').removeClass('loading');
content.html( response );
myPluginsInit();
}
});
return false;
}, 700 );
});
});
})( jQuery );
You're problem is still in your keyup input handler. I'm not sure where the function delay is declared (I'm assuming it's some wrapper around setTimeout). However it doesn't really matter.
The issue is that the handler fires for every input and keyup event. The "delay" is inside that. All the "delay" is doing is "waiting" before it makes the ajax call but an ajax call is still being created for every keyup and input event.
This means that a lot of ajax calls are being created and on a mobile platform that's a problem. I'm not exactly certain when (or how often) you need to make the call to the server but to see what I'm talking about just add the line I've included below:
(function($) {
$(document).ready(function() {
$("#filter").on('keyup input', function() {
console.log('handling keyup or input') // add this line and watch them stack up
delay(function() {
var input = $('#filter');
var query = input.val();
var content = $('#content')
$.ajax({
type: 'post',
url: myajax.ajaxurl,
async: true,
data: {
action: 'load_search_results',
query: query
},
beforeSend: function() {
input.prop('disabled', true);
content.addClass('loading');
},
success: function(response) {
input.prop('disabled', false);
content.removeClass('loading');
content.html(response);
myPluginsInit();
}
});
return false;
}, 700);
});
});
})(jQuery);

Bootstrap Popover will Only Load Once. Why?

I have a Boostrap popover that will only show once and then will not work. What am I missing?
Here is my JS Fiddle
The Problem is due to $().load();, actually it's asynchronized and when you return $("#pop-content").load(...); for the first time it will return you the contents of #pop-content div, and thereafter contents of #pop-content set to the result of url you've mentioned in jQuery load, but in your case it's blank.
I've replaced $(#pop-content).load(...); with $(#pop-content).html(); and the results are as expected.
See Fiddle
EDIT
$(document).ready(function () {
$('.pop-form').popover({
html: true,
title: function () {
return $("#pop-head").html();
},
content: function () {
var result = '';
$.ajax({
url: "your url",
async: false,
success:function(response){
result = response;
}
});
return result;
}
});
// make popup larger
var p = $('.popbutton').popover();
p.on("show.bs.popover", function (e) {
p.data()["bs.popover"].$tip.css("max-width", "630px");
});
});
Try above code, it should work well.

How to pass $("#MyInputTag").val to my Ajax call and keep that value for later use

How can I send $("#query").val()) using my Ajax function ?
If I put my Ajax call in my $(document).ready(function() , my code doesn't work anymore (the script doesn't start).
=> I can see the 'test123' string on my next page but , but if I type something in my "query" Input_Field, and then click on my link href (pointing to the same location) , the input field is reset and loose my value "query"...
Please help me :( Thank you
$(document).ready(function() {
$("#completed").live('click', function() {
alert($("#query").val());
});
$.ajax ({
url: 'http://localhost:3000/user/updateattribute',
data: { chosenformat: 'test123' , query: $("#query").val() } ,
type: 'POST',
success: function()
{
alert ('success ' );
return false; }
});
});
// do not use this anymore $(document).ready(function() {
$(function() {
event.preventDefault();
// live is no longer used use on..
$("#completed").on('click', function() {
console.log($("#query").val());
// alerts are annoying learn to use console
});

Updating drop down from json message, code not working

my json response is
["Day", "Week"]
and the jquery which is supposed to run is
$("#id_granularity").click(function(event)
{
event.preventDefault();
var $form1=$('#dashboardForm')
var $success2 = function(data)
{
$("id_granularity").empty();
$.each(data,function(i,value)
{
alert("hello");
$("id_granularity").append($('<option>').text(value).attr('value',value));
});
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr,settings) {
xhr.setRequestHeader('X-CSRFToken',csrftoken);
}
});
var dposting = $.post("/grain", $form1.serialize(), $success2, "json");
});
the event occurs but the dropdown is not updating or new items are not getting appended to
id_granularity
Change all instances of $("id_granularity") to $("#id_granularity") and see how that goes

Get data from the server and display in the Edit Form

This question is continuation of the following question Add JSON data to the view that unfortunately ended up unresolved yet.
In my main view which has a form with 2 controls and placeholder for flexigrid I added the following at the bottom
<div id="add-edit-dialog" style="display: none" title="Add / Edit Client">
#Html.Partial("_ClientForm", Model)
</div>
The flexigrid pluglin instantiates in run-time and adds 3 buttons: Add, Edit, Delete.
For Edit button I need to get the current row information from the server and then display it in the Form. For Add button I do not need to go to the server (I think).
This is my current code for the Edit button:
function edit(com, grid) {
$('.trSelected', grid).each(function () {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row') + 3);
currentId = id;
$('#fntype').val('Edit');
var ClientName;
ClientName =$('.trSelected td:eq(2)').text();
var url = '/Client/Edit/' + id ;
$.getJSON(url, function (html) {
// setFormControls(data.Id, data.Role, data.Location, data.JobType,
// data.Description);
// alert(data);
$($dlg).html(html);
});
//location.replace(url);
RunModalDialog("Edit Client: " + ClientName);
});
So, it is going to Edit controller action and returns that same partial view _ClientForm with correct information passed as a model. If I look at the response result returned in FireBug I can see that the returned HTML is correct and all the textboxes have correct information in their values.
However, the dialog that opens looks exactly the same as the dialog for the Add button - in other words, all form controls come blank. I can not figure out what is wrong and why it is not working the way I want it.
This is what I have for the RunModalDialog:
var validator = $("#add-edit-form").validate();
var $dlg = $("#add-edit-dialog").dialog({
autoOpen: false,
show: "blind",
closeOnEscape: true,
resizable: true,
width: 1200,
height: 750,
minHeight: 600,
minWidth: 950,
buttons: {
"Save": function () {
if ($("#add-edit-form").valid()) {
// jobPost.setVals(txtId.val(), txtRole.val(),
// txtLocation.val(), txtJobType.val(),
// txtDescription.val());
$.ajax({
type: 'POST',
//data: JSON.stringify(clientInformation),
url: '/Client/Save',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
// insert new list into grid
$('#flexClients').flexAddData(result);
}
});
$(this).dialog('close');
} else return false;
},
Cancel: function () {
$(this).dialog("close");
clearForm();
if (validator)
validator.resetForm();
}
},
close: function () {
clearForm();
},
open: function () {
//$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
}
});
function RunModalDialog(title, url) {
if (title) {
$dlg.dialog("option", {"title": title });
}
if (url) {
$dlg.load(url).dialog("option", { "title": title }).dialog("open");
//$dlg.load(url, function () {
// var validator = $("#sform").validate();
// if (validator)
// validator.resetForm();
// $dlg.dialog("option", { "title": title }).dialog("open");
//});
} else {
$dlg.dialog("open");
}
}
The code with the load (and commented code) was another attempt to solve this problem. That sort of worked (the form displayed with the info), but the main Client view was also reloaded so I was seeing double grid.
Do you see what should I change in my code to get this thing working?
Thanks a lot in advance.
With Jazzen Chen from MS help we solved this problem. All I needed to do to display the data correctly was to change getJSON to just get jquery function. Now my form comes with data populated correctly and the next challenge will be to save the data.
I posted a blog post with what I have so far - hope it may help
http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with

Categories