munaz munaz - 6 months ago 40
Javascript Question

Hyperlink does not work on volt in phalcon

i have a menu in my volt which is by default hidden by css, and its shows by jquery slide. its every links are getting its url but when i click its not go to that page. its work when i call its url by jquery. im not understanding whats the problem is?

[Volt]
<ul id="bar_r">
<li class="sms">0</li>
<li>{% if uname == true and active === '1' and level !== '0' %}: {{uname}} :{% else %}::{% endif %}</li>
<li class="menu"><span class="m"></span>
<ul class="d">
{% if uname == true and active === '1' and level === '1' %}
<li>{{ link_to('profile/each/'~uid,'Profile','id':'profile') }}</li>
<li>{{ link_to("blog/entry","Blog",'id':'blogin') }}</li>
<li>{{ link_to("session/end","Logout",'id':'logout') }}</li>
{% else %}
<li>
{{ form('session/start','id':'logged') }}
<label for="email" style="margin:0;padding:0;">Email</label>
{{text_field("email", "class":"curved")}}
<label for="passwd" style="margin:0;padding:0;">Password</label>
{{password_field("passwd", "class":"curved")}}
<label for="logins" style="margin:0;padding:0;font-weight:bold;"><em style="display:none">Submit</em></label>
{{ submit_button('Login',"id":"logins") }} {{ submit_button('Sign up',"id":"signup") }}
{{end_form()}}
</li>
{% endif %}
</ul>
</li>
</ul>

[Jquery]

//DropLoginMenu
$(".menu").click(function(e){
e.preventDefault();
$(".logform").slideToggle(400);
return false;
});
$(".m").click(function(e){
e.preventDefault();
$(".d").slideToggle(500);
return false;
});
// Profile redirect
$('#profile').click(function(e){
e.preventDefault();
//var i = $(this).attr('id');
var url = $(this).attr('href');;
var jqXHR = $.post(url,function(){
jqXHR.done(function(){
window.location.href = url;
//window.location = window.location.host;
});
jqXHR.fail(function(){
window.location.href = 'index';
//window.location = window.location.host;
});
});
});
// Signup
$('#signup').click(function(e){
e.preventDefault();
var url = 'user';
var jqXHR = $.post(url,function(){
jqXHR.done(function(){
window.location.href = 'user';
});
jqXHR.fail(function(){
window.location.href = 'index';
});
});
return false;
});
// Login Action Redirect
$('#logins').click(function(e){
e.preventDefault();
var url = $('#logged').attr('action');
var uname = $('#email').val();
var password = $('#passwd').val();
$('#logged').html('Processing...');
var jqXHR = $.post(url,{email:uname,passwd:password},function(){
jqXHR.done(function(){
window.location.href = 'index';
//window.location = window.location.host;
});
jqXHR.fail(function(){
alert('Error');
});
});
return false;
});
// Logout Page Redirect
$('#logout').click(function(){
var url = 'session/end';
var jqXHR = $.post(url,function(){
jqXHR.done(function(){
window.location.href = 'index';
//window.location = window.location.host;
});
jqXHR.fail(function(){
window.location.href = 'index';
//window.location = window.location.host;
});
});
});
[css]
.bar{height:30px;background-color:#333;color:#eee;padding:0;margin:0}
#bar{margin:0 auto}
#bar_r{float:right}
#bar_l{float:left}
#bar_r li,#bar_l li{float:left;position:relative;background- color:#333;color:#fff;padding:5px 4px 6px 4px}
#bar_r li:hover,#bar_l li:hover{background-color:#444}
#bar_r .m{background-image:url('../img/menu.png');background-repeat:no-repeat;background-position:50% 50%; vertical-align: middle middle;padding:15px;cursor:pointer}
#bar_r .menu ul{background-color:#444;display:none;position:absolute;left:auto;right:0;*right:-1px;margin-top:6px;min-width:160px;width:auto;z-index:9999;}
#bar_r .menu:hover ul{display:none}
#bar_r .menu:hover li{float:none;background-color:#444;color:#fff}
#bar_r li,#bar_l li{border-right:1px solid #444}
#bar_r li:last-child,#bar_l li:last-child{border-right:0px}
#bar_r li li a,#bar_r li a,#bar_l li a{color:#fff}
.d li{display:block;width:100%;clear:both;border-bottom:1px solid #555;}


is it possible to work its url without jquery?

Answer

Your links are not working because of:

$(".menu").click(function(e){
    e.preventDefault();
    $(".logform").slideToggle(400);
    return false;
});
$(".m").click(function(e){
    e.preventDefault();
    $(".d").slideToggle(500);
    return false;
});

because both e.preventDefault() and return false stops evaluation: proof.