I am new using Office UI Fabric JS, and I have just imported a SearchBox by following the steps here.
But how do I obtain the query and perform the search when the user hits enter? I have a search function already written in javascript, but I do not know where to call it. Is there some onSearch like property for the SearchBox?
Also, what exactly is happening within the <script>...</script> tags? I am not able to figure out what the following line means from the above link.
Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all SearchBox components on the page
Okay so here is what I did.
First you add an id element in the HTML for the input field.
<input class="ms-SearchBox-field" type="text" value="", id="searchText">
Then in my JS file, I added the following:
$('#searchText').on("keypress", function (e) {
if (e.which == 13) { // 13 is for enter
// call search function here
}
});
I was using JQuery already so it helped.
Related
I am writing my first app in Vue3 and I use composition-api with script setup.
Using v-for, I create components that are inputs (CrosswordTile) that make up the crossword grid.
A problem appeared during the implementation of the field containing a clue to the password.
Since the text doesn't allow text to wrap, I wanted to dynamically change the tag to after a click.
Function in parent component where I handle logic after click that change tile type works fine, but I need to change tag of "target" to and set maxLength to a different value.
If it would help here is whole code on github: https://github.com/shadowas-py/lang-cross/tree/question-tile, inside CrosswordGrid.vue.
function handleTileTypeChange(target: HTMLInputElement) {
if (target && !target.classList.contains('question-field')) {
addStyle(target, ['question-field']);
iterateCrosswordTiles(getNextTile.value(target), removeStyle, ['selected-to-word-search', 'direction-marking-tile']);
} else if (target) {
removeStyle(target, ['question-field']);
if (getPrevTile.value(target)?.classList.contains('direction-marking-tile')) {
iterateCrosswordTiles(
target,
addStyle,
['selected-to-word-search', 'direction-marking-tile'],
);
}
}
TEMPLATE of ParentComponent
<div
class="csw-grid"
#input="handleKeyboardEvent($event as any)"
#mousedown.left.stop="handleClickEvent($event)"
#click.stop="">
<div v-for="row in 10" :key="row" class="csw-row" :id="`csw-row-${row}`">
<CrosswordTile
v-for="col in 8"
:key="`${col}-${row}`"
#click.right.prevent='handleTileTypeChange($event.target)'
/>
</div>
</div>
I tried to use v-if inside CrosswordTile, but it creates a new element, but I just need to modify the original one (to add/remove HTML classes from it basing on logic inside CrosswordGrid component).
How can I get access to the current component instance properties when using the composition API in script setup or how to replace the tag dynamically?
:is and is doesn't work at all.
I want to understand how prestashop works regarding mobile displays.
I noticed in the used template, the header.tpl file contains the following html divs for mobile:
<div class="float-xs-right" id="_mobile_language_selector"></div>
<div class="float-xs-right" id="_mobile_user_info"></div>
<div class="float-xs-right" id="_mobile_cart"></div>
<div class="float-xs-right" id="_mobile_currency_selector"></div>
I also noticed that once I remove any of the components (for example the shopping card) from theme.yml:
global_settings:
configuration:
PS_IMAGE_QUALITY: png
modules:
to_enable:
- ps_linklist
hooks:
modules_to_hook:
displayNav1:
- ps_contactinfo
- tuxinmodaccessibility
displayNav2:
- ps_languageselector
- ps_currencyselector
- ps_customersignin
REMOVE THIS LINE ->>> - ps_shoppingcart
displayTop:
then the cart component is not displayed in the navbar. so the mobile and deskop version required this configuration to be set.
I noticed also that for each component besides having main div with _mobile_ prefix, there are also divs with _desktop_ prefix.
I'm trying to find out how to properly add my accessibility component to the navbar and that it will also be displayed on mobile.
so far it displays only on desktop and not on mobile so I was guessing that I need to add something like
<div class="float-xs-right" id="_mobile_tuxinmodaccessibility"></div>
no idea how to implement it properly.
I don't quite understand how for example, how this process works for mobile_cart div while the module name is ps_shoppingcart.
any information regarding the issue would be greatly.
You need to checkout themes/classic/_dev/js/responsive.js file.
The answer is in the theme.js file.
Script moves contents between desktop and mobile HTML elements in DOM. Every HTML element with ID that starts with id="_mobile_" gets content from corresponding desktop variation that starts with id="_desktop_" (if you inspect DOM in mobile view you'll notice that desktop elements got empty).
function o() {
u.default.responsive.mobile ? (0, s.default)("*[id^='_desktop_']").each(function(t, e) {
var n = (0, s.default)("#" + e.id.replace("_desktop_", "_mobile_"));
n.length && r((0, s.default)(e), n)
}) : (0, s.default)("*[id^='_mobile_']").each(function(t, e) {
var n = (0, s.default)("#" + e.id.replace("_mobile_", "_desktop_"));
n.length && r((0, s.default)(e), n)
}), u.default.emit("responsive update", {
mobile: u.default.responsive.mobile
})
}
Sorry but I am new to C# and ASP.NET and I saw alot of posts about this problem but I quite didn't get it. I am trying to understand how to pass a GET parameter to an action thru HTML.ActionLink:
here is the the URL:
http://localhost:36896/Movies/SearchIndex?searchString=the
and my CSHTML page should look like this:
<input type="Text" id="searchString" name="searchString" />
#Html.ActionLink("Search Existing", "SearchIndex", new { searchString = "the"})
this hard coded parameter "the" is actually working, but how can I select the input element with id=searchString, with something like document.getElementById("searchString").value
Thanks,
If the value you want to send as GET parameter is not known on the server you cannot use the Html.ActionLink helper to add it. You need to use javascript to manipulate the existing link and append the parameter.
It looks like you have an input field that contains a search string and you want to send the value entered in this field to the server. A better way to handle this scenario is to use an HTML form with method="GET" instead of an ActionLink. This way you don't need to use any javascript - it's part of the HTML specification:
#using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get))
{
#Html.EditorFor(x => x.SearchString)
<button type="submit">Search</button>
}
Now when you click on the Search button the value entered in the SearchString field will automatically be sent to the SearchIndex action:
http://localhost:36896/Movies/SearchIndex?searchString=the
But if you absolutely insist on using an ActionLink you will have to write javascript to manipulate the href of the existing link when this link is clicked in order to append the value to the url. It's an approach I wouldn't recommend though because the HTML specification already provides you this functionality throughout HTML forms.
This makes the #Html.EditorFor refer to the Title field of the object, kinda in a random way but it works!
#using (Html.BeginForm ("SearchIndex", "Movies", FormMethod.Get))
{
#Html.EditorFor( x => x.ElementAt(0).Title)
<button type="submit">Search</button>
}
Still couldn't pass input parameter to the URL in the GET.
EDIT:
FINAL SOLUTION:
#Html.TextBox("SearchString")
<button type="submit">Filter</button>
and on the controller side, switch the input parameter. Basically it will automatically recognize the passed parameter.
public ActionResult SearchIndex(string searchString)
{
...
}
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.
Im trying to build a front-end page to allow my users to build smarty templates with ckeditor wysiwyg editor.
Im using the insertHtml function to add a button with special attributes (needed to parse it into an smarty variable in the back-end):
// initialize ckeditor
$('textarea.editor').ckeditor({
contentsCss: '/css/test.css'
});
// get ckeditor instance
ckeditorInstance = $('textarea.editor').ckeditorGet();
// Use some elements (outside the textarea) to add buttons/tokens
// to wysiwyg textarea
$("a.tinymce.tinymce-insert-var").click(function(){
ckeditorInstance.insertHtml(
'<input type="button" readonly="readonly" var="{$user->name}" '
+ 'class="placeholder" value="User Name" />'
);
});
This works fine on Firefox, IE8 and opera, but with Chrome/Chromium/Safari the button is inserted between a <p> element.
Is there a way to avoid this, or a callback that i can use to remove the paragraph?
I had this problem as well. This is how I did it...
var editor = $('textarea[name=content]').ckeditorGet();
var element = CKEDITOR.dom.element.createFromHtml( '<p>I am a new paragraph</p>' );
editor.insertElement( element );
Looks like you're using jQuery also... why don't you force the inclusion of the p tag within CKEditor's .insertHtml function, then follow it up with jQuery's .unwrap to always remove the p tags?
in the main ckeditor config-file there is an option to disable automatic <p> inserts.
try to change the value of CKConfig.EnterMode and CKConfig.ShiftEnterMode for example to 'br'.
Felix