I update partial of html page by call ajax function
Every 5 Minutes, there are some element object in partial that by hover on open a popup windows.
my code run the first one works fine, but after a update Does not work properly and per-hover opens two popup window.(hover function call twice)
index.php
<script type="text/javascript">
function refresh2() { <? php
echo CHtml::ajax(array(
'url' = > CController::createUrl("browsingpap/UpdateAjax"),
'update' = > '#type', )) ?>
}
window.setInterval("refresh2()", 300000);
</script>
<div id="type">
<!-- update here after call ajax function--->
</div>
updateAjax
<script type="text/javascript">
$(document).ready(function() {
$("#goli").hover(function() {
$('#popup5').bPopup();
});
});
</script>
<div id="popup5" style="display: none;"> <span class="button b-close"><span>X</span></span>
<div class="content">popup window</div>
<div id="goli">hover me for show a popup</div>
</div>
Try to do this and see if it help:
$("#goli").unbind('hover').bind('hover',function() {
$('#popup5').bPopup();
});
Anyway it will help us to see what is goig wrton if you will post the rest of your relevant code.
Related
I am not so into PHP and JavaScript and I have the following problem trying to pass a value from a main page to a popup page (defined into this main page).
I try to explain my situation in details:
I have an account.php page containing this link:
<a href="#" onclick="doRemoveBooking();">
<i class="fa fa-times"></i>
</a>
Clicking on this link it is performed the doRemoveBooking() JavaScript function that is defined in the same page into this block:
<script type="text/javascript">
//metodo richiamato al click del bottone "RIVENDI"
function doRemoveBooking(id){
console.info("Into doRemoveBooking");
$('.popUpRemoveBooking').magnificPopup({
items: {
src: '#remove-booking-popup'
}
// (optionally) other options
}).magnificPopup('open');
}
</script>
that opens a popup defined at the end of the dame account.php page by this div element:
<div class="popUpRemoveBooking">
<div id="remove-booking-popup" class=" white-popup-block mfp-hide">
<div class="fluid-container">
<div class="row">
<h2><?php echo $texts['CANCEL_BOOKING'] ?></h2>
<p>Sei veramente sicuro di voler cancellare la prenotazione?</p>
<?php echo $id_booking; ?>
</div>
</div>
</div>
</div>
This popup is correctly opened but I obtain an error message when it try to render this line:
<?php echo $id_booking; ?>
I know that it is wrong. As you can see my JavaScript function take an id as parameter:
doRemoveBooking(id)
How can I print this id received as input parameter from the JavaScript function used to open the popup in the popup body? (instead the wrong ). What is a smart and neat way to do it?
Replace <?php echo $id_booking; ?> with <span id="bookingID"></span>
Then replace the content of that <span> in your function:
function doRemoveBooking(id){
console.info("Into doRemoveBooking");
$('#bookingID').html(id); // <---------------- Add this line
$('.popUpRemoveBooking').magnificPopup({
items: {
src: '#remove-booking-popup'
}
// (optionally) other options
}).magnificPopup('open');
}
Don't forget to call doRemoveBooking(id) with the correct booking-id !
var val = '124';
function imagepop(nval) {
val = nval;
}
$(document)
.ready(function () {
$('.ui.selection.dropdown').dropdown();
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('#'+val).popup({
popup: $('.fluid.popup'),
on: 'click'
});
});
Im trying to popup dynamic content coming from database HTML code as below
<div class="extra">
<div id="<?php echo$row['idproperty']; ?>" class="ui more primary button" onclick="imagepop(<?php echo$row['idproperty']; ?>)">
More
</div>
<div class="ui fluid popup top left transition hidden" >
<p><b>Description</b><?php echo$row['description']; ?></p>
<div class="ui three column center aligned grid">
<div class="column"> </div>
</div>
</div>
idproperty is some numbers getting from database i need to show each data in popups please help me to fix this
the function at $(document).ready is called before the function imagepop(nval) which assignes the value of idprperty to val.
The function at $(document).ready is called only once, when the document is done loading, that means that this part of the code:
$('#'+val).popup({
popup: $('.fluid.popup'),
on: 'click'
});
Will not be called when val gets the new value, the one originated from idproperty.
Move that part of the code to the end of your imagepop(navl) function, that should probably fix your issue.
If you still want to have this part of the code run immidiatly as the page loads, you will need to have the true value of idproperty ready to be right then. One way to do this is to include a hideen input field in your HTML and have the PHP feed it the value as a default, and then read this value from your js in the $(document).ready function:
in your html:
<input type="hidden" id="idproperty" name="idproperty" value="<?php echo $row['idproperty']; ?>">
in your $(document).ready function:
val = $(idproperty).val();
$('#'+val).popup({ //... rest of your code here
I tried to display the page2.html when click the Show Image in page1.html. I use ViewController.openExternalView to display page2.html because dijit.registry.byId("myPage1").performTransition('myPage2', 1, "slide", null); is not working.
When the page2 displays, I change the visibility of the image in page2 to visible. But the document.getElementById('myImgId') return null.
It seems script execute before page2.html is loaded. Is there anyway to execute script to able to get elements safely?
dojo version: 1.9.3
Following is the snippet that I'm trying.
javascript
function showImage(){
var vc = dojox.mobile.ViewController.getInstance();
vc.openExternalView({
url:"page2.html",
transition:"slide"
},dijit.registry.byId("container").containerNode);
document.getElementById("myImgId").style.vilibility="visible";
}
page1.html
<div data-dojo-type="dojox.mobile.View" id="myPage1">
----some html tags----
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="variableHeight:true" >
<div onclick="showImage();"><label>Show Image</label></div>
<div>
----some more html tags----
</div>
</li>
</div>
page2.html
<div data-dojo-type="dojox.mobile.View" id="myPage2">
<div data-dojo-type="dojox.mobile.Container">
<img src="img1.png" id="myImgId" style="vilibility:hidden;"/>
</div>
</div>
Try this:
function showImage(){
var vc = dojox.mobile.ViewController.getInstance();
Deferred.when(vc.openExternalView({
url:"page2.html",
transition:"slide"
},dijit.registry.byId("container").containerNode), function(){
document.getElementById("myImgId").style.vilibility="visible";
});
}
I'm using wordpress and in my loop I have a link that is clickable to toggle a div to show and hide the content, since this is within the loop it uses the same class for each item in the loop so when I toggle one link it shows the content for all.
<div class="additional-info">Additinal Information</div>
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(".additional-info-box").toggle();
});
})
</script>
So the additional-info class and the additional-info-box gets generated for each post, but when I click on any of the additional-info divs every additional info box gets shown.
Try wrapped :
<div class="additional-info">
Additinal Information
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(this).find(".additional-info-box").toggle();
});
})
</script>
with that only the .additional-info clicked will show their content.
Live Demo
I have a little problem while calling the JS function which is defined in iframe source from the light box. Here is my code what i tried so far,
index.php
<iframe id="commentframe" src="index.php?option=com_excelvision&view=livevideo&layout=commentiframe&tmpl=component2&ev_id=<?php echo $result[0]->id;?>" width="950px" height="450px"></iframe>
commnentframe.php
<script>
function comments(ev_id,text,name,email)
{
var comment=text;
jQuery.ajax({
type: "POST",
url:'index.php?option=com_excelvision&controller=excelvision&task=subcomment',
data: {body:comment,eventid:ev_id,name:name,email:email},
success: function(data) {
//console.log(data)
}
});
}
</script>
<?php
JHTML::_('behavior.modal');
?>
<div class="jointhe">
<img src="<?php echo JURI::root();?>templates/excel/images/conv_icon.png">
<a href="<?php echo JURI::root().'index.php?option=com_excelvision&view=comment&tmpl=component1&ev_id='.$_REQUEST['ev_id'];?>" class="modal" >Join The Conversation</a>
</div>
<br/>
<div id="prev_comment">
<div id="com_det1">
<div id="com_det">
Commnets is loading.......
</div>
</div>
</div>
comment.php
<a onclick="window.parent.comments('<?php echo $_REQUEST['ev_id']?>',$('.commnenttext').val(),$('#name').val(),$('#email').val());window.parent.SqueezeBox.close();" class="button_org">Submit Commnet</a>
In the above code I call the view layout commentframe from iframe in index.php and in iframe there is a link for comment when clicks on the link light box will open inside the iframe and it's have a link for post the comment when click on it , It should call the commnents function which I defined in the commnetframe.php. I tried to do it window.parent.myfunctionname() but it's not working. if someone have any solution please help.