I've got a dynamic table filled by a recordset from MYSQL.
Each row has it's own delete button (image) to delete the specific row.
This button has a class="button".
I'm using a JQuery popup modal to get a popup when a delete button is clicked.
In this JQuery script i'm creating a variable which contains the numeric value of the first td cel of the row that has been clicked on.
This all works perfectly.
What i'm trying to accomplish is to use this variable on the same php page.
Here is where my knowledge runs out.
I've read some examples where Ajax is the solution for this, but i lack the knowledge to use these examples for this solution.
JQuery code:
<script src="../javascript/jquery-1.8.2.js"></script>
<script src="../javascript/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function(e) { // Button which will activate our modal
var value=$(this).closest('tr').children('td:first').text();
alert(value); // this works
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 500, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>
I've been trying too much that i don't see the logic anymore.
I hope that someone can help me with this.
The issue is that your JavaScript runs in the client -- the user's web browser -- while your PHP runs on your server. It's a two-stage process: first, all the PHP is executed on the server and the HTML is rendered, which is then sent to the client (the browser). Then, the client executes all the JavaScript on the page.
You need some way to communicate the JS variable (value) to your server if you want to be able to use it in your PHP code. AJAX is one such way, but it would be helpful to have more information on how exactly you want to use this information in your PHP.
Edit: based on your comments above, something like this should work. You'll have to give your Yes button an id attribute (here I'm assuming the id is yesButton).
$(.button).click(function() {
var value=$(this).closest('tr').children('td:first').text();
$("#yesButton").attr("href", "delete_verlof.php?id=" + value);
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 500, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
The important thing to note is that the JS variable does not exist yet at the time at which your PHP executes, so it is not available to the PHP. What I've done here instead is to dynamically change the href of the Yes button whenever the user clicks a td, which should have the desired effect.
If your using this in a form, then you could create a hidden input field with a unique id and add it with.
$('#idOfField').val(value);
And then use php to get the element from wherever you put it in your code.
Other then you might find attr usefull. For an example
$('#idOfField').attr('data-id', value);
Where the ID can be an div, span, i, a, bold, strong etc etc etc.
Related
I am caught with a problem that a modal popup link that is inside a sliding side bar is not working correctly to open a modal pop up box. The sliding sidebar will only open when a user click on it, and in it there will be contents that contain the modal links.
I have added
Jhtml::_('behavior.modal');
At the beginning of the codes but still doesn't work. My link code is as follows
<a class="modal" rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="index.php">Click me</a>
Based on this link, it should open the content in a modal popup box in normal case (on the main page and not in the sliding sidebar). However when it is in the sliding sidebar it doesn't work.
The main reason I think of could be because the sliding sidebar is dynamically created after the site has been loaded, so the link will not behave as a modal link but just an ordinary href link.
I have seen a reply online here suggesting to execute this
SqueezeBox.assign($$('a.modal'), {
parse: 'rel'
});
every time you add a new element. But I do not know what it means and how to execute it.
Does anyone here have a solution to make the sliding sidebar modal link work?
Finally, i found the answer myself. For anyone who may encounter this problem with ajax or dynamic content just add the following to your loading page javascript
$('body').on('click', 'a.osmodal', function(event) {
event.preventDefault();
SqueezeBox.open($(this).attr('href'), {
handler: 'iframe',
size: {x: 900, y: 500}
});
});
This is just a simple contribution, hope someone will find it helpful.
Wanted to answer your question regarding the proper means to assign Joomla's core modal behavior to dynamically generated content, because you were so close. At work we generate a lot of content using AJAX/lazy loading.
There are two parameters for assign method. The first indicates which DOM elements to apply, and below I include examples for both assigning by class or id. The second is JSON object options, which 9 times out of 10 will already be attached to the rel attribute of your anchor element.
A final caveat being this method must be run after dynamically generated HTML is inserted into the DOM.
Using Class
SqueezeBox.assign(
$$('a.modal.unique-class-identifier'),
$('a.modal.unique-class-identifier').attr('rel')
});
Using ID
SqueezeBox.assign(
'a.modal#unique-id-identifier',
$('a.modal.unique-class-identifier').attr('rel')
});
Hope that helps.
Had the same issue, I dynamically added some links in a Joomla page after the page was already loaded. The following snipped added the event handler for the modal dialog on the newly added elements (make sure it's called after the elements were added):
<script>
SqueezeBox.assign(jQuery('a.modal'), {
parse: 'rel'
});
</script>
Also make sure, you have the modal functionality loaded in (e.g.) your template:
JHTML::_('behavior.modal');
I have a page with dynamic content from PHP and I want to use jQuery's load function to periodically refresh the div container which contains the dynamic content so that new content is displayed on top of the old content.
I using a jQuery function as follows:
setInterval(function() {
$("#ContentWrapper").load("Livefeed.php #ContentWrapper");
}, 10000);
to refresh the content container's wrapper every 10 seconds
My problem is that after the load function is executed. Click events and hover events do no properly work on the page. Initially they did not fire at all so I used Jquery live function on all click and hover events within the content wrapper and it solved the problem.
However, when the page reloads the hovers reload as well and all hidden divs with are made visible by jQuery's .show method hide. Is there any way to prevent the hover from reloading and also for the visible hidden divs to remain visible every time the .load function is called.
I'm using click and hover functions like so:
$('selector').live("click",function(){
});
and
$('selector').live("hover",function(){
});
Any help is appreciated.
Using jQuery.live is deprecated now. So don't use it. Use jQuery.on from now on. Also, .hover event is being taken down. You should use separate mouseenter and mouseleave events.
You can fix this issue by replacing .live with:
/*
If click happens inside contentwrapper, check if click target was yourSelector, if true execute this function
*/
$("#ContentWrapper").on("click", "#yourSelector", function(){
//do whatever u wanna do on click
});
To keep track of all divs that were hidden and all those weren't you need to set unique id for each div. And before you reload with .load() you loop through all divs and save their current state (hidden or visible) in an Object Array in [{ id : state },..] format. Once ajax request finishes, loop through Object array via $.map and set states for each div
You can use JQuery delegate,its primary intention is dynamically driven content:
http://api.jquery.com/delegate/
$("#Parent").delegate("selector","click", function() { });
I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.
$('button').click(function(){
alert("click event");
});
I included this in the
jQuery(document).ready(function() {
But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!
Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:
$('body').on('click','button', function(){
alert("click event");
});
should work.
If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery.com/on/
And in your example this might work for you
$("body").on("button","click", function(event){
alert("Hello world");
});
Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...
$('*your_form*').on('click', 'button', function(){
alert("click event");
});
You may simply need to use this instead:
$(document).on('click','button',function(){
alert("click event");
});
(jQuery 1.7 or higher)
you have to call using button id
$('#buttonid').click(function(){
alert("click event");
});
or button class
$('.buttonclassname').click(function(){
alert("click event");
});
I'm creating a system using jquery and php that pops up a small div when they get a private message on my website. The alert itself I have figured out, but I'm not sure how to gracefully cancel it.
I've made it so that clicking a link "[x]" hides the div, but how can I make the link send enough information to a php script to mark this alert as "read" in the database?
All the php script would need is the id of the alert in the database, but I've got no idea how to make it do that. There is also more than one notice displayed at a time, so I would need a way to have each link send the information necessary to the php script.
Here's the jquery that loads the div and the php that powers it.
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#mc').load('/lib/message_center.php').show("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.delete').live('click', function(){
$('#mc').hide('slow');
});
});
</script>
The easiest solution would be to set the message you are displaying to read at the moment you display it. That would not require any additional communication between the browser and the server, just do it at the end of your /lib/message_center.php script for the messages you are displaying at that moment.
Set the href attribute for your X produced by php like href="javascript:killbox(5);" and give your div a unique id (i.e.id="boxtokill5"). Then you could use something like this:
function killbox(id){
$("#boxtokill"+id).hide();
var packet = {};
packet.clickedlinkid = id;
$.get("destination.php",packet,function(data){
// data = Response (output) from script
});
}
The destination.php receives the ID by $_GET['clickedlink'].
So I have I this javascript that loads into a div the contents of my php (which gets data from a mysql database). When a different button is clicked, it calls the eat.php file again, with the new data to retrieve from MySQL and again loads the new data into the div.
<script type="text/javascript">
$(function() {
$("a[name=eat]").click(function() {
$("div.nav a[name=eat]").css({"background-color":"#666966","color":"#fff"});
$(".user-main").load("eat.php");
});
$("a[name=analyze]").click(function() {
$(".user-main").load("eat.php",{ name: "John", time: "2pm" });
});
});
</script>
And that is ok and everything. My question is how can I make this "slide" into the new div, like it's being scrolled horizontally? I am having no luck with the animate feature in jQuery, and would prefer not to use any frameworks. Also, is the correct way to check for a jQuery post by doing:
if (isset($_POST['name']))
in my eat.php file?
I am not quite sure what you are asking.
If you want to ensure the data you have just added is scrolled into view, then you can use code like this
if (document.all) {
document.body.scrollIntoView(false);
} else {
document.body.insertAdjacentHTML('beforeEnd','<a name="' + a + '"><\/a>');
window.location.hash = '#'+a;
}
The trick with insertAdjacentHTML is inserting a label into the screen and then telling the browser to jump to it. The label is the contents of a javascript variable which must be different each time the code is run.
If you wish to slide a whole division into view, then you will have to use a timer. Set up the div so the over-flow is hidden and it is positioned off screen, using position relative and large top or left/right values. Then, each time the timer goes off, decrease the offset towards zero.
If the timer goes off every 50ms and you move only a few pixels, you will get 20fps and it will appear quite smooth.