I'm trying to reload the table data (rows/TRs) when the user clicks a link, I can add more/append? the data but I cannot seem to delete the old table data before inserting the new table data.
(BTW: the updatetable.php contains all of the (TR's) for that table)
Here is what I'm trying to do:
$(function() {
$("#append").click(function() {
var test;
$.get('updatetable.php', function(data) {
test = data;
$("#tablesorter-demo").remove();
$("#tablesorter-demo").append(test);
$("#tablesorter-demo").trigger.update(); // <--- I think that error is here, I tried to take out the trigger. but it still doesn't work ?
alert(test);
//return false;
});
});
The href code is: <a id="append" href="#">Refresh Page</a>
Try this:
$(function() {
$("#append").click(function(e) {
e.preventDefault();
$.get('updatetable.php', function(data) {
$("#tablesorter-demo").find('tbody').html('').append(data);
});
});
});
#Adam Putinski Not if one is using Internet Explorer then it looks like this code will not work the table and rows show but nothing else can be done with them, also the $('[title!=""]').qtip({
}); will only work until the user loads the data from the updatetable.php page then it will not work anymore ?
Related
I have a jquery script that posts a value:
// //Delete a product from the shopping cart
tpj('.remove').on('click', function() {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
console.log('test');
var $remove = tpj(this).attr('id');
url = 'includes/shoppingcart.php';
// Send the data using post
var posting = tpj.post( url, { remove: $remove} );
// Put the results in a div
posting.done(function( data ) {
var content = tpj( data );
tpj( "#result" ).empty().append( content );
});
});
This works the first time, but when I click a second time I redirect to my homepage, which makes sense since the anchor tag the .remove class is in has nothing in its href. However this means the preventdefault() is not working, the entire on click is not working.
Why is that? I googled and found out I should use .on instead of .click but this didn't change anything for me.
The following html line (which fires the jquery):
×
is in my header.php and shoppingcart.php, when the ajax post is made and the result of shoppingcart.php is loaded in my shopping cart, the link stops working like it should.
What do I need to do?
function(EVENT) foggoten in
tpj('.remove').on('click', function() {
//...
}
must be:
tpj('.remove').on('click', function(event) {
//...
}
I want to store a value to the cache using javascript when clicking an a href link. I'm setting up following code dynamicall
<a align="left" href="projectoverview.html">Test Manager</a>
So I want to save the text Test Manager to the cache, but I don't know how to catch this text when it's clicked. The code below is how that piece of code is setup. Do I need to add an onclick or something or is there a better way?
var text = '<a align=\"left\" href=\"projectoverview.html\">' + project['title']
+ '</a><p align=\"right\">';
If you want to pass data from page to page using javascript/jquery you can do so with sessionStorage. Below is just an example of how you would do it using jQuery.
$('a').each(function() {
$(this).on('click', function() {
var linkText = $(this).text();
// Save data to sessionStorage
sessionStorage.setItem('clickedLink', linkText);
});
});
Then on the next page you can call it by using the .getItem function like so.
$(function() {
var data = sessionStorage.getItem('clickedLink');
alert(data);
});
If implemented correctly the alert box will say "Test Manager".
You can read more about sessionStorage here.
EDIT:
I would add a special class to those links though because the code above will execute on any link you have on the page which may give you unwanted issues.
Ok so I am using bootbox which works perfectly, but when I want to send variables in a link with PHP then all javascript works but not the bootbox.
----This works----
I dont have an href
<script>
$(document).ready(function()
{
$('a.alert_without_href').on('click', function()
{
alert('This works');
bootbox.alert("This ALSO works");
});
});
</script>
----This doesn't work----
I have an href<br><br>
<script>
$(document).ready(function()
{
$('a.alert_with_href').on('click', function()
{
alert('This works');
bootbox.alert("This one DOESNT work"); <---- PROBLEM IS HERE
alert('This also works');
});
});
</script>
----And then finally to display----
<?php
if ($_SERVER['REQUEST_METHOD'] === 'GET')
{
echo 'Hello ' . $_GET["name"];
}
?>
I do need to pass a variable in the link, it cannot be taken out. How can I fix this?
Thanks in advance
----EDIT----
I added an image of a table below with an explanation of what exactly has to be done
Table of users
--ONLY READ IF YOU SAW THE IMAGE--
So each link under "Action" in the table creates a link with a variable of the user's unique ID. When it is clicked I check if $_GET['remove_id'] is set and then run a MySQL query to delete that person with that ID.
So basically the idea of Bootbox is to be a confirmation message if you want to delete the user, I don't want to use normal alert('') because that can be disabled.
p.s. the delete function does work, I just want to add a confirmation now using bootbox.
Bootstrap (and therefore Bootbox) modals do not generate blocking events, so if you want something to happen when you click on a hyperlink, you need to prevent the default behavior (page navigation). Something like:
I have an href<br><br>
<script>
$(document).ready(function() {
$('a.alert_with_href').on('click', function(e) // <-- add an event variable
{
e.preventDefault(); // <-- prevent the event
bootbox.alert("I am an alert!");
});
});
</script>
Since you said you want to confirm something, use bootbox.confirm and some AJAX:
I have an href<br><br>
<script>
$(document).ready(function() {
$('a.alert_with_href').on('click', function(e) // <-- add an event variable
{
e.preventDefault(); // <-- prevent the event
var data = { name = $(this).data('name') };
bootbox.confirm("Really delete?", function(result){
if(result){
$.post('your-url', data)
.done(function(response, status, jqxhr){
// do something when successful response
})
.fail(function(jqxhr, status, error){
// do something when failure response
});
}// end if
}); // end confirm
});
});
</script>
I also added a data-attribute to make it easier to get the value for posting (don't use a GET request to perform a delete action). I would assume you would reload the page on a successful delete, or you can use .remove to remove the "row" containing the item you're removing
I'm currently building a website for a school project that loads json data into the page dynamically as the user navigates. Here's the code I'm working with right now:
$(function () {
var $divs = $(".divs > div"),
N = $divs.length,
C = 0; // Current
$divs.hide().eq(C).show();
$("#next, #prev").click(function () {
$divs.stop().fadeOut().eq((this.id == 'next' ? ++C : --C) %N).fadeIn();
}); // close click function
}); // close main function
var content = jSONtexts.texts;
$(document).ready(function () {
$("#content0").html(content[0].content);
$("#content1").html(content[1].content);
$("#content2").html(content[2].content);
$("#content3").html(content[3].content);
$("#content4").html(content[4].content);
$("#content5").html(content[5].content);
$("#content6").html(content[6].content);
$("#content7").html(content[7].content);
$("#content8").html(content[8].content);
});
In my html I have divs set up as containers for the particular json data that I want to be presented. It's rudimentary right now, but the user clicks 'next' or 'previous' and a different section of the json loads into the visible div.
What I need is to be able to save what div is showing (maybe using the 'C' variable?) - into a cookie, and load that div when the user returns. I've tried using js.cookie.js, and it's quite possible that I'm using it wrong, Here's what I'm trying:
$( window ).unload(function() {
Cookies.set('pageState', 'C');
}); //close cookie function
But that doesn't seem to be working. It breaks my json loading when I try to put it anywhere in the .js file that would be relevant to the C variable.
I'm stumped. I've looked everywhere on google, and everything that people are saying to try breaks my json function. Help please!
If someone has any ideas I would be eternally grateful!
Thanks
Sam
Cookie is not a best practice to save these data, as cookies will be send with all requests.
Use need to use HTML5 localStorage to save data at client side.
http://www.w3schools.com/html/html5_webstorage.asp
Made demo for the same
document.getElementById("textInput").value = localStorage.getItem("pageState");
window.addEventListener("unload", function() {
localStorage.setItem("pageState", document.getElementById("textInput").value);
});
<input id="textInput" type="text" />
Demo : http://jsfiddle.net/kishoresahas/vvkdge2q/
as #KishoreSahas already suggested in the comments, I would suggest you to use localStorage instead of cookies.
You could store what you need like this
localStorage.setItem("veryimportantdata", "INeedThisLater");
and get it back later like this
var data = localStorage.getItem("veryimportantdata");
console.log(data); // prints out "INeedThisLater"
<script>
$(function(){
$("a[rel='tab']").click(function(e){
e.preventDefault();
pageurl = $(this).attr('href');
$.ajax({url:pageurl+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
</script>
I pulled this code off a demo and am modifying it to fit my particular project; however, am attempting to run it as it is to test out features. The demo worked perfectly. The only major difference is they are using jquery 1.4.4 and I am using jquery 1.9.1. I cannot seem to get the back button to work correctly. The url changes when hitting back; however, the #right_column doesn't update at all. I copied this code directly off a demo and adjusted the div id to match mine, and it still doesn't work. The below line of code is the questionable code.
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
Also, can I use location.pathname.replace('index.php', 'view.php') ? Not sure if this is the correct way of writing that particular code to replace index.php?variables... with view.php?variables... to load that page into the right column. See my other post if this part of the question confuses you... javascript/jquery: Need to substring in jquery (modified code)
For those that this may help, this ended up fixing my code and it now responds to back button.
$(window).on('popstate', function() {
$.ajax({url:$(location).attr('href').replace('index.php', 'rightcolumn.php') +'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});