I have the link below:
<a href='#Url.Action("MyAction","MyController", new SearchCriteriaAffaire { Page=3, PageSize=5 }, null)'>Test1</a>
This links works. I received my search criteria in my action page.
Now, I have the button with javascript below:
<button id="buttonTest2">Test2</button>
<script language="javascript">
$("#buttonTest2").click(function () {
document.location = '#Url.Action("MyAction","MyController", new SearchCriteriaAffaire { Page=3, PageSize=5 }, null)';
});
</script>
This button doest' work. I mean, I didn't receive my search criteria in my action page and I don't know why??
It drives me crazy!
Test1 and Test2 produces exactly the same url (I check in 'view source code' by right clicking on the html page):
/?SortBy=None&Page=3&PageSize=5'
Any help will be greatly appreciated.
try this :
<button id="buttonTest2">Test2</button>
<script language="javascript">
$("#buttonTest2").click(function () {
document.location = '#Html.Raw(Url.Action("MyAction","MyController", new SearchCriteriaAffaire { Page=3, PageSize=5 }, null))';
});
</script>
Related
I have successfully implemented autocomplete search option in my laravel project "book shop managing". Again from my homepage if I click on the name of a book then it would show the specific book. But how can I add link to my search result, so that if I click on a book from the result then it would take me to the page that contains the book details.
my index.blade.php
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#books" ).autocomplete({
source: 'auto_complete'
});
});
</script>
<div class="ui-widget">
<label for="books">Books: </label>
<input id="books">
</div>
controller
public function search(){
$search = Input::get('term');
$books = Book::where('title','like','%'.$search.'%')->get();
foreach ($books as $book) {
$data[] = $book->title;
}
// return $books;
return $data;
}
route
Route::get('auto_complete', 'BooksController#search');
CONTROLLER
public function search(){
$search = Input::get('term');
// return $search or dd($search) check if request get the value please
$books = Book::where('title','like','%'.$search.'%')->get();
// return $books or dd($books) check if request get the values please
$results = array();
foreach($books as $key => $v){
$results[]=['id' => $v->id];
}
// return a json object
return response()->json([
'suggestions'=>$results]);
}
JS
$(function() {
$( "#books" ).autocomplete({
source: 'auto_complete',
onSelect: function (data) {
location.href = "www.yourwebsite.com+data.suggestions.id" // this redirect for example book id:1 to www.yourwebsite.com/1
// Or use jquery to redirect: window.location.replace("http://stackoverflow.com");
}
});
});
Use the same route, let me know if there is some error in network or console!
I supposed that you integrated the jquery library and autocomplete library js :)
his question is asked earlier here, but I didn't get those answers to work. I work with a button:
<div data-role="popup" id="test_popup">
<p>this is a test</p>
</div>
test
And I tried putting
<script type="text/javascript">
$(document).on('popupafteropen', '.ui-popup', function() {
setTimeout(function () {
$(this).popup('close');
}, 2000);
});
</script>
in the head section, but that didn't work. What am I doing wrong?
(I have multiple popups/buttons on the page)
By the time setTimeout executes the function, $(this) doesn't return popup. Instead, you should retrieve popup before running setTimeout.
$(document).on('popupafteropen', '.ui-popup', function () {
var popup = $(this);
setTimeout(function () {
popup.popup('close');
}, 2000);
});
Demo
I am working on a web application and was making great progress using JQuery UI Tabs, specifically the 'url' method of dynamically updating the target url of the ajax request which was bound to each tab. I have created a simplified example here:
Each of the 2 Tabs, function 1 & function 2, display the results of some tests based on the parameters that are passed to the test. The tests remain the same throughout, but I was changing the variables used in the functions by manipulating the url bound to the tab. The 'url' method of updating the url being called on a lazy loading Tab allowed me to do this, but its now been deprecated and won't be supported at all soon. So I have been searching for a way to do this using the 'beforeLoad' event in JQuery UI 1.9.
The suggestion was that one could manipulate the ui.ajaxSettings to set the data parameter but there is a bug (http://bugs.jqueryui.com/ticket/8673), and it appears this won't be fixed. The workaround suggested is to manipulate the ui.ajaxSettings.url instead.
My working example is below, but I'm not sure if this is the cleanest / most appropriate way to achieve what I'm after and any suggestions would be most welcome. I struggled to find examples on how to do even this much, so hopefully it will help someone else in a similar situation.
<title> Jquery Tabs AJAX Test</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.1.custom.css">
</head>
<body >
<script type=text/javascript>
$(document).ready(function() {
$( '#tabs' ).tabs({ });
$('button.set_variable').click(function() {
var variable = $(this).val();
$( '#tabs' ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.url += "&variable=" + variable ;
}
});
var selected_tab = $('#tabs').tabs('option', 'selected');
$( '#tabs' ).tabs("load", selected_tab);
});
})
</script>
<button class="set_variable" value="1">Variable = 1</button>
<button class="set_variable" value="2">Variable = 2</button>
<button class="set_variable" value="3">Variable = 3</button>
<div id="tabs" >
<ul>
<li>Function 1 </li>
<li>Function 2 </li>
</ul>
</div>
</body></html>
N.B. The ajax.php file here just echos back what was passed to it.
<?php
extract($_GET);
var_dump($_GET);
?>
You could do something like this too :
var variable = '';
$( '#tabs' ).tabs({ beforeLoad: function( event, ui ) {
if(variable != '')
ui.ajaxSettings.url += "&variable=" + variable ;
}});
$('button.set_variable').click(function() {
variable = $(this).val();
});
http://jsfiddle.net/DNWzY/1/
I am having some trouble having my link function to execute javascript.
link:
<a class="glossyBtn" id="saveButton">Save</a>
Script:
<script type="text/javascript">
$(function (){
$('form').submit(function () {
$('#saveButton').attr('disabled', 'disabled');
});
});
</script>
$('form').submit() is fired when you submit a form (usually with <button type="submit">). Your button is not of submit type.
You may achieve it adding the following onclick to your <a> element: onclick="$('form').sumbit();" or add the following to your JS code
$('#saveButton').click(function{
$('#saveButton').attr('disabled', 'disabled');
$('form').submit();
})
I'm trying to implement the solution provided in this question here:
How to pass Model Value through ActionLink
So in my view I have an action link
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new {#id="check"},null)
And in a Javascript file I have :
$(function ()
{
$("#check").click(function (e) {
e.preventDefault();
}
I've cut the function down to just preventing the default action of the action link.
In the view I've also referenced the java script files
<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/GetRegistrationPlate.js" type="text/javascript"></script>
However when I click on the action link the default method continues to fire.
What might I have missed?
For one there are many syntax errors. Try this
$(function () {
$("#check").click(function (e) {
e.preventDefault();
return false;
});
});
Edit: Also, change the ActionLink to
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new { #id = "check" }, new { #id = "check" })
The first id is for the route, the second id is for the html element.