I have a input field, whose value is set by the controller by response.query, within the template I also have two links which perform read and delete calls to the id entered in the query. Here is the template.
<div class="input-group">
<input type="text" th:value="*{response.query}" />
<div class="input-group-btn">
<ul class="dropdown-menu dropdown-menu-right">
<li>Read</li>
<li>Delete</li>
</ul>
</div>
</div>
Unfortunately, the href parameter always gets passed as null. Is there alternate approach to this?
Well let me see if I understand what you want :
For example you put '5' in the text input. Now you want to href to:
http://localhost:8080/read/5
And you have a controller which looks something like this :
#RequestMapping(value="/read/{id}", method=RequestMethod.GET)
public String read(#PathVariable String id, Model model) {
// your logic goes here
return "read";
}
Firstly my suggestion is that you can just change your code from :
<li>Read</li>
to:
<li>Read</li>
You can't get response.query because it's on client side then you call it. In your case you need the javascript, which will be construct your link's URL (othervise you need a form to submit value of the input) :
<div class="input-group">
<input type="text" id="myval" th:value="*{response.query}" />
<div class="input-group-btn">
<ul class="dropdown-menu dropdown-menu-right">
<li>Read</li>
<li>Delete</li>
</ul>
</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
function onReadClick() {
var id = $('#myval').value;
/*[+
var myUrl = [[#{/read}]] + id;
+]*/
window.location.href = myUrl;
});
/*]]>*/
</script>
Related
I would like to implement a search functionality, but not the entire site search. Instead, search contents based on the node id .
for example the below is search code
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<form action="/intranetsearchresult/" method="GET">
<input type="text" class="searchfield" placeholder="" name="query">
<button class="searchbtn btn btn-default btn-sm">Search</button>
</form>
#{
var searchQuery = Request.QueryString["query"];
if (!string.IsNullOrEmpty(searchQuery))
{
<div class="searchresults">
<p class="intro-para">Your search results for <strong>"#searchQuery"</strong></p>
<ul>
#foreach (var result in Umbraco.Search(searchQuery))
{
if(!#result.SearchResultsHide){
<li>
<a class="heading1 inline-link" href="#result.Url">#result.Name</a>
<div class="heading2">Created Date : #result.CreateDate.ToLongDateString()</div>
<div class="heading2">Updated Date : #result.updateDate.ToLongDateString()</div>
</li>
}
}
</ul>
</div>
}
}
from the above Umbraco.Search(searchQuery) this will search the entire website inside content.
Is there any way that I can search like this
Umbraco.Search(searchQuery , "Nodeid")
for example
Umbraco.Search("home loans, "1011")
like this?
I want to send the value of one input text by a link to make and insert in other page. I don't wanna use a submit type because these elements are inside a form with submit for another page.
This is my code of devices_insert.php:
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a href="fabricants_insert.proc.php?link=<?php echo **SOLUTION** ?>" onclick="valor()">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I can get the value with a function but I don't know how to send it via url.
<script>
function valor(){
var bla = $('#add_fabricant').val();
}
</script>
And I pretend to send to fabricants.insert.proc.php for make the insert:
<?php
$sql_insert = "INSERT INTO Property (PRP_PRP_TYP_Id, PRP_Value) VALUES ('2', '$_REQUEST[**SOLUTION**]')";
echo($sql_insert);
?>
I have checked before many solutions in stackoverflow but I think are not useful for my case.
I suggest you to use ajax, e.g.:
<script>
$('#add_fabricant').on('blur', function(){
$.post(url, {
'SOLUTION': $(this).val()
}).done(function(rst){
//to do
})
})
</script>
I have solved the problem in a easy way:
<script>
function valor(){
$('#fabricant_link').attr('href', 'fabricants_insert.proc.php?new='+$('#add_fabricant').val());
}
</script>
Now with this script send the variable with the url and I can receive it in the other page (fabricants_insert.proc.php) for insert in the database.
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a onclick="valor()" id="fabricant_link">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I only need to add an id to the link to use the function.
Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help
<div class="container-page">
<div class="row" id="portfolio">
<div class="col-md-2">
<nav>
<ul class="nav nav-pills nav-stacked" id="test">
<li role="presentation" class="active">Services</li>
<li role="presentation">Desktop</li>
<li role="presentation">Web</li>
<li role="presentation">Mobile</li>
<li role="presentation">Design</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row" id="thumb">
</div>
</div>
</div>
</div>
<!-- js -->
$.ajax({
type:"GET",
url:"portfolio.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('thumbnail').each(function()
{
var $thumbnail=$(this);
var type=$thumbnail.find('type').text();
var descr=$thumbnail.find('description').text();
var title=$thumbnail.attr('title');
var imageurl=$thumbnail.attr('imageurl');
var thum='<div class="col-xs-6 col-md-3"> </div>';
thum=$(thum).appendTo("#thumb");
thum = $('').appendTo(thum);
var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
$('<h2>'+title+'</h2>').appendTo(thumName);
$('<p>'+type+'</p>').appendTo(thumName)
thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
$(".forHove").mouseup(function()
{
//here is the redirection code, and want to pass $thumbnail to testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
});
}
});
Well, one of the alternative is using Web Storage API.
Just store img html and use it.
// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
// store image html to sessionStorage
window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);
You can achieve this thing using the following steps:
Add a form tag like
<form action="YOUR_PATH" method="GET">
<a class="thubnailClick" href="#" >
<html_of_your_thumbnail>
<input type="text" name="NAME_OF_PARAMETER" />
</a>
</form>
Now override the click event of <a> tag with
$(document).ready(function() {
$(".thubnailClick").on('click', function(event) {
// to override the default behavior of <a> tag.
preventDefault();
// Find the form element using closest() of jQuery.
// Call submit event of that form using $(form_element).submit();
});
})
Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.
I'm writing a little database query app.
What i'm trying to do: Each time a checkbox is clicked, i'd like for a query that includes the selected fields to be generated and inserted into the textarea.
The problem: For some reason, with every click, its showing the query from the previous click event, not the current one.
Here's the markup:
<div class="application container" ng-controller="OQB_Controller">
<!-- top headr -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse shadow" role="navigation">
<a class="navbar-brand">
Algebraix Database Client
</a>
<ul class="nav navbar-nav navbar-right">
<!--<li>Clear Queries</li>-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-import"></span> Load Data <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Default Data</li>
<li>Custom Import</li>
<!-- <li class="divider"></li> -->
</ul>
</li>
<li>
<a href="" class="queries-clear">
<span class="glyphicon glyphicon-remove"></span> Clear Queries
</a>
</li>
</ul>
</nav>
<!-- left column -->
<div class="col-md-4">
<div class="well form-group">
<ul>
<li ng-repeat="option in options">
<input type="checkbox" class="included-{{option.included}}" value="{{option.value}}" ng-click="buildQuery()" ng-model="option.included"> {{option.text}}
</li>
</ul>
</div>
</div>
<!-- right column -->
<div class="col-md-8">
<form role="form" id="sparqlForm" method="POST" action="" class="form howblock">
<div class="form-group">
<!--<label>Query</label>-->
<textarea type="text" name="query" class="form-control" rows="10" placeholder="Write your SPARQL query here">{{query}}</textarea>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit Query" data-loading-text="Running Query..." />
</div>
</form>
</div>
</div>
And in my controller, i am doing the following:
var OQB_Controller = function($scope) {
console.log('OQB_CONTROLLER');
$scope.query = 0;
$scope.options = [
{ text: "checkbox1", value: "xyz123", included: false }
,{ text: "checkbox2", value: "abcRRR", included: false }
,{ text: "checkbox2", value: "abcRRR", included: false }
];
$scope.buildQuery = function() {
console.log('click');
var lines = [];
lines.push("SELECT *");
lines.push("WHERE {");
lines.push(" ?s ?p ?o .");
for(var i = 0; i<$scope.options.length; i++) {
var line = $scope.options[i];
console.log( line.value, line.included, i );
if( line.included ) {
lines.push(" OPTIONAL { ?s "+line.value+" ?o } .");
}
}
lines.push("}");
lines.push("LIMIT 10");
var _query = lines.join("\n");
$scope.query = _query;
};
};
To reiterate, every time the build query method is called, the state of the included booleans is from one click event prior. this has the symptoms of the classic javascript problem of the keyup vs keydown and the state of the event... however, i'm not sure if that is what is happening here.
is there a better way to do build the query (than what i'm currently doing) and populate the textarea based on the checked boxes?
use ng-change instead of ng-click because it is more appropriate for this particular desired behavior. See the ng-change documentation below:
The ngChange expression is only evaluated when a change in the input
value causes a new value to be committed to the model.
It will not be evaluated:
if the value returned from the $parsers transformation pipeline has
not changed if the input has continued to be invalid since the model
will stay null if the model is changed programmatically and not by a
change to the input value
I have the following code
<div class="framepage">
<header>
<script type="text/javascript">
function getBaseUrl() {
return "#Url.Content("~/paging")";
}
function LocationSearch(baseUrl) {
window.location = getBaseUrl() + "/LocationSearch?searchstring=" + (document.getElementById('vestigingen').value);
}
</script>
</div>
</div>
</div>
</header>
<section id="maintest">
<ul id="menu">
<li>
<form class="navbar-search">
<div class="icon-search icon-white"></div>
<input type="text" class="search-query span3" id="vestigingen">
</form>
<input type="button" class="buttonzz" value="zoeken" onclick="LocationSearch()"/>
</li>
<li>Lijst</li>
<li>Lijst</li>
</ul>
<div class="fence">
#RenderBody()
</div>
My problem concerns the return key. Whenever I press the return key my inserted value in the input( type=text) tag is lost.
For instance I type New York and want to get result in NY , my field is empty.
If I type it in and use my submit button everything is fine. Can anyone help me here?
You don't need any javascript for this. Simply use HTML helpers to generate your search form:
#using (Html.BeginForm("LocationSearch", "SomeController", FormMethod.Get, new { #class = "navbar-search" }))
{
<div class="icon-search icon-white"></div>
#Html.TextBox("searchstring")
<input type="submit" value="Search" />
}
You could change the type to submit rather than button and this will set the button to default.
Return key submits your form and in your case your page will refresh. Try to prevent this default action. There are plenty of tricks for that!