Is there a pattern or anything I can do to load remote asp.net views properly? I have my index page that basically looks like this:
Index page works fine using new kendo.mobile.Application(document.forms[0]):
<form runat="server">
<div data-role="view" id="indexPageInitialView"> ... </div>
<div data-role="view" id="indexPageOtherView"> ... </div>
</form>
Remote view page issue:
<form runat="server">
<div data-role="view" id="remoteView1"> ... </div>
<div data-role="view" id="remoteView2"> ... </div>
</form>
I know Kendo loads remote views that can be [at most] descendants within the body tag, so I am thinking I'm backed into a corner here.
Update
When I attempt to simply load the remote view that is surrounded with the form tag, I get this error:
Uncaught TypeError: Cannot call method 'getAttribute' of undefined kendo.all.min.js:9
kendo.initWidget kendo.all.min.js:9
w.extend._createView kendo.all.min.js:31
w.extend._createRemoteView kendo.all.min.js:31
(anonymous function) kendo.all.min.js:31
l jquery.min.js:2
c.fireWith jquery.min.js:2
T jquery.min.js:2
r
If I nest the form tag within the remote view, it works, however, that is not a viable solution.
Update 2
Here is a more complete example of my situation.
index.aspx:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
</head>
<body>
<form runat="server">
<div id="indexPageInitialView" data-role="view">
<div data-role="content">
Load remote view
</div>
</div>
</form>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application(document.forms[0]);
</script>
</body>
</html>
remote.aspx:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remote</title>
</head>
<body>
<form runat="server">
<div id="remoteView1" data-role="view">
<div data-role="content">
<h1>Hi I am a remote view</h1>
</div>
</div>
</form>
</body>
</html>
Kendo will load only the first view found in the remote view. So if you make the call to remote view correctly, remoteView1 should load. If this is not the answer you are looking for, please post the full code in JSFiddle with more description.
Related
I have a Index.cshtml and I call a PartialView. I also use angularJS. My question is about...
My Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="testApp">
<div ng-controller="testCtrl">
<input type="text" ng-model="input"/>
<p>{{input}}</p>
<button type="button" onclick="callPv()">call partial</button>
</div>
<div id="divPv">
</div>
</div>
<script src="~/Scripts/angular.js"></script>
<script>
var callPv = function() {
$("#divPv").load("Home/TestPV");
}
</script>
</body>
</html>
My PartialView
<div>
<input type="text" ng-model="pv"/>
<p>{{pv}}</p>
</div>
My angular.js
var app = angular.module("testApp", []);
app.controller("testCtrl", function($scope) {
});
If I call partial view by using #Html.Partial("TestPV"), angular is working in partial view but if I call partial by ajax, angular is not working in partial and seeing {{pv}}. I face this problem often. I'm new to angular. I appreciate your assistance. Thank you so much for your answers!
If you want to call an angular function on click then use onclick
angular.element.scope.apply();
This will initiate ur scope function manually
angular.element('[ng-controller=testctrl]').scope().apply
I am using masterpages in my site to change the url in the site. I use the <a> of my navigation bar using a full change/reload of the url in the href to webforms nested within my masterpage.
After doing some ajax on the site with UpdatePanels, I couldn't stop to try something with the pushState.
I did some research on the internet, and while doing this:
$("a[data-role='ajax']").click(function (e) {
if (Modernizr.history) {
e.preventDefault();
var pageName = $(this).attr("href");
window.history.pushState(null, "", pageName);
navigateToPage();
}
});
I really get a change of the url and with some more code implemented where was the masterpage content page, I put a div where I dynamically load it with a new content from other page. As a simple approach I have:
Home.aspx
<head runat="server">
<title></title>
</head>
<body>
<h1>Home</h1>
<ul>
<li>Home</li>
<li><a href="page1.aspx" data-role=
"ajax">Page 1</a></li>
</ul>
<form id="form1" runat="server">
<div id="content-host" class="fragment">
Home
</div>
</form>
<script src="modernizr-custom.js"></script>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Page1.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<h1>Home</h1>
<ul>
<li>Home</li>
<li><a href="page1.aspx" data-role=
"ajax">Page 1</a></li>
</ul>
<form id="form1" runat="server">
<div id="content-host" class="fragment">
page 1
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
<script src="modernizr-custom.js"></script>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Clicking the a the scripts changes the url with the pushState and the new information on the div "contest-host" is changed.
Basicaly when navigate to page1.aspx the url changes to page1.aspx and in the div it shows the textbox, but my problem is when I click on the textbox and put some text and do the enter it comes back to the home.aspx. I noticed if I go to page1.aspx and press enter in the url the page reloads and the textbox on postback doesn't make the page go back to home.aspx.
I'm not an expert in ASP. This is the kind of situation that I think that there is no way to keep the next page and do something like a textchangedevent without a full reload, but anyway I ask, if it is possible.
I've been trying to get a Javascript function to fire when my page's AJAX processing is triggered without success. Most of my time has been spent trying to get the OnBegin AjaxOption value working, but I have spent time with the global JQuery .ajaxSend handler as well (which I believe might not be compatible with ASP.NET MVC), both without success.
I've reduced my page to something pretty simple. My Index.cshtml for the project is:
#using SalePointWebItemInquiry.Controllers
#using System.Web.Mvc.Ajax
#{
ViewBag.Title = "Home Page";
}
#Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval")
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
#using (Ajax.BeginForm("PressButton",
"Home",
new AjaxOptions
{
OnBegin = "TestFunction"
}))
{
<div>
<input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
}
The page that this renders is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container body-content bordered">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
<form action="/Home/PressButton" data-ajax="true" data-ajax-begin="TestFunction" id="form0" method="post">
<div>
<input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
</form>
<footer>
<div class="row">
<div class="col-md-5">
<p>© 2015 - Application</p>
</div>
<div class="col-md-7 text-right">
Version: Put version here
</div>
</div>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"d2eef5342ac64f3db1545856102f4a6f"}
</script>
<script type="text/javascript" src="http://localhost:53954/45ae7332668647b5a3795d87cd6ba1a9/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Does anyone have any thoughts on why the TestFunction() Javascript function isn't firing when I click the ENTER button?
Solution:
Thanks for the help :). I wasn't properly referencing jquery.unobtrusive-ajax.js. The direct solution to my problem was to use Nuget to retrieve a Javascript package that wasn't local using this command at Nuget console:
Install-Package Microsoft.jQuery.Unobtrusive.Ajax
Since I didn't have jquery.unobtrusive-ajax.js locally, all of my attempts to reference it locally failed. I may have tried a CDN reference once or twice, but that never worked out and I had a lot of theories as to the cause of the problem at the time.
I didn't even have to change the code. This code in BundleConfig.cs automatically included the file once I had retrieved it:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
You have duplicated
<script src="/Scripts/jquery-1.10.2.js"></script>
Remove the second one and then you also need to add jquery.unobtrusive-ajax.js in order for Ajax.BeginForm() to work (other wise you just making a normal submit - and therefore TestFunction() will never be called)
Looks like you are loading your script before JQuery can load. Scripts need to load at the bottom of the page just before the body tag and after JQuery loads.
Please try
#section Scripts
{
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
}
This will place the script after JQuery loads.
So I'm using a jQuery plug-in called Coin Slider. The slideshow seems to be working fine but I want to connect it with a database that I have created in the App_Date folder in Visual Studio 2010.
When clicked on a certain picture, I want the system to search the table in the database using the description of that particular image in the slideshow as a keyword. If the item exists in the database, it would go to the website mentioned in the href. Otherwise, it would display "item not found".
All I've done is make the slideshow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="css/coin-slider/coin-slider.min.js" type="text/javascript"></script>
<link href="css/coin-slider/coin-slider-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#coin-slider').coinslider();
});
</script>
</head>
<body>
<div id='coin-slider'>
<a href="the first website goes here" target="_blank">
<img src='1.jpg' >
<span>
Description goes here
</span>
</a>
<a href="the second website goes here">
<img src='2.jpg' >
<span>
Description goes here
</span>
</a>
</div>
</body>
</html>
Any help would be appreciated.
I have this asp.net code in my page :
<div id="prx">ABC</div>
And I want to change the value "ABC" to something when for example the user type a value in TextBox.
How can I do that using Ajax ?
Thanks
You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.
Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.
May be using javascript?)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication11.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function setDivContent() {
var textInput = document.getElementById('text1');
var divPrx = document.getElementById('prx');
divPrx.innerHTML = textInput.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button onclick="javascript:setDivContent(); return false;">Set</button>
</div>
</form>
</body>
</html>
Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.
I know this is old question.. but it might help someone
JQUERY for this would be :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(e){
e.preventDefault();
$("#prx").text($("#text1").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button type="button" id="btn1">Set</button>
</div>
</form>
</body>
</html>