Could any one give an example, how to use Jquery in Controller Page. MVC3 -ASP.NET(How To put various tags like )
I want to show a simple alert before rendering a view in Controller.
Thank you.
Hari Gillala
Normally scripts are part of the views. Controllers shouldn't be tied to javascript. So inside a view you use the <script> tag where you put javascript. So for example if you wanted to show an alert just before rendering a view you could put the following in the <head> section of this view:
<script type="text/javascript">
alert('simple alert');
</script>
As far as jQuery is concerned, it usually is used to manipulate the DOM so you would wrap all DOM manipulation functions in a document.ready (unless you include this script tag at the end, just before closing the <body>):
<script type="text/javascript">
$(function() {
// ... put your jQuery code here
});
</script>
If you are talking about rendering partial views with AJAX that's another matter. You could have a link on some page that is pointing to a controller action:
#Html.ActionLink("click me", "someAction", null, new { id = "mylink" })
and a div container somewhere on the page:
<div id="result"></div>
Now you could unobtrusively AJAXify this link and inject the resulting HTML into the div:
$(function() {
$('#mylink').click(function() {
$('#result').load(this.href, function() {
alert('AJAX request finished => displaying results in the div');
});
return false;
});
});
Related
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="Chat_Box_Files/Script_Files/AJAX.js"></script>
</head>
// JavaScript Document
$(document).ready(function(){
// load index page when the page loads
Load_ajax_page("http://betaserver.bioprotege-inc.net/chat_selector/Chat_Box_Files/Script_Files/Applet_Files/Index.html");
$("#ChatMaster").click(function(){
Load_ajax_page("#");
});
});
function Load_ajax_page(url){
//before we make a ajax request we have to show the loading image
$("#Applets").html('<center>Loading... Please Wait...</center>');
//this is a jquery method to make a ajax request
$.post(url,"",function (data){
//this is the place where the data is returned by the request
//remove loading and add the data
$("#Applets").html(data);
});
}
<div id="Applets">
</div>
http://jsfiddle.net/N278r/
here is my fiddle of it all in action, but it wont display the content from the html file, it used to idk what I have done wrong?
It looks like you are using ASP.NET on the server. You can add the following line to your source pages:
Response.AppendHeader("Access-Control-Allow-Origin", "*");
BACKGROUND: I'm trying to use .load() to build a site from several
pages, where a user can click a button to load the next page's
content using .load().
PROBLEM: The .load() only works on the first click (loads
content from pagetwo.html), then doesn't load any
content for pages after that.
CODE:
My start page markup looks like this:
<head>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<p>This is page 1.</p>
<button id="pageone">next</button>
</div>
</body>
Then my pages 2-5 contain only partial HTML, to be loaded
into div.content:
Page 2:
<p>This is page 2.</p>
<button id="pagetwo">next</button>
Page 3:
<p>This is page 3.</p>
<button id="pagethree">next</button>
Etc.
My jQuery script.js is loaded only once, with the full start page html:
$(document).ready(function() {
//load pages
$('button#pageone').click(function () {
$("div.content").load("page-two.html");
});
$('button#pagetwo').click(function () {
$("div.content").load("page-three.html");
});
$('button#pagethree').click(function () {
$("div.content").load("page-four.html");
});
});
Any ideas on why only the first .load() request works?
The ID #pagetwo and on onwards are newly introduced elements to the DOM after the first initial $(document).ready(). Thus, you'd have to access it differently there after:
$(document).on('click', 'button#pageone', function() {
$("div.content").load("page-two.html");
});
$(document).on('click', 'button#pagetwo', function() {
$("div.content").load("page-three.html");
});
$(document).on('click', 'button#pagethree', function() {
$("div.content").load("page-four.html");
});
The .on() handler will listen to any new elements through the entire document (As it starts at root) at any one stage. Your initial code was looking for elements that were present on just page load.
To read more about it, See the documentation about the .on() handler regarding new elements at "Direct and delegated events".
Following the simple example from Jquery: Accordion Example
Using a remoteLink function from grails (AJAX) the information is pulled back from the controller and sent back to the GSP, which works fine. I do however want this data to be placed within a Accordion container... click here for screenshot of current functionality.
(Event Create Page rendering form template) _form - GSP:
<g:remoteLink controller="event" action="showContacts" method="GET" update="divContactList">Show Contacts!</g:remoteLink>
<div id="divContactList">
<g:render template="contactListAjax" model="[contactList: contactList]" />
</div>
<script type="text/javascript">
$(document).ready(function()
{
alert("Checking if I'm ready :)");
$( "#accordion" ).accordion({
header: 'h3',
collapsible: true
});
});
</script>
_contactListAjax - GSP Template
<div id="accordion">
<g:each in="${contactList}" status = "i" var="contact">
<h3>${contact.contactForename}</h3>
<div><p>${contact.email}</p></div>
</g:each>
</div>
Not quite sure what I'm doing wrong here, as I'm encasing the data with the div with an id accordion, yet doesn't load. Please refer to screenshot link above to see what is currently happening.
UPDATE
Event (Standard Generated CRUD, only showing where the relivant imports are) create - GSP
<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.ui.accordion.css')}"/>
<g:javascript src="jquery-1.7.1.min.js"></g:javascript>
<g:javascript src="jquery-ui.min.js"></g:javascript>
Try replacing:
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
})
with
$( "#accordion" ).accordion({
collapsible: true
});
Edit:
You can't use an <r:script /> tag after the request is finished. The server has already laid out all of the resources. Change it to a standard javascript tag. Also the inclusion of your javascript and css files should be elsewhere on the page.
I solved this... (well Hack & Slash for now... not the best, but only viable solution for now)
var whatever is the stored HTML generated by the AJAX and placed into the divContactList on the update function. The Accordion is deleted and then rebuilt (not the best approach I realise)
var whatever = $('#divContactList').html();
$('#accordion').append(whatever)
.accordion('destroy').accordion({
collapsible: true,
active: false
});
I am using razor template and following is the scenario
$(function(){
//if (ViewBag.IsCallFunction){
somefunction();
//
//do something else
});
If a viewBag variable is present, i.e. not null and if it is set to true, then I would like to call some javascript function. How do I do this?
#{if(ViewBage.somevalue!=null && ViewBage.somevalue=="true")
{
<script type="text/javascript">
somefunction();
</script>
}
}
but remember this will get called as rendered, as per OP, you can't call it, you can render it, so call it inside document.ready when document is loaded
<script type="text/javascript">
$(function() {
#if (ViewData.ContainsKey("IsCallFunction") && ViewBag.IsCallFunction)
{
<text>somefunction();</text>
}
});
</script>
But I would recommend you using a view model instead of ViewBag, because in this case your code could be simplified:
<script type="text/javascript">
$(function() {
#if (Model.IsCallFunction)
{
<text>somefunction();</text>
}
});
</script>
You don't call a JavaScript function from Razor code because Razor runs on the server and JavaScript runs on the client.
Instead, you can emit JavaScript code to the client that then runs once the browser loads the HTML code generated by Razor.
You could do something like
<script type="text/javascript">
#* The following line is Razor code, run on the Server *#
#if (ViewData.ContainsKey("IsCallFunction") && ViewBag.IsCallFunction) {
#* The following lines will be emitted in the generated HTML if the above condition is true *#
$(function(){
somefunction();
//do something else
});
#} #* This is the closing brace for the Razor markup, executed on the Server *#
</script>
I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.
Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});