I'm trying to create single page UI with router function but when I run the code UI gets redirected to base URI Instead of staying on routed URI.
I have uploaded my code on fiddler
$(function() {
router.start();
$("#showHome").click(function (){
alert('showHome click');
history.back();
router.navigate("/");
return false;
});
$("#showSales").click(function (){
alert('showSales click');
history.back();
router.navigate("/mycars");
return false;
});
$("#showAboutme").click(function (){
alert('showAboutme click');
history.back();
router.navigate("/aboutme");
return false;
});
});
any help would be appreciated. - thanks
You are being redirected to base URI because of your links are using "#" in the href attribute:
<li><a id="showHome" href="#">Home</a></li>
<li><a id="showSales" href="#">Sale Chart</a></li>
<li><a id="showAboutme" href="#">About me</a></li>
You should replace those for the actual route:
<li><a id="showHome" href="/">Home</a></li>
<li><a id="showSales" href="/mycars">Sale Chart</a></li>
<li><a id="showAboutme" href="/aboutme">About me</a></li>
Related
I calling a controller via button click using ajax. I want it to load hello.html page but I want spring to do it not ajax.
What happens after I click the button is nothing but I'm sure the controller is being hit.
Here is the controller I'm calling via button click using ajax.
#RequestMapping(value="/submitName", method=RequestMethod.GET)
public String submitName(#RequestParam String name, Model model) {
System.out.println(name);
model.addAttribute("name", name);
return "hello";
}
Here is the ajax call.
$('#submit-button').on('click', function() {
$.ajax({
type: 'GET',
url: '/submitName',
data: {name: $('#name').val()}
});
});
Funny thing is in the chrome network tab it shows the page that I'm expecting. Here is a snippet.
I think everything is ok here, except you didn't mention how you want to show your page or where. You have to declare a container where your html returned from controller would appear, like under a div id or something like that.
So, just in your current html page, declare a new tag, may be <div id="current-page-id"></div>
Now, append the hello.html page to your current page using jquery:
$("#current-page-id").html(responseData);
So, basically, do this:
$.ajax({
type: 'GET',
url: '/submitName',
data: {name: $('#name').val()},
dataType: 'html',
success: function (responseData) {
$('#current-page-id').html(responseData);
},
});
Or, simply, load the page as separate html page, not via ajax.
Update:
instead of using ajax-as you asked for in comment section, do this as follows:
function getHtmlPage(String name)
{
location.href = 'submitName/' + name;
}
Now call your method on button click:
$('#submit-button').on('click', function() {
var name=$('#name').val();
getHtmlPage(name);
});
AJAX Calling just send the request to the server (controller) and received a response,
By default, It's dos not responsibility for reloading the page.
In this why when you click the button it hit the server-side but stay on the same page.
Simple there is two way you can load your new page ( hello.html )
1| With AJAX calling:
On the button click method, you have to explicitly load the page (Best practice in Ajax Success block)
adding this window load metbod:
window.location.href = "http://localhost:8080/hello.html";
Like:
$('#submit-button').on('click', function() {
$.ajax({
type: 'GET',
url: '/submitName',
data: {name: $('#name').val()}
window.location.href = "http://localhost:8080/hello.html";
});
});
2| Direct Http Call on the Button
HTML
<a class="btn btn-primary btn-lg pull-right" href="http://localhost:8080/hello" role="button">Hello Page</a>
JSP:
<a class="btn btn-primary btn-lg pull-right" href="${pageContext.request.contextPath}/hello" role="button">Hello page</a>
Thymeleaf
<a class="btn btn-xs" th:href="#{/hello})}">Hello Page </a>
I try to build a post/get method with an list group team / href. Here is my code...
#if(count($variableController) > 0)
<ul class="list-group">
#foreach($variableController as $variableView)
{{$variableView->heimmannschaft}}
#endforeach
</ul>
#endif
spielerAuswahl is my view. And after a click on the list-group-item I get to this view. But there I need the information from the list-group-item.
Route::post('/spielerAuswahl', function () {
return 123;
//var_dump($_POST)
});
What I have to do?
replcae post with get method like this:
Route::get('/spielerAuswahl', function () {
return 123;
//var_dump($_POST)
});
if you want to return spielerAuswahl as view
Route::get('/spielerAuswahl', function () {
return view('spielerAuswahl');
});
dont forget
spielerAuswahl.blade.php should be in reousrces/view directory
on the other hand if you want to send some data to view
change route to :
Route::get('/spielerAuswahl/{somevar}', function ($somevar) {
return view('spielerAuswahl',compact('somevar'));
});
and send data like this:
#if(count($variableController) > 0)
<ul class="list-group">
#foreach($variableController as $variableView)
{{$variableView->heimmannschaft}}
#endforeach
</ul>
#endif
it was get method
if you want to use post method your action method should be POST
one way is using <form action="" method="post">
The challenge is to set current menu item as active in magento, which uses Prototype JS and not JQuery.
<ul id="mainmenu">
<li>home</li>
<li><a id="menuItem" href="{{store url='our-cakes'}}">Our Cakes</a></li>
<li>About us</li>
<li>Outlets</li>
<li>Franchise</li>
<li>contact us</li>
</ul>
<script type="text/javascript">// <![CDATA[
document.observe("dom:loaded", function() {
$(mainmenu).childElements().each(function(e){
var h = e.down('a').readAttribute('href');
if(h == window.location){
e.addClassName("current");
}
});
});
// ]]></script>
Here's a refinement of that method. Note that depending on the browser, the href of a link and the window.location.href may have a substring match, but not a full match, because of the rest of the URL which the browser provides from context. Just == is not going to make it.
var here = $$('#mainmenu a').sortBy(function(a){
return a.href.length;
}).reverse().find(function(a){
return window.location.href.include(a.href);
});
if(here) here.up().addClassName('current');
Also, this is looking for the longest match first, so you don't get all of the menu items highlighted on the home link /.
I have a ul of dynamic buttons in my view that appears like the following:
<ul id="dashboard_list">
<li id="id_100" class="btn btn-primary">
<a id="id_100" href="/plugin_name/controller_name/action_name/100">Default View</a>
</li>
<li id="id_200" class="btn btn-primary">
<a id="id_200" href="/plugin_name/controller_name/action_name/200">Second View</a>
</li>
<li id="id_300" class="btn btn-primary">
<a id="id_300" href="/plugin_name/controller_name/action_name/300">Third View</a>
</li>
</ul>
The above links are created using the JSHelper as follows:
echo $this->Html->link($view->name, '/plugin_name/controller_name/action_name/'. $view->id, array('class' => 'ajax-link', 'id'=> $view->id));
I'm using the script below that I found while researching:
// onClick function
function onClick(){
$('#view_container').load($(this).attr('href'), onSuccess);
return false;
}
// activate ajax links to call the onClick function
$('.ajax-link').live('click', onClick);
// onSuccess-callback function
function onSuccess(){}
Now, in my controller / action im doing a simple check for data as follows:
function actionName() {
if ($this->data != null) {
die('We has data!');
}
else
{
die('We has no data.');
}
}
My #view_container element updates properly with "We has no data" on every click. So, I'm obviously not communicating the link's view id number (data) between the view and the controller.
Can anyone offer some direction on how to implement this functionality in CakePHP 1.3 to access the selected id (variable) in the controller? I mostly seem to find form submission examples (or just dead links), and I unfortunately don't have the option to upgrade cakePHP.
FYI: The proper helpers, scripts and the js->writeBuffer are being included.
Thank you for any responses in advance!
Rewrite your function as follows:
function actionName($id) {
debug($id);
if ($this->data != null) {
die('We has data!');
}
else
{
die('We has no data.');
}
}
If you need to do more than one variable in the URL ex:
href="/plugin_name/controller_name/action_name/300/yellow/bannana"
Then your function would look like:
function actionName($id,$color,$fruit) {
}
I'm using a codeigniter for my website. I'd like to have a sound triggered when user clicks the menu. But the page refresh so fast after I click it so that the sound can't be heard. How can I make the page refresh after the sound is completed?
Here is the html:
<ul class="navigation">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<span id="dummy"></span>
Here is the javascript:
$(document).ready(function(){
$(".navigation").click(function(){
$("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
});
});
Add a return false inside your function to avoid refresh just after the click.
$(document).ready(function(){
$(".navigation").click(function(){
$("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' />");
return false;
});
});
i didn't do much work with audio, so Im not sure how the compatibility for this is but your solution should be somewhere along the lines of
$(document).ready(function(){
$(".navigation a").click(function(e){
document.nextPage = $(this).attr('href')
$("#dummy").html("<embed src='<?=base_url()?>sound/testing.mp3' hidden='true' autostart='true' loop='false' onended='followLink();' />");
e.preventDefault();
});
});
function followLink(){
document.location.href = document.nextPage;
}
where you are using the onended event to move on.
update
this is a batter way of doing the same thing http://jsfiddle.net/joshK/d5eNu/
$(document).ready(function(){
$(".navigation a").click(function(e){
var nextPage = $(this).attr('href');
var audioObj = $("<audio>").attr({
"hidden":true,
"src":"<?=base_url()?>sound/testing.mp3"
}).bind("ended",function(){//when sound finished playing follow the link
document.location.href = nextPage;
}).appendTo("#dummy");
audioObj[0].play();
e.preventDefault(); //prevent the page from refreshing
});
});