Greetings,
I have the following problem. In my asp.net mvc page (which is a partial view) I create an instance of jsTree as follows:
<script type="text/javascript">
$(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
$("#SelectedIndustryROWGUID").val($(NODE).attr("id"));
$("#resultMessage").append($(NODE).attr("rel"));
}
},
data: {
type: "json",
async: true,
opts: {
method: "GET",
url: "/CreateMessage/GetIndustries/"
}
}
});
});
this works fine but then, when I click on any link on the page, it does not work. The links are executed when I choose "open in new tab" option from context menu. When I remove the above part, everything is working fine
Can someone please help me with this?
EDIT
I've changed the code above to be as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#industries").tree({
callback: {
onselect: function(NODE, TREE_OBJ) {
$("#SelectedIndustryROWGUID").val($(NODE).attr("id"));
$("#resultMessage").append($(NODE).attr("rel"));
}
},
data: {
type: "json",
async: true,
opts: {
method: "POST",
url: "/CreateMessage/GetIndustries/"
}
}
});
});
(I've added $(document).ready(function() { ...
but it also didn't helped
EDIT2
I also asked this question on jsTree discussion group and I received an answer. Upgrading jquery to version 1.4.2 solved the problem!
<script type="text/javascript">
$(function() { <--- here change to --> $(document).ready(function(){
$("#industries").tree({
when you do $(something), jquery expects the "something" to be a selector, in your code your directly giving it a function instead of anything jquery considers to be a selector.
Related
I have a strange problem and i m not able to understand why it is happening.
I called a page - Remarks(say) by jquery ajax on row click of grid viw. Then i binded that page (coming in response) into a div - dvRemarks(say). This div is opening in a popup.
Pop-up window is only opening first time, which is working fine. But when i click second time, data is coming in response, But this time popup is not opening. Problem is with popup only but i don't understand why it is ?
When i again refresh the page, it again opens up Ist time only.
Below is jquery :-
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
Below is the function which i am calling on click :-
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').html(response);
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
And below is the div - dvRemarks in which i am binding response
<div id="dvRemarks1" runat="server" style="display: none;" title="Enter Remarks">
<div id="dvRemarks" runat="server">
</div>
</div>
Thanks.
Not sure on this but give a try to below one.
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true, //Calling destroy on close function might help
close: function() {
$(this).dialog("destroy");
}
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
give a try changing ajax call to
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').empty().html(response); //empty function may be of some help here
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
I have an ajax call inside a javascript function that update a div with the result. This function is called every 2 seconds.
function RefreshNbrMsg() {
$.ajax({
url: 'helper/NewMessages.aspx',
success: function (data) {
$('#nbr_msg').empty().append(data);
}
});
}
$(document).ready(function () {
setInterval(RefreshNbrMsg, 2000);
});
My problem is that it's working perfectly with Chrome but not IE. In IE the div won't update.
I don't have any script error or messages. I can see in the network analyzer that the ajax call is done every 2 seconds.
/helper/NewMessages.aspx GET 304 text/html 108 B < 1 ms JS Library XMLHttpRequest
Any ideas ?
Try this :
function RefreshNbrMsg() {
$.ajax({
cache: false,
url: 'helper/NewMessages.aspx',
success: function (data)
{
$('#nbr_msg').empty().append(data);
}
});
}
$(document).ready(function () {
setInterval(RefreshNbrMsg, 2000);
});
Hi guys i have controller which returns a partial view, the controller is called by ajax script. The partical view has no problem showing viewdata first time, But when ajax script is invoked second time the partical view does not update it self with new viewdata.
code for controller
[HttpGet]
public ActionResult getPart(int id)
{
ViewData["partical"] = id;
return PartialView("test");
}
code for partial view
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<PovertyBayHotel.Models.testmodel>" %>
<p>just a test</p>
<%: ViewData["partical"]%>
and the ajax which call the controller
<script type="text/javascript">
$(document).ready(function () {
$("#DropDown").change(function () {
var course = $("#DropDown > option:selected").attr("value");
$.ajax({
type: 'GET',
url: '/Reservation/getPart',
data: { id: course },
success: function (data) {
$('#ExtraBox').replaceWith(data);
}
});
});
});
</script>
Might be a caching issue. Try HTTP POST instead of GET or set the ifModified and cache options to false as below:
$("#DropDown").change(function () {
var course = $("#DropDown > option:selected").attr("value");
$.ajax({
type: 'GET',
ifModified: false,
cache: false,
url: '/Reservation/getPart',
data: { id: course },
success: function (data) {
$('#ExtraBox').replaceWith(data);
}
});
Also, try to debug your code and see really what is going on.
Edit:
The problem has been solved by changing $('#ExtraBox').replaceWith(data); with $('#ExtraBox').html(data);.
I have a jQuery autoselect box displaying the correct data. Now I would like to fire an ASP.NET MVC 3 controller when an item is selected. The controller should then redirect to a View. Here's my jQuery autocomplete code (I'm sure something is missing in the 2nd Ajax call, but I haven't found it yet):
<script type="text/javascript">
$(function () {
$("#Client").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Entity/GetClientAutoComplete', type: 'POST', dataType: 'json',
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
})
},
minLength: 1,
select: function (event, ui) {
$.ajax({
url: 'Entity/GetApplicationsByName/' + ui.item.value, type: 'POST'
})
}
});
});
</script>
And here's the controller I'm trying to call:
public ActionResult GetApplicationsByName(string id)
{
ViewBag.Client = id;
var apps = _service.GetDashboardByName(id);
return View("Dashboard", apps.ToList());
}
When I watch the Ajax call fire in Firebug, I see the correct URL configuration, but nothing else happens. It's acting as though it wants to load something rather than send something. I'm confused. Thank you for any guidance.
Well you sent an id by POST to the GetApplicationsByName controller and the controller is sending back the view.
If you want redirection, you can use the following:
select: function (event, ui) {
window.location.href = 'Entity/GetApplicationsByName/' + ui.item.value;
}
I'm trying to use the AutoComplete feature of JQuery to update multiple fields on an ASP.NET web page. The individual textbox is functioning perfectly, but I cannot figure out how to update multiple textboxes on the page once the user selects.
I've read many suggestions here that state I need to implement a result handler, but my intellisense is not showing that as an option, and IE I get a JS error saying that the object doesn't support this method.
I am linking to jquery-1.4.2.min.js and jquery-ui-1.8.5.custom.min.js
Here's my code:
$(function () {
$("#Street1").autocomplete({
source: function (request, response) {
$.ajax({
url: "/address/FindAddress", type: "POST", dataType: "json",
data: { startAddress: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.DisplayText, value: item.ValueText, id: item.ID }
}))
}
})
} /* End source: function */
})
.result(function (event, data, formatted) {
$("#Street2").val("test");
})
/* end Autocomplete */
}); /* Function */
In this case you'd want the select handler, like this:
$("#Street1").autocomplete({
source: function (request, response) {
$.ajax({
url: "/address/FindAddress", type: "POST", dataType: "json",
data: { startAddress: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.DisplayText, value: item.ValueText, id: item.ID }
}));
}
});
},
select: function( event, ui ) {
$("#Street2").val(ui.item.label); //or ui.item.value
}
});
I'm not sure if you want the label, value or id in there, just use ui.item.whatever. Using select, whatever a value is chosen you can populate the #Street2 field as well.
view the source of this example, it's exactly what you want (look at the select method) : http://jqueryui.com/demos/autocomplete/#custom-data
Also, it's JavaScript, don't rely on intellisense.
EDIT: I pasted the wrong link