I have a link and a css hidden div:
Click me
<div class="bio">Your bio</div>
When I click the link, it shows the div. Refresh the page, and it's hidden again. I want the 'bio' div to stay open even when refreshing the page if the link was clicked and the div shown. I also want the opposite, that if I clicked the link again and the 'bio' div get hidden, to stay hidden on page refresh.
Basically, I am trying to "persist" the toggle state of the div in Laravel, and not sure how to do it.
I am using jquery for the show/hide functionality.
$('.bio-toggler').click(function(){
$('.bio').toggle();
});
Any ideas on how to do this?
Just do an AJAX POST to an endpoint within your application which sets the variable. When you're showing you're HTML, just check for that.
jQuery:
$.ajax({
type: "POST",
url: 'http://localhost:8000/api/profile/toggle',
success: function() {}
});
Controller:
public function toggle()
{
Session::set('toggled', true);
}
View:
#if (Session::get('toggled'))
Click me
<div class="bio">Your bio</div>
#endif
This is just boilerplate. You would probably have to tune it, like check if there is an older value to toggle in PHP, etc.
Related
I have a single page mark-up with popup divs that contain forms that the user can use to update his/her account information. After form submission the popup closes and the page refreshes showing the updated information that is located within a li (this seems to be working). The problem is, if the user goes back and tries to update again the button within the popup is not submitting.
Thanks in advance for any suggestions!!!
Javascript
$('#updateadmin').click(function() {
var admin = $('#adminform').serializeArray();
/*alert(admin);*/
$.ajax({
type: "POST",
url: 'adminupdate.php',
data: admin,
success: function(data) {
if(data=="success") {
$('#admindiv').popup('close');
$.mobile.changePage('companyinfo.php', {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true,
changeHash: false
});
} else {
$('#adminupdatestatus').html(data).css({color: "red"}).fadeIn(1000);
}
}
});
return false;
});
It sounds like the #updateadmin link/button is located on the page that gets reloaded, if this is the case then you should delegate your event handler so it affects matching elements in the DOM for all time, not just when the code runs.
You would change this:
$('#updateadmin').click(function() {
to this:
$(document).on("click", "#updateadmin", function() {
This works because you're now attaching the event handler to the document element which always exists. When events reach the document element they are checked to see if the element on which they originally fired matches the selector we put as the second argument for .on().
Documentation for .on(): http://api.jquery.com/on
I have a page that i want to remain static with two divs that i want to load different html views during user navigation. I want the content to change without refreshing the entire page, only refreshing those two divs.
How can i load a specific view into those divs?
I already have the menu navigation that determines the html views to be loaded into those divs and controller functions to the menu choices that i get using javascript and then use it in the controller of the main page, i just dont know how to load the content.
You can load the views using a bit of Javascript with AJAX.
With jQuery:
$('a.nav-button').click(function(e) {
// prevent the default action when a nav button link is clicked
e.preventDefault();
// ajax query to retrieve the HTML view without refreshing the page.
$.ajax({
type: 'get',
url: '/path/to/your/controller/method',
dataType: 'html',
success: function (html) {
// success callback -- replace the div's innerHTML with
// the response from the server.
$('#yourDiv').html(html);
}
});
});
I think you need to use a jquery and Codeigniter
This will be your jQuery Code
$('nav').click(function(){//element to be click to load the page in the div
$(your_div_element).load('controller/method');
});
This will be your Codeigniter
function method(){
$data['result'] = ''//you can use this if you need to pass some data to the view
print $this->load->view('your_view',$data,true);//This will load your view page to the div element
}
Goodluck!
In order to put content without refreshing you should use ajax, lets say you have divs in a file under a directory (webparts), and you want to add it's content to a div called my_div; first create a method on the controller that renders just the view (div) you want to put something like this
function part($part = false)
{
$data = array(); // you can add data to your div, if you need to.
$this->load->view("webparts/$part", $data);
}
Then with javascript (jQuery in this case) you can call
$('#my_div').load('controller/mypart');
Note: I like to use "load" because it allows me to select certain sections of the view Im requesting, using something like this
$('#my_div').load('controller/mypart #certainsection');
Will load the element with the id="certainsection" from mypart view
I have a web application that loads javascript on page load:
$(function() {
$('.modal-delete').click(function() {
alert();
});
});
I have a html page with a series of buttons which alert a blank message box when they're clicked:
<button class="modal-delete btn danger"></button>
which works fine.
However, a have some AJAX calls that generate more buttons just like the ones above but NOT on page load! They can be created at any time. These buttons do not do anything but they're meant to load the alerts. They're identical but because they never existed on page load, the Jquery code doesn't work on these buttons. How do I attach the same code to these buttons too?
Many thanks :).
I think you'll want jQuery's 'live()' function:
$('.modal-delete').live('click', function() {
alert();
});
This binds to the elements which match but also rebinds when new elements are added in the future:
"Attach an event handler for all elements which match the current selector, now and in the future"
Change the ready code to this...
$(function() {
$("document").on("click", ".modal-delete", function() {
alert("click");
});
});
I need to create a jQuery App with 30 buttons, from 1 to 30, whereby each one calls the exact same action script via Ajax where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).
For example, let's say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data from process.php?btn=27.
Which type of button should I use for this: <input> buttons, <a> buttons, <button> buttons, or something else? And why do you suggest that?
Also, how would Ajax get the corresponding value (1-30) of the button pressed with the method you suggest?
Thanks!
I would suggest to use <a/> that way if JavaScript is disabled you can maintain the application's functionality.
Button 3
And the script would simply use the href to post to your page.
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
Update
Since JavaScript is required than my recommendation would depend on your application design. If you want the big buttons to look like buttons simply use <input type="button" value="3"/> As by default they will have hover effect, depressed effect built out of the box.
If your buttons do not look like normal buttons maybe just blocks or some other style a <div/> could also be an option. The one downside to using an <a/> would be you always have to suppress the default behavior of the click()
Each will work fine. But the <a> you can style with an image while <input> and <button> you cannot (the browser decides on the look).
Simply bind the click event on the button. Assuming you have this HTML:
Button 1
Button 2
...
Button 3
Here's the Javascript. The trick is to call the AJAX here, and return false to prevent the Browser from changing page.
$('a').click(function(e) {
$.get($(this).attr('href'), function(result) {
alert('AJAX result = '+result);
});
return false;
});
You could create a custom attribute on each button.
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
In your javascript
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
By doing this you can add additional attributes to extend the data stored in each button and it also makes chaning the AJAX target link very easy since it's centralised, rather than spread around multiple anchor tags.
As an alternative to Marks answer, you could use a <form> element, and have each button a submit button; either a input or button. Set the name of the element to "btn" and the value of the element to the button number.
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
The jQuery would look something like:
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
If you want the submission to be a POST request, this would most likely be better. For a GET request however, Marks will probably be easier.
I'm trying to do a simple update, but can't figure out somthing.
I have a table that i get from a DB with an Edit button that when i press change to a Save button so i can save with Ajax the record that the user just edit.
I'm doing the first part just fine, have one function that do all the jquery stuff on the page (that is working just fine).
Now I want to change the $('#a'+productID) line to save insted of edit. i am changing the link attribute also, so when the user presses save it will send him to a function that will make the Ajax request and update the record.
But i dont have a clue how to start that....I don't think it has any thing to do with any bind function becouse i am allready binded by calling the save function (or am i wrong and need to bind antway???) can any one help me out here?
P.S. the save function recives the productID do i have the right product when i will need it.
Don't have a code to send for the save function becouse i don't know how to start it and every thing i tried doesn't work....sorry :-(
It might be easier if you simply had both buttons on the page and toggled between them depending on the page state.
<a id="editButton" href="http://example.com/widget/edit/1">Edit</a>
<a id="saveButton" href="http://example.com/widget/update/1" style="display: none;">Save</a>
$(function(){
$('#editButton').click( function() {
// set up the form as edit...
$(this).hide();
$('#saveButton').show();
return false;
});
$('#saveButton').click( function() {
var button = $(this);
var href = button.attr('href');
$.post(href,$('form').serialize(), function() {
// change form back to readonly...
button.hide();
$('#editButton').show();
}
});
});