Grails Ajax: Render Template not picking up parent resource(js) - ajax

My Scenerios:
I am using grails remoteFunction which is rendering template. I have a slider on the render template which is using some Jquery methods. Previously I have kept js within this template but the problem is with performance. Everytime the ajax loads the jquery classes which is causing the performance issues.
Is there a way to get the parent resource by templates after rendering thru Ajax ?
Inside index.gsp page:
<g:if test="${action=="individual"}">
<g:render template="individual" />
</g:if>
<g:if test="${action=="project"}">
<g:render template="project" />
</g:if>
<asset:javascript src="bootstrap/jquery-1.10.2.js"></asset:javascript>
<asset:javascript src="bootstrap/bootstrap-slider.js"></asset:javascript>
<asset:javascript src="resource_utilization/slider.js"></asset:javascript>
<asset:javascript src="resource_utilization/resource-utilization.js"></asset:javascript>
<asset:javascript src="jquery.blockUI.js"></asset:javascript>
In controller:
render template:"individual"

Please read this link. When you render template inside parent then your jquery will not work. For that to work you have to reactivate the js resource.
I have done the following. In parent gsp load all the resources and add one method to initialize your slider.
<script type="text/javascript">
function refreshUI () {
// your slider initialization code goes here
};
</script>
In template at the end just call the parent function.
<script>
refreshUI();
</script>
This will refresh your UI and everything will work fine.

Related

jQuery mobile: data-search value returns empty unless I reload the page

jQuery Mobile 1.3.2: I have a listview with the filter enabled. The page that this is on is loaded via jQuery mobile ajax.
My problem is that if I allow it to load via ajax, it detects my keyup event but it does not pull the value of input[data-type="search"]. If I refresh the page using the browser, the script executes perfectly.
How can I get this to work while loading the page with AJAX?
HTML MARKUP:
<ul id="addCompany" style="padding-bottom:10px;" data-role="listview" >
<li>Touch To Add</li>
</ul>
<div id="listwrap">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid</li>
</ul>
</div>
jQuery
<script>
$(document).ready(function(){
var inputVal;
$('body').on("keyup",'input[data-type="search"]', function(){
inputVal = $('input[data-type="search"]').val();
if(inputVal===""){
$('#dynamic').html('<li>Touch To Add</li>');
$('#dynamic').listview("refresh");
}else{
$('#dynamic').html('<li>Touch Again To Add: '+$('input[data-type="search"]').val()+'</li>');
$('#dynamic').listview("refresh");
}
});
});
</script>
EDIT: Note that I can set the value and set the focus on input[data-type="search"] without any hiccups. It is retrieving the value that seems so tricky.
I tried adding a class to so that I wouldn't have to call it by data attribute but still couldn't pull the value unless I refreshed the page. Maybe if I inject a function into the input element I can use that to return the value?

Can I use Kendo MVC helpers inside templates?

I need to use Kendo MVC helper Razor code in template as listed below:
<script id="some-reusable-control" type="text/x-kendo-template">
#(Html.Kendo().Window()
.Name("details-window"))
</script>
But the problem is rendered HTML+JS contains a # (sharp symbol) that is rendered as part of #= # syntax inside template. So I getting 'parse error'.
<div id="details-window" style="display:none"></div><script>
jQuery(function(){jQuery("#details-window
").kendoWindow({animation:false,modal:true,draggable:true /*, etc */ });});
</script>
Could anyone please provide me a solution of how to use Kendo helpers in templates.
To use Kendo UI Widgets as content for a template you could use the ToClientTemplate method.
e.g.
<script id="some-reusable-control" type="text/x-kendo-template">
#(Html.Kendo().Window()
.Name("details-window")
.ToClientTemplate())
</script>

Grails remoteLink ajax issue populating JQuery accordion

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
});

How to create a simple ajax form in Drupal 7?

I want to create a simple form in Drupal7 with only one field. When hitting the submit button I need to call an ajax function with the field value and update a DIV on the page without reload.
I'm not familiar with Drupal form API, and I tried to implement the examples form the form api documentation but I always get errors like this:
Notice: Undefined index: #title_display form_pre_render_conditional_form_element() függvényben (/var/www/nmtest/includes/form.inc 2986 sor).
Notice: Undefined index: #value theme_textarea() függvényben /var/www/nmtest/includes/form.inc 3727 sor).
I can do it by creating a custom page and simply use native PHP but this is not an "elegant" way.
I want something similar like the one here, but without form valitation, page reload or so: Create a VERY simple form in Drupal
I only want one button that calls an ajax function. Shoud I do this with forms API or just use plain old native PHP and jQuery?
Edit: Looks like I don't even need a real ajax call, because I only need to change an SRC of an IMG tag.
Here's what I did in native PHP. I want to achive this trough forms api:
<script>
function getstar() {
starpoints = jQuery('#starpoints').val();
rand = Math.floor(Math.random() * 9999) + 1;
src = "test.php?star=" + starpoints + '&rand=' + rand;
jQuery('#starimg').attr("src",src);
return false;
}
</script>
<form>
<input type="text" name="starpoints" id="starpoints" />
<input type="submit" onclick="return getstar();" />
</form>
<img src="/test.php?star=5" id="starimg" />
Edit: Ok, I managed to render a form with the Drupal API. Now the only thing is that I want to insert the placeholder for the IMG via my module, but I don't know how to do it. The form renders fine, but I want to add a HTML block after it. Currently I do it by javascript:
jQuery(document).ready(function() {
jQuery('<div><br /><img id="starimg" src="" /></div>').insertAfter('#drawstar-form');
});
What hook should I catch to render this HTML block after the form? I tried drupal_get_form but that returns an array and I cannot attach the HTML block.
The Form API provides everything that you need to do this without writing a single line of JavaScript code. See http://drupal.org/node/752056 and http://api.drupal.org/api/examples/ajax_example!ajax_example.module/function/ajax_example_simplest/7 and .

Using Jquery in Controller Page-ASP.NET MVC-3

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;
});
});

Resources