Hi I have a following html markup
<h2>First Name Last Name</h2>
<form>
<div>
<input name="fname">
<input name="lname">
</div>
</form>
You click on a header to show the form fields and to edit them (blur hides the fields and shows the header again).
I have a problem because the first and last name are in the same header, so you click on one item to edit two fields.
I am submitting the form on a blur event for the input fields but when I click the last name, because blur is being called in the first name, I cannot edit the second field.
I am using AngularJS which is also presenting a problem because I cannot figure out which element is focused because document.activeElement returns the entire body.
Any help is much appreciated!
Assuming you're using ngBlur directive on the input element, you can mix it with ngFocus to keep elements visible as wanted: <input name="fname" ng-focus="showFields=true;" ng-blur="blurField($event);" >
Using a function for ngBlur, you will have access to the $event object which in turn will expose the elements you need (like target or related). Afterwards, you can trigger form submit depending on your needs.
A demo plunker is HERE.
Related
I have a simple example where for some reason form stops calling onSubmit callback if I add more than one text inputs and push 'Enter' key while one of the inputs is focused.
Here is a link on CodePen: https://codepen.io/anon/pen/KePXOj?&editors=001.
This one works:
<Form onSubmit={(e)=>{e.preventDefault(); console.log(e)}}>
<Input/>
</Form>
And this doesn't:
<Form onSubmit={(e)=>{e.preventDefault(); console.log(e)}}>
<Input/>
<Input/>
</Form>
What am I doing wrong there?
This doesn't seem to be an antd issue, it is a known quirk that forms with only a single input fire onsubmit when pressing enter while if they have multiple inputs they do not.
This might be related
I have the following form.
<form id='form'>
<input type='email' id='email' />
etc. etc.
</form>
So if I type 'hello' into the email field and press submit, I get an error and it stops the submit from happening. The input field then has a red border. Also, I override the submit so that it submits it using AJAX.
If I want to reset the form (using JS), I call:
$('#form')[0].reset();
This resets the form, but leaves the red border.
I try inspecting the element of the input field but it doesn't show any additional classes, but it has a red border? Is this a phantom class or something.
I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).
I want to use
<input type="submit" .....>
instead of
type="image"
So, is there any way to do this thing in ZenCart?
Currently, I'm using
zen_image_submit();
TL;DR: Duplicate the template file, comment out the zen_image_submit() line and add your own <input> or <submit> html.
Having looked at the ZenCart function list, I didn't see an alternative to zen_image_submit().
I did not check to see if there was a plugin because my fix simply involved overriding the template, inside of my theme, with a hard-coded HTML button:
<button type="submit" class="pure-button"><?=BUTTON_CREATE_TEXT?></button>
<!--<?php echo zen_image_submit(BUTTON_IMAGE_SUBMIT, BUTTON_SUBMIT_ALT); ?>-->
In the above example, I also create a new constant in my theme's english.php file (includes/languages/my_theme/english.php):
define('BUTTON_CREATE_TEXT', 'Create');
Doing the above requires one to make copies of (core) files and put them in their theme, but if you're already doing this to override other features, then it's not such a biggy.
Note: In order to make sure my custom HTML <button>/<submit> markup is correct has all of the required attributes, I'll view the source of the page before making changes and view/copy the output of zen_image_submit(); doing this allows me to copy/retain attributes like name="...".
I cannot get a form to submit additional fields that have been cloned. When a form like the one below is submitted, it does not include the cloned form elements. Does anybody know why and how I can alleviate this issue.
<form>
<table>
<tr><td><input type="text" value="50" name="myvar[]" /></td></tr>
<!-- This button will clone the previous set of form elements -->
<tr><input type="button" value="Add New Line" onclick="this.getParent('tr').getPrevious('tr').clone().inject(this.getParent('tr'), 'before')" /></tr>
</table>
</form>
Your HTML isn't well formed, so this.getParent('tr') is returning null at least for me in Firefox. Put the button inside a td that is inside the tr and it works.
JSFiddle: http://jsfiddle.net/delvarworld/r99fN/ clicking the button throws an error
Thanks for the comment but the form was meant to be an example not actually what I had. I looked back at the form and the top form element was inside the table and the bottom form element was outside of the table. I moved the top form element outside of the table and everything works perfectly.
thanks,