I have modal jqxWindow
<div id='jqxwindow'>
<div>Header</div>
<div>Content <div id='jqxMyCheckbox'>CheckBox</div> </div>
</div>
and I want to post control values from this window by HTML method.
If i add Form tags to the window, the jqxwindow seems to stop exists.
Please advice on right approach - how to Post control values from jqxwindow form.
please note, I'm looking for compact way, using declared controls only in HTML preferably. If i implement JQuery $.post method, I need to declare variables and control names again. That makes implementation too complex.
I hope following post will be helpful to you
http://www.jqwidgets.com/submit-form-with-jqxlistbox/
In brief, try to assign 'name' property to some of jqWidgets you would like to include in post.
Related
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="...".
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.
I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable until you click outside of that box.
I'm hoping its just something extremely simple I've missed, but it's still doing my head in.
I really appreciate any help I can get!
Thanks :)
If you're using "ajax" content type, you need to make sure that you've got only one root node.
http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type
E.g., this is correct contents of ajax file:
<div>
html content
<script src="something.js"></script>
</div>
Incorrect:
<script src="something.js"></script>
<div>
html content
</div>
Incorrect:
<div>
html content
</div>
<div>Another content</div>
Also make sure that closeOnContentClick is set to false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick
If, for whatever reason, you can't change the contents of ajax file, you may parse content in parseAjax callback, like described here (so the mfpResponse.data contains only one root node).
I can't reply yet (too low rep..) so adding it like this:
seems that this also counts for type: 'inline'. Safe to always wrap content by a div..
$.magnificPopup.open({
items: {
src: '<div>'+ html +'</div>'
},
type: 'inline',
closeOnContentClick: false
}, 0);
I had the same error.
Turned out to be a dumb mistake from my side, i had the same class on my opener and my inline div.
Open
<div id="popup" class="dialog mfp-hide"></div>
Of course they needed to be different classes like so:
Open
<div id="popup" class="dialog-box mfp-hide"></div>
Dmitry explains the problem here https://github.com/dimsemenov/Magnific-Popup/issues/34
Add modal:true in the magnificPopup:
$('.your_class').magnificPopup({
type: 'ajax',
modal:true
});
Is it possible to use form elements in Webkit HTML desktop notifications? I'm tried to open a HTML notification from a Chrome extension, and the <input> I added appears, but I cannot type in it. I'd like to be able to capture the input from it and save it.
var notification = webkitNotifications.createHTMLNotification(chrome.extension.getURL('input-prompt.html'));
notification.show();
<html>
<body>
<form><input type="text" name="here" value="test" /></form>
</body>
</html>
You can get around this in a pretty simple way. You can create a div that serves as your input box, and allow the content of the div to be edited (look here). Then you can use a button or another div as the submit button, then handle the form submit with javascript.
<div contenteditable="true" id="inputBox"></div>
<div id="submitButton" onclick="submitform();">Submit</div>
While I agree that desktop notifications are probably not meant to contain forms, I have a case where having a form in the notification is actually more convenient. I hope this helps.
Notifications are not meant for interactivity. They are meant to notify.
If you want to have interactivity, use an Action instead.