I am trying to build a menu for my website and using Smarty to display the pages. When user click on the Logout option the JQuery send an Ajax call to index.php script which contain the code for Smarty to display the page but it is not displaying it. It was working fine before I added the menu. There is no error in the firebug too. Can someone put me in the right direction.
Here is PHP code
if (isset($_POST['menu_index']))
{
if ($_POST['menu_index'] == 'Logout')
{
$smarty->display("login.tpl");
exit;
}
}
Here is JQuery code
$('ul li a').on('click', function() {
var menuItemIndex = $(this).data('val');
console.log(menuItemIndex);
$.ajax({
url: 'index.php',
type: 'POST',
data: {
'menu_index': menuItemIndex
},
dataType: 'json',
success: function(response) {
alert('success');
},
error: function(errorMsg) {
alert('failed');
}
});
});
Here is HTML Code
<form name="mainmenu" id="mainmenu">
<div id='content'>
<div id='jqxMenu'>
<ul>
<li>Maintanence
<ul style='width: 180px;'>
<li>Add Category</li>
<li>Add Sub-category</li>
</ul>
</li>
<li>Process Order
<ul style='width: 180px;'>
<li>Ship Order</li>
<li>Change Order Status</li>
</ul>
</li>
<li>Reports
<ul style='width: 180x;'>
<li>Orders by station</li>
<li>Orders by date</li>
<li>Pending Orders</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
</div>
</form>
Hi I think you don't understand how Smarty works, but I can tell you that you don't have any template in html code which is very important for this kind of programming.
You need to make template for menu and call it menu.tpl -> then include it on index.tpl ...
For more informations take a look www.smarty.net
Related
I am using a Font Awesome check-box on/off and the below script to toggle off and on when clicked.
This works fine if my links are #, but I recently changed my links to submit a form on a click of the check-box. This issue is once the page reloads, the checkbox goes back to the initial on state. I am not a Javascript pro and I am wondering if I can pass a variable to the script to set the state off/on?
<ul id="setting-cb">
<li class="wet-asphalt"><i class="fa fa-check-square-o wet-asphalt"></i> Checkbox 1</li>
</ul>
<script>
$('#setting-cb li a').click(function(){
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-square-o fa-check-square-o')
});
</script>
As discussed, because you already added the value to a hidden input you can simply catch it again using this:
class="<?=($_POST['your_checkbox_name'] == 'x')?'class_name':''?>"
Try to perform an Ajax call.
Here's an example:
JS:
$("#setting-cb li a").click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-square-o')
$.ajax({
url: '/destination.php',
type: 'POST',
data: {
//your data Here
},
success: function(response) {
//Do something here...
}
});
});
HTML:
<ul id="setting-cb">
<li class="wet-asphalt"><i class="fa fa-check-square-o wet-asphalt fa-square-o"></i> Checkbox 1</li>
</ul>
Fiddle
My code works correctly for showing database data .but i want to use infinite scroll for large data show response time.But I have no Idea how to use infinite scroll with my this code also which plugin use.
<script>
function getfilter(str){
if (str==""){
document.getElementById("result").innerHTML="";
return;
}
$.ajax({
url: "Views/pfolioresult.php?q="+str,
type: "GET",
// data: serializedData,
success: function ( responseText ) {
$("#result").html(responseText);
}
});
}
</script>
<div class="sprocket-mosaic-header">
<div class="sprocket-mosaic-filter">
<ul>
<li class="all active" data-mosaic-filterby="all" onclick="getfilter(this.id)" id="all" >All</li>
<li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id="android" >Android</li>
<li class="iOS" data-mosaic-filterby="iOS" onclick="getfilter(this.id)" id="ios" >IOS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="result">
ok
</div>
you can use http://infiniteajaxscroll.com/ or http://jscroll.com/. this will help you.
I currently have a php script which is loaded by Javascript when a button is clicked.
It creates all the html content which looks like this once loaded
<ul>
<li>
<a href='foo.php?var=abc123'>
</li>
<li>
<a href='foo.php?var=def123'>
</li>
</ul>
So when a link is clicked, it uses GET to send PHP variable to same script, and it brings up another list of results.
What I want to do, is when you click a link instead of going to a new page with results, it loads them below this part to result in something like this (like a treeview():
<ul>
<li>
abc123
</li>
<ul>
<li>
jkl123
</li>
<li>
ghi123
</li>
</ul>
<li>
def123
</li>
</ul>
I can get it to work if I use static variables, but i need to find a way to take the variable from the created html on click, put it into the javascript function, so it can execute the PHP script.
Thanks.
It sounds like you're going to want to use AJAX:
$.ajax({
type: 'GET',
url: "yoururlhere.com",
data: {
someparam: "somevalue",
param2: "anothervalue"
},
dataType: "json",
success: function (JSONdata, textStatus, jqXHR) {
// do work here on success
}
});
You can attach it to a click handler like this:
$("someID").on("click",function(){
event.preventDefault();
var href = $(this).attr("href");
$.ajax({
type: 'GET',
url: href ,
data: "param=value¶m2=anothervalue",
success: function (JSONdata, textStatus, jqXHR) {
// do work here on success
}
});
});
Update:
Some example HTML to go along with the above code:
<a id="someID" href="yoururl.php">Click me</a>
I'm creating a mobile app with jQuery Mobile and i've a little problem. I want to create a list with some content from the database wich I get from an ajax post.
The markup looks like this:
<div data-role="page">
<div data-role="header">
<h1>Facturen</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" id="Invoices">
<div id="invoiceList"></div>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
This is the jQuery:
$.ajax({
type: "POST",
url: "invoices/index.php",
data: '',
complete: function(data)
{
$('#invoiceList').html(data.responseText);
}
});
Well, I put the results of the query between but in some way the css doesnt work of the list doesnt work.
if I trie this it worked fine:
<ul data-role="listview" data-inset="true" id="Invoices">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Somebody knows how to fix this?
Thanks in advance!
In jQuery Mobile, whenever you update elements there is usually a follow-up step where you trigger an action upon it. For example, when you add new things into an unsorted list, you need to call
$('#invoiceList').listview('refresh');
This would go immediately after adding these elements into your UL inside the complete: callback.
There are various other things you could try as well if this doesn't generate the behavior you're looking for. For example, you might need to execute the .append() operation instead of using .html(). I've seen that sort of usage more frequently in these sorts of circumstances.
Try adding to the ul element you id as class invoiceList, because you are appending the li elements in the div element and formatting will not work:
<ul data-role="listview" data-inset="true" id="Invoices" class="invoiceList">
</ul>
<script>
$.ajax({
type: "POST",
url: "invoices/index.php",
data: '',
complete: function(data)
{
$('.invoiceList').html(data.responseText);
}
});
</script>
i have a problem with this jquery, in the success function call, its mean to remove the `support' button, and fade in the msg, this is my jquery code:
$('.stats').delegate('.against', 'click', function(e) {
//stop event
e.preventDefault();
// cache a reference to the previous <li> element
// since it is used more than once
var $prevLi = $(this).closest('li').prev('li');
//get the id
var the_id = $prevLi.attr('id').split('_').pop();
//the main ajax request
$.ajax({
context:this,
type: "POST",
data: "action=against&id=" + the_id,
url: "ajax/sa.php",
success: function (msg) {
$prevLi.find("h2.score_down").html(msg).fadeIn();
$(this).closest('li').next().next().find('button').remove(); $(this).remove();
}
});
});
the html:
<ul class="stats">
<li id="topic_20" class="score">
<h2 class="score_up" style="color:green;">10</h2>
<span style="text-align:center;">Supporters</span>
</li>
<li>
<button type="submit" value="Actions" class="support" title="support">
<i></i>
<span>Support</span>
</button>
</li>
<li id="down_20"class="score"><h2 class="score_down">20</h2><span style="text-align:center;">Against</span>
</li>
<li>
<button type="submit" value="Actions" class="against" title="against">
<i></i><span>Against</span></button>
</li>
</ul>
<h3 class="success"></h3>
this jquery is meant to remove the support button, when clicked and the new score is meant to fade in! :)) thanks
The button is in the <li> 2 previous to the .against containing one, so your .next() calls should be .prev(), like this:
$(this).closest('li').prev().prev().find('button').remove();
Why not use $("button[type=submit]")? Or just $("button")? If you use the double prev() you're going to have to adjust your code when your markup changes. If you do that often enough, that makes making changes a nightmare later.