i'm making an Ember app with a Rails back end. In one of the templates, I list the available teams from a database and beside each team put a form field for the user to enter some textual information. If I enter information in one form field, the text appears in all of the form fields (kind of like a multiple cursor experience). That's one problem. Also, when I submit the button to attend one of the conferences, nothing's happening in the controller. I'm wondering if this is a related problem as Ember might think I'm trying to submit from multiple forms at one time due to the fact that these forms are acting as if they're the same form.
Can you see what I'm doing wrong?
<script type="text/x-handlebars" id="conferences">
<div class='span4'>
{{#each item in model}}
<li> {{#link-to 'conference' item}}
{{ item.name }}
{{ partial 'conferences/form'}}
{{/link-to }}</li>
{{/each}}
</ul>
</div>
<div class="span4 offset4">
{{ outlet}}
</div>
</script>
Inserted Form
<script type="text/x-handlebars" id="conferences/_form">
<form class="form-horizontal" {{action "attend" on="submit"}}>
<div class="controls">
{{input value=username type="text"}}
</div>
<button type="submit" class="btn">attend</button>
</form>
</script>
Conferences controller
App.ConferencesController = Ember.ObjectController.extend({
actions: {
attend: function() {
console.log('this is not logging, & no indication rails route is posted to)
$.post("/join_conference_path", {
username: this.get("username"),
}).then(function() {
document.location = "/";
}, function() {
}.bind(this));
}
}
});
Having all input values synced to the same text happen due to fact that each input value is bound to the same property username.
This happens because all _form partials are rendered in the same context which is in your case App.ConferencesController. To make them render in individual context use itemController argument for each helper. See spec here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each
{{#each item in model itemController="conference"}}
In this case I suggest you rename your App.ConferencesController to App.ConferenceController which will represent individual context for each "item". Having it done this way your action will always use username input for specific "item" only.
Action may not trigger because by default all actions targets routes and not controllers. Try to add target="controller" attribute to action helper:
{{action "attend" on="submit" target="controller"}}
Related
It confused me for a long time.
I have this input field in my Partial Views:
<input name="promocode" class="field" placeholder="Arlington" id="promo_code">
And I have a main form in my layout page called "new_user" and one button signupBtn
$("#signupBtn").click(function (e) {
e.preventDefault();
var promocode = document.getElementById('promo_code').value;
...
here when I clicked the button, this promocode will fetched to promocode variable.
Here in the main form, I have a hidden field
<%= hidden_field_tag :promo_code, '' %>
I want to pass the promo_code to my controller, I write this line inside the controller:
$("#promo_code").val(promocode);
Then problem come, when I want to fetch the data in controller,
aaa = params[:promo_code]
It give me a "", I don't understand, since I checked the $("#promo_code").val( ) in view, it shows the correct data, but when I checked the controller, it is not passed;
I have stacked here for a day, I know I am a new guy in ROR, but I just can't find the problem...
If I had to venture a guess then the issue is probably that you have the same id for both the inputs on the page.
Clients must return the first element in the DOM in the case of duplicate ids when you call document.getElementById and document.querySelector.
Thus the line $("#promo_code").val(promocode); is really just changing the value of the first element to its own value. In other words its doing absolutely nothing.
If you instead just use the form property on the button to get the input contained in the same form as the button it will work as intented.
$(document).on('click', '#signupBtn', function(e){
this.form["promo_code"].value = $('#promo_code').val();
e.preventDefault(); // prevents a redirect for the purpose of demonstration.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="promo_code" value="foobarbaz" type="hidden" />
<form>
<input name="promo_code" value="" />
<button id="signupBtn">Copy code</button>
</form>
And as pointed out by #3limin4t0r form values are submitted using the input name, not the id. So that input would be submitted as params[:promocode] not params[:promo_code].
I have an MVC 4 site that renders a left sidebar with a bunch of menu links on it. When the user signs in, they are directed to a page where they search for someone. Once they've selected someone and submitted the form, an id cookie gets set.
This id determines whether or not various links in the sidebar menu are enabled, as it is a required parameter for many of the actions that those links lead to. The menu itself, since it is on every page of the site, is set up in the _Layout partial:
<div id="contentwrapper">
<div id="left-menu">
#Html.Action("Display", "Menu", new { Area = "" })
</div>
<div id="mainbody">
<section>
#RenderBody()
</section>
</div>
<div id="footer">
</div>
</div>
Display returns a partial view representing the sidebar menu. Since I'm rendering the menu sidebar in the _Layout, I don't have a model to work with. Is there any way I can get the parameter to my menu partial view without using a cookie?
I would use a hidden field and viewbag
Public ActionResult Index(){
ViewBag.id = // set your id initially
}
if javascript/jquery is ok with you...
$(function(){
var myID = #Html.Raw(Json.Encode(ViewBag.id));
$('#hidID').val(myID);
});
HTML
<input type="hidden" name="hidID" id="hidID" />
Then.. Display Action
Public ActionResult Display(int hidID){
// this will be current id,
// if id is reset , pass the new one to viewbag , jquery will reset hidden field on client
}
<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.
Forgive me if this seems like a simple task, I'm fairly new to this...
I'd like to create logic that allows the user to display or not display their email address when editing it from a dialog box. I am placing the link that will allow the user to 'opt out' inside the dialog box - and I'm trying to use the link to reset the variable inside the 'if' statement to 'false' The 'if' statement prevents the email address from being rendered.
Here is my if statement:
<div id="change-email" class="text">
#{
var showEmail = true;
if (showEmail == true)
{
<text><p><span class="label">My email address: </span>#Model.Email</p></text>
}
else (showEmail == false)
{
<text><p>No email displayed</p></text>
}
}
</div><!--#change-email-->
And here is the dialog box code:
<div id="dialog-email" class="modal">
#using (Html.BeginForm("ChangeEmail", "Account", FormMethod.Post))
{
<fieldset>
// form code here
</fieldset>
}
<p>Do not display my email address.</p>
</div>
Any help would be appreciated...
Thanks!
If you do this with jQuery, and you were okay with the email address still being available in the page source, it would look like this:
<div id="change-email" class="text">
<p><span class="label">My email address: </span>#Model.Email</p>
</div>
<div id="dialog-email" class="modal">
#using (Html.BeginForm("ChangeEmail", "Account", FormMethod.Post))
{
<fieldset>
// form code here
</fieldset>
}
<p>Do not display my email address.</p>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('a.no-display').click(function(){
$('#change-email p').text('No email displayed.');
});
});
</script>
It would be a bit more involved if you wanted to persist the preference to not display email. You would probably want to add "Do not display my email address" as a check-box in the ChangeEmail form, adjust the Controller Action to which the form posts to handle the preference, and return it as a variable in the ViewBag of the View that the Action returns.
I am trying to do the following:
The object I give to the Viewpage has a list, I do a foreach in the HTML and I create a number of components. Now, I want the IDs of those components to somehow be linked to the object from the List.
(The reason I am trying to do this is because I want to show a button, when they press that button the shown content will change and they should see something else, I will use javascript to achieve this)
Therefor I am trying to make the id of those components dynamic, by for example stating
id="button <%= item.id%>" however this does not seem to work. I have searched alot on google but I haven't found a solution yet which is why I turn to you guys.
I'll link my code as well, I deleted some of the parts that were unnecessary (but added the javascript):
<script type="text/javascript">
function AlterPanel(thePanel) {
var panel = document.getElementById("region"+thePanel);
panel.style.display = 'block';
var button = document.getElementById("button"+thePanel);
button.style.display = 'none';}
</script>
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a id="button<%= team.Number %>" onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div Visible="false" id='region<%= team.Number %>' runat="server">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I eagerly await a reply and thank you in advance.
I guess your Queastion is:
-you have some "button DropDownList" pair, button is visiable, DropDownList is invisible, now if user click the button then DropDownList will showup.
OK, now your View maybe :
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div id="region<%= team.Number %>" style="display:none">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I use JQuery in javascript part like this:
<script type="text/javascript">
function AlterPanel(thePanel) {
$("#region" + thePanel.toString()).css("display", "block");
}
</script>
Don't forget include the following file in View():
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script>
if the answer is not what you want, let mt know and I can help you~ :)