I'm doing some ajax requests in Grails 1.3.7. The front end uses jQuery and the 'facebox' plugin.
After a successful request and response, I redirect back to the page with a 'confirm' param which is picked up by javascript.
The facebox plugin works fine on its own, but when I pass the 'confirm' parameter, the facebox popup works, but the checkboxes on the popup are unclickable (they aren't disabled, the arrow just doesn't show up when you click them). This was tested in Chrome and FF. I thought it might be a duplicate ID issue, but I made sure the checkbox and IDs were unique.
Any ideas? Or is there a better way to do this?
Grails action:
def deleteEmailRecipient = {
def recipientId = params.id
accountService.deleteEmailRecipient(recipientId)
redirect(action:'settings', params:[confirm:1])
}
JS:
$(document).ready(function() {
//get params to display save confirm if confirm detected
var url = window.location.toString();
url.match(/\?(.+)$/);
var params = RegExp.$1;
var splitParams = params.split("&");
for (var i=0;i<splitParams.length;i++) {
var tmp = splitParams[i].split("=");
if (tmp[0] == 'confirm') {
$.facebox({div: '#addWord'});
}
}
});
GSP (that shows up in facebox):
<div class="checkboxes" style="border: 1px solid #FFFFFF;">
<g:each in="${wordGroups}" var="wg" status="i">
<label class="category">
<g:checkBox name="${wg.id}"/>
<span style="font-weight:bold;margin-right:5px;white-space: nowrap;">
<img class="dropdownFlag" src="${resource(dir:'images',file:icon)}" alt="" />${wg.name}
</span>${(i+1)%4 == 0 ? '<br />' : ''}
</label>
</g:each>
</div>
Related
So on similar sites with different themes, same core functions for laravel there is a view that has
<div class="footer__item footer__item--right"> <div class="footer__item-search"> <span class="search-wrap"><input type="text" placeholder="Search" class="search"></span> </div>
in scripts the only relative javascript code which is also already on the other site
$(document).on('keyup', '.search', function() {
var query = $(this).val().toLowerCase();
doSearch(query);
});
function OnSearch(input) {
var query = input.value.toLowerCase();
doSearch(query);
}
function doSearch(query){
$.getJSON('{{ route('frontend.game.search') }}?category1={{ $category1 }}&q=' + query, function(data) {
$('#games').html(data.data);
});
}```
so copying those makes a box appear but searches nothing
What possibly the javascript is missing to actually be called and call the laravel template view mentioned ?
I built a portlet and added a entity named Idea. There are two JSPs, one is the view and one the edit.
In the view there is only a button to create a new Idea and a table showing all ideas. Clicking on the button shows the edit jsp.
There is a form with two fieldsets and input stuff.
The "problem" is i cannot use the <aui:form ... stuff because it won't work with JQuery steps (or better, i cannot get it working). So i am using normal tag and also JQuery steps is providing the submit button which is only a <a href="#finish" ...>. So that wont bring the form to submit and the data being in the database.
So I tried to do it within the javascript code of the definition of jquery steps like here:
$(document).ready(function(){
var form = $("#wizard").show();
form.steps(
{
headerTag : "h3",
bodyTag : "fieldset",
transitionEffect : "slideLeft",
onFinishing: function (event, currentIndex) {
alert("Submitted!");
var data = jQuery("#wizard").serialize();
alert(data);
jQuery("#wizard").submit();
form.submit();[/b]
},
onFinished: function (event, currentIndex) {
//I tried also here..
},
});
});
But even if i declare the data explicitely it wont put it in the db.
So my idea was that the "controller" class which calls the "addIdea" function is never called.
How am I solving the problem?
Here is also my jsp code for the form part:
<aui:form id="wizard" class="wizard" action="<%= editIdeaURL %>" method="POST" name="fm">
<h3>Idea</h3>
<aui:fieldset>
<aui:input name="redirect" type="hidden" value="<%= redirect %>" />
<aui:input name="ideaId" type="hidden" value='<%= idea == null ? "" : idea.getIdeaId() %>'/>
<aui:input name="ideaName" />
</aui:fieldset>
<h3>Idea desc</h3>
<aui:fieldset>
<aui:input name="ideaDescription" />
</aui:fieldset>
<aui:button-row>
<aui:button type="submit" />
<aui:button onClick="<%= viewIdeaURL %>" type="cancel" />
</aui:button-row>
</aui:form>
Is there a way to "teach" JQuery Steps the <aui:*** tags? I tried it already while initializing the form but it won't work. To get it working using the aui tags would be great. Because otherwise the Liferay portal wont get the data or it would get it only with hacks right?
€dit: What I forgot, when I submit the form using javascript submit, it creates a new dataentry in the db but no actual data in it.
€dit2:
The editIdeaURL is referenced a bit over the form here:
<portlet:actionURL name='<%=idea == null ? "addIdea" : "updateIdea"%>'
var="editIdeaURL" windowState="normal" />
and the addIdea code looks as follows:
In the IdeaCreation class first this:
public void addIdea(ActionRequest request, ActionResponse response)
throws Exception {
_updateIdea(request);
sendRedirect(request, response);
}
Where _updateIdea() is:
private Idea _updateIdea(ActionRequest request)
throws PortalException, SystemException {
long ideaId = (ParamUtil.getLong(request, "ideaId"));
String ideaName = (ParamUtil.getString(request, "ideaName"));
String ideaDescription = (ParamUtil.getString(request, "ideaDescription"));
ServiceContext serviceContext = ServiceContextFactory.getInstance(
Idea.class.getName(), request);
Idea idea = null;
if (ideaId <= 0) {
idea = IdeaLocalServiceUtil.addIdea(
serviceContext.getUserId(),
serviceContext.getScopeGroupId(), ideaName, ideaDescription,
serviceContext);
} else {
idea = IdeaLocalServiceUtil.getIdea(ideaId);
idea = IdeaLocalServiceUtil.updateIdea(
serviceContext.getUserId(), ideaId, ideaName, ideaDescription,
serviceContext);
}
return idea;
}
And to finally put the data using IdeaLocalServiceImpl:
public Idea addIdea(
long userId, long groupId, String ideaName, String ideaDescription,
ServiceContext serviceContext)
throws PortalException, SystemException {
User user = userPersistence.findByPrimaryKey(userId);
Date now = new Date();
long ideaId =
counterLocalService.increment(Idea.class.getName());
Idea idea = ideaPersistence.create(ideaId);
idea.setIdeaName(ideaName);
idea.setIdeaDescription(ideaDescription);
idea.setGroupId(groupId);
idea.setCompanyId(user.getCompanyId());
idea.setUserId(user.getUserId());
idea.setCreateDate(serviceContext.getCreateDate(now));
idea.setModifiedDate(serviceContext.getModifiedDate(now));
super.addIdea(idea);
return idea;
}
Any ideas?
I need help trying to get the values from a g:select statement and passing them into a JavaScript function.
So far I have the button
<a href='javascript:void(0)' onclick='runReport("${reportInstance.name}")'>Run Report</a>
Which calls a .js file with
function runReport(reportIn){
var url = reportViewerPath + reportDirectory + reportIn + reportSuffix + promptChain;
window.open(url,'Report Viewer','fullscreen=yes,menubar=yes,status=yes');
}
And this works great. Now the challenge is we have g:select statements on the main .gsp page, but they are variable in number. There could none, or there could be 20, it just depends on the report chosen by the end user.
<g:select id="${prompt.name}" from="${listPromptValues[prompt.name]*.values().collect()}" name="prompt" value="" noSelection="['':'']"/>
This generates the drop down menu with the values for what ever prompt there is.
How do I grab ${prompt.name} and the selected value for every prompt on the page, and then pass that to the .js file as well?
Ideally when runReport() is called, it will pass the reportName, and the prompts will get passed as
&Phone=867-5309&City=NewYork&Name=Jenny
Each url variable would be an optional g:select, so it could also be
&City=NewYork&Name=Jenny
I feel like something like this Related Stack Overflow question would be on the right track.
var prompts = "";
$('$prompt.name').change(function() {
prompts += $(this).text();
$("a").attr('href', function(i, h) {
return h + (h.indexOf('?') != -1 ? "&" : "?") + "selectValue="+val;
});
});
However prompts would have to be a global so that it isn't overwritten every time there is a change.
Edit: Here is the DOM object on the .gsp page
<div id="runButton">
<g:form controller="report">
<g:if test="${reportInstance?.id}">
<a href='javascript:void(0)' onclick='runReport("${reportInstance.name}")'>Run Report</a>
</g:if>
</g:form>
</div>
<ol class="property-list report">
<g:if test="${reportInstance?.prompts}">
<hr>
<li class="fieldcontain" id="prompt">
<g:each var="prompt" in="${reportInstance.prompts}">
<span id="prompts-label" class="property-label">
<g:message code="report.prompts.label" default="${prompt.description}:" />
</span>
<g:if test="${prompt.datatype.type == 'DropDown'}">
<g:select id="${prompt.name}" from="${listPromptValues[prompt.name]*.values().collect()}" name="prompt" value="" noSelection="['':'']"/>
<br>
</g:if>
</g:each>
</li>
</g:if>
</ol>
And then in run.js
function runReport(reportIn){
var promptChain = $("#prompt :select[name=prompt]").serialize();
reportName = reportIn;
...
}
Am I going about this incorrectly?
Edit 2: Grabbing the prompts like it should
...
<g:if test="${prompt.datatype.type == 'DropDown'}">
<g:select id="${prompt.name}" from="${listPromptValues[prompt.name]*.values().collect()}" name="${prompt.name }" value="" noSelection="['':'']"/>
<br>
</g:if>
...
and the jQuery
var promptChain = jQuery('select').serialize();
You're using jQuery, so just serialize the form's select elements. Doesn't matter how many their are. No need to track some global variable.
function runReport(reportIn) {
var promptChain = $("select[name=prompt]").serialize();
....
}
Here's a jsFiddle
I have a grails app where, after a user enters a name for a new domain object (Sync), I want to save the object, move to a fragment on the same page, and change the css class of a div (to js colorbox, if that matters).
To do this, I use an anchor to set the class and move to the fragment and use JS to submit a g:formRemote. However, the formRemote does not return the created object.
partial of gsp:
<g:formRemote url="[controller: 'Main', action:'createNewSync']" name="newSyncForm" >
<g:field type="text" name="newSyncName" />
<a id="ns-link" href="#outline_content" class="outline">
<script>
$('#ns-link').click(function(){
$('#newSyncForm').submit();
});
</script>
</g:formRemote>
Later in the gsp, we want to move to use the colorbox with the outline_content inside. Notice the syncInstance.name is needed.
<script>
$(document).ready(function(){
$(".outline").colorbox({inline:true, width:"1140px", escKey:false, overlayClose:false});
</script>
<div id="sync" class="hidden">
<div id='outline_content' style='padding:10px; background:#fff;' >
<h2 class="nameheader"><strong style="color:#000;">New Sync:</strong><span class="editable_textile">${syncInstance?.name}</span></h2>
<div class="number1"><img src="../images/1.png" border="0" /></div>
.....
controller:
def createNewSync(){
params.name = params.newSyncName
def syncInstance = Sync?.findByName(params.newSyncName)
if (!syncInstance)
{
syncInstance = new Sync(params)
def u = User.findByUsername(springSecurityService.principal)
syncInstance.properties['createdBy'] = u
syncInstance.properties['createdDate'] = new Date().toString()
syncInstance.properties['lastRunTime'] = "Never"
syncInstance.properties['lastRunOutcome'] = "---"
syncInstance.properties['isScheduled'] = false
syncInstance.properties['isComplete'] = false
syncInstance.save(failOnError: true, flush: true)
}
//doesn't send anything back to page if it's been called remotely
[syncInstance: syncInstance]
}
Is there any way to get a reference to the created object to be used later on the page using this method? If not, is there another way to accomplish this?
Ok, so here is what I would do
1) Create a template for the sync. It would be everything contained inside the div with the id of "sync", but not the div itself.
2) Update your formRemote tag to update that div <g:formRemote update="sync" ... />
3) Render the template in your controller render(template: "path/to/template", model:[syncInstance: syncInstance])
i m stuck in a position where i cant find any solution
i have a link and button here is the code im saving the page in db so i cannot create a server control as it will not render it
<div id="DivCMS" runat="server"></div>// i use this in server side
//this code is saved in db table CMS_Pages//////begin
<a href="User/Register.aspx" id="alinkRegister" >
<img src="App_Themes/White/Images/getstarted.png" style="padding-left: 117px;" />
</a>
//this code is saved in db table CMS_Pages//////end
on page load i fill div with data from db
if (!IsPostBack){
var cp = new CMS_Pages();//Data Access block
cp.LoadByPrimaryKey(12);// load data
LiteralControl Ref = new LiteralControl(cp.PageHeader);
Page.Header.Controls.Add(Ref);
DivCMS.InnerHtml = cp.PageHtml;}
how can i disable href according to session in javascript ie
if (session["UserId"] !=null) then href=# <br>
else href="User/register.aspx"
You can just replace it to # if has a session
if (session["UserId"] != null)
{
cp.PageHtml=cp.PageHtml.Replace("User/Register.aspx","#");
}