I am going to display the Flexigrid in html div tag when click a button.The function for Flexigrid would be in the Javascript function. so i add a image tag with onclick to call a function which is called f_reload() which is going to load the flexigrid function. First time its loaded. by second time click it doest load the grid again.
<script type="text/javascript">
function loadFlexiGrid(){
//here flexigrid content
$("#flex1").flexigrid{{
//...........}}
}
function eventhandler() {
$("#flex").html(function() { //this function used to reload grid but it is not called when click second time on the button
return "<div id='flex1'></div>";});
javascript:loadGrid();
}
</script>
<input type="image" class="btn" id="sub" src="<?=base_url();?>images/rbtnsave.gif"
onclick="eventhandler();"/>
<div id="flex"><div id="flex1"></div></div>
</div>
here flex1 id of the flecigrid and flex is the id of the div.
when click first time on the button it shows the grid. but second time it doesn't why
When the eventHandler is executed, the nested function in $('#flex').html() is declared, but not executed. Is there a particular reason why you put it there?
Otherwise, try replacing it with:
function eventhandler()
{
$("#flex").html("<div id='flex1'></div>");
javascript:loadGrid();
}
The first time it works fine, since you've put <div id="flex1"></div> manually in your HTML.
Besides, are you sure javascript:loadGrid() is correct? Try removing the javascript: part. And - if referring to function loadFlexiGrid(), call it loadFlexiGrid();, not loadGrid();.
use click() function ..
$("#flex").click(function()
Related
I tried to make a function which would accept a number when called, and hide any loop generated elements on page with the ID of #sub + the number provided.
<script>
function toggleryhma($id) {
$("#sub"+$id).toggle();
$("#ryhmanum"+$id).toggle();
}
</script>
The element I'd need to click to call the function is...
<span class=ryhmaspan onclick="$(toggleryhma('<?php echo $ryhmanum;?>');">
For some reason this doesn't seem to do anything. I basically have lots of images with the ID's "#sub1", "#sub2", "#sub3", etc...
Same with the #ryhmanum. I want to use those ID's to only toggle the items under the span I'm clicking.
The problem is in your onclick. Your onclick should be like below.
onclick="toggleryhma('<?php echo $ryhmanum;?>')"
I have a PHP script labeled first_page.php. On that page, I currently have a div that looks like this:
<div id="status">
<h3>To view a list of all rooms statuses, select the link below.</h3>
Show Status
</div>
And links to the correct page, response_data.php. What i'd really like to have instead, is a button that is on the first_page.php, and when that button is clicked, have it load the response_data.php page with .fadeIn().
I've tried to get this jQuery script working, with no luck. Here is what I have tried. I've changed my html to look like this:
<button id="button">Click here to show data</button>
<div id="data" style="display: none;">
<?php include 'response_data.php' ?>
</div>
$('#button').click(function() {
$('#data').fadeIn(1000);
});
Above, I have added a button and a div that I wanted to fadeIn. The div holds the php script, so I wanted the div to fade the php script in. I set the data CSS to display none. When I click the button, nothing happens. It actually works, but the div data fade's in without having had the button clicked. Then the button remains. I'd like it to not auto click, and also somehow hide the button after the first click.
The jQuery part is just fine. I highly suggest to check that your div#data actually has some text in it.
To do so, you can try something like:
console.log($('#data').text().length > 0 ? 'Text found' : 'Could not find text');
Also, to hide the button after it was clicked simply use the hide() method:
$('#button').on('click', function() {
$('#data').fadeIn(1000);
$(this).hide();
});
Note: You can also use the fadeOut() method or the remove() method if you wish to remove the button from the DOM.
I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
I have modal on place...and the button in which I need it to do two things in one time,...
when the button save clicked, there is php function called and executed, but while I do that I need to show the modal, even if the background php function is executed, how do I do that?
<button class="btn ID="Save">Save</button>
this is the php controller to php function..
if(isset($_POST['ac'])){
if($_POST['ac']=='cancel'){
$class->no($id);
}
if($_POST['act']=='save'){
$class->yes($id);
}
}
as you see from the above code, I call yes function to do the php-side work, But in the function at the end I have redirect php method to redirect to other page,
and I have the following Jquery code...
$('#save').click(function(){
$('#modSave').modal();
})
In general, the problem is when I click the button it comes the Modal, But because of the redirect method in the php, when it goes to other page the modal is disappear.
one thing, the php redirect to the same page from some parameter passed pages to its default page.
how do I prevent from disappearing the Modal while or if the page even redirects??
I have a signup form that has an input box hidden from view unless a link is clicked. Here's the code:
<a id="showCoupon" href="javascript:void(0);" onclick="toggleCoupon();">
<?php _e('Have a coupon?','mysite'); ?>
</a>
If the coupon GET variable is set, I want the input box to be visible and prefilled with the supplied data. I added PHP to check for the presence of a GET variable like this:
if(isset($_GET['coupon'])) {
$coupon = $_GET['coupon'];
}
?>
In addition, the input box has been modified to use the value of $coupon, if set. Now, I can't figure out how to trigger the JS event toggleCoupon();.
I modifying the PHP function to click the link like this:
if ( isset($_GET['coupon']) ) {
$coupon = $_GET['coupon'];
echo "<script>$('#showCoupon').trigger('click');</script>";
}
?>
So far, it doesn't work. What am I doing wrong?
have you tried:
<script>
$(document).ready(function(){
$('#showCoupon').trigger('click');
});
</script>
When the document loads, jQuery will trigger the click even of the element with the id of showCoupon
Don't use a kludge like that. That's awful.
Instead, on the server side, don't output the piece of code (CSS class, "display: none;", whatnot) that hides the element in the first place, if the URL parameter is provided.
If the element is hidden by JavaScript, pass it a value indicating that the initial state should be visible.