I was wondering is it a simple bug in the framework or maybe I'm doing something wrong but I have an applacation were a user clicks a link and a ajax call is made on load of the dialog box but I notice more then one dialog box pops up? The link gets clicks and you see 1-10 boxes stacked ontop of each other! I do not know what is going on. The links come from a php loop that generates anywhere from 1-1000 links that all have the function on mousedown triggering a function that calls for the jquery ui dialog to take the value of the id and make a ajax call with that to return content for that dialog box.
/// php
while($row = mysql_fetch_array($sql3)){
$clutchs[] = "
<li id=\"".$row['id']."\" class=\"ui-widget-content\" >
<a id=\"".$row['id']."\"
href=\"#\" onclick=\"return false\" onmousedown=\"popup('c:".$row['id']."')\"
title=\"".$row['fs']."\"
class=\"cer\">".$row['size']." car worth</a>
</li>
";
}
// jquery
function popup(a){
$.fx.speeds._default=500;
$(".popup").dialog({
autoOpen:!0,
show:"blind",
hide:"explode",
stack:!1
});
$(".popup").html(
'<center><img src="source/images/loaders/loaders(1).gif"></center>'
);
$.post("....",".....="+a,function(a){
$(".popup").html(a)
})
}
you might have more than one element with the class popup
Related
File Manager - Home Normal
I am using most of my content based on AJAX callbacks. Clicking a link button on my page pops-up a modal (the btn has some class and jquery event is triggered to load that modal-pop-up and shows content). The Tour Guide used in my Application is Intro.js which I downloaded from http://www.introjs.com based on some recommendations from community.
IntroJs is working fine as long as the normal routine is carried out.
Here is my code for that (only related lines are included):
elementsArrays = getIntroElements(); // Get All the elements that can be in tour list
availableElements = getAvailableElements(elementsArrays) // Input the Array of Elements and Return Available Elements in page
TotalCount = availableElements.ids.length + availableElements.classes.length + 2; // Set the Object for ease-of-access
setUpIntroElements(); // SetsUp the route path for tourguide to move through
introJs().start(); // Starts the Tour Guide
But when I click a link button (when the tour guide is in progress, that button is accessible at that moment (e.g the target highlighted element is main container and update button is a part of highlighted area. so it is clickable.)), the corresponding modal window pops up but the tour is not done yet. I press left/right arrow keys and the next data-step of introjs appears over my modal popup window. (Modal popup window)
Here is my code for trying to shut the tour down
// Close the wizard on any button click or disabled clicking any button there in the page
$("body").on("click", ".filemgt-file-index a", function(e){
if( $(".introjs-showElement")[0] ) // case: the tour is in process
{
//e.stopPropagation(); // not working
e.stopImmediatePropagation() // not working
//var esc = $.event("keydown", {keyCode:27});
//$("body").trigger(esc); // didnt work at all
// Trigger the below event
// a.introjs-button.introjs-skipbutton
introJs().exit(); // Exit the Tour and Work on new set // doesn't work very well
// need to apply "press Esc event" programmatically in jquery
// Triggering event equavalent to pressing Esc button
// disable all events associated with it
introJs().exitIntro()
}
});
When I close/cancel my modal window, still the tour is not terminated and pressing left/right arrow key shows the corresponding data-step element intro. (File Manager - Home (after Closing Modal popup))
What I want to achieve is, if any of the links within tour guide is clicked, the tour should end and the new modal should popup with all focus on it.
The attached images illustrate what the situation is and what exactly I want to have. take a look and them, and let me know if I am missing something in the problem statement.
Thank you very much in Advance.
Stay Blessed.
This is not a standard solution but it helped me fix my problem on the go.
while looking at the source code appeared in my browser window (inspect Element (F12 Function-key), I found a class "introjs-skipbutton" against skip button of tool-tip pop.
I found that clicking on this button exits the tour so I put the below code in my JQUERY file:
// Close the wizard on any button click or disabled clicking any button there in the page
$("body").on("click", ".main_container_div_of_view a", function(e){
if( $(".introjs-showElement")[0] ) // case: the tour is in process
{
$('.introjs-skipbutton').click(); // Terminate Introduction
}
});
This does the trick and exits the tour. But still its not a standard practice in my opinion.
I have form with few input box, for example:
FORM START
News -> input
News picture -> input (id="newspics", name="news_picture")
Add -> submit button
"Hyperlink Set picture" -> opening Fancy box window with gallery (table, 5*5, 25 pictures), images must be hyperlinked with unique id
FORM END
I need communication between Fancy box onclose() and my input (news_picture), when user click to picture I need: closing fancy box, putting id number to my input (news picture). Please if anybody help me.
Update:
I solved problem.
I make little php script, fwrite function write id number when user click to addpicture.php?id=$id in fancy box
After this, I get them, code:
'onClosed' : function() {
jQuery.get('aa.txt',function(data){
alert(data);
});
}
If you want to pass php variables into a fancybox callback you can do
$(".fancybox").fancybox({
"onClosed" : function(){
$("#input_selector").val(<?php echo $phpVariable; ?>);
// or add an ID attribute
// $("#input_selector").attr("id", ""+<?php echo $phpVariable; ?>+"");
}
});
... the example above is to get you an idea how to do it, its not a recipe ;)
Bear in mind that onClosed is a callback for fancybox v1.3.4 ... if yours is v2.x use afterClose instead.
I have jQuery site here. I have 4 links with in ul tag. Within this link, I need to inactive a link but have to show. See below:
<div class="over hide" id="waterSecondOver">
Overview
Local Area
Floor Plans
<a href="javascript:void(0);" id="chancingallery" >Gallery</a>
</div>
I have a click function on the above links (except the 4th one i.e gallery). See the code
JQR('#waterSecondOver a').click(function() {
// my code
});
Here I need to show the gallery link, but nothing happens when click on the gallery (i.e must be inactive link or what I say it's functionality is only show the link as "gallery ")
I think it's clear . Please help me
JQR('#waterSecondOver a').click(function(event) {
event.preventDefault();
});
Don't set hrefs in the anchor tags to javascript:void(0); - this is messy because it's needless repetition. With jQuery, it's possible to use return false; in your event callback to avoid the default click event taking you to a new page or the current one. While this is the easiest method, it's not always the best. See this article for more info:
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
But you definitely don't want to be setting href manually.
I would simply change the class of the anchor(lets say class="active") and everytime onclick check for that "active" class. If the class is "active" do nothing else DO SOMETHING.
You can do this way for simplicity...
JQR('#waterSecondOver a').click(function(event) {
if(JQR(this).attr('id') == "chancingallery"){
// inactive all links except the one you dont want
}else{
// whatever you need....
}
});
So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.
May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});
There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});
I am editing to try to put my primary question at the beginning of this post:
1) I am sitting at my customers/preferences page updating info in the form
2) I want to add a widget to my list of available widgets, so I need to open the widgets/addWidget page/form to add a new widget (note I am still working in my current customers/preferences page/form, so I need to continue with this page after adding a new widget in the widgets/addWidget page/form.
3) I select a link to go to widgets/addWidget, and I have jQuery dialog open this link in a dialog with the addWidget form and submit button
4) after adding a newWidget in the dialog popup form, I want to submit the newWidget (the code for addWidget is in the widgets/addWidget controller/action, not in the customers/preferences action)
Problem: the addWidget form action goes to widgets/addWidget, so when I submit the addWidget form in the dialog, it takes me away from my current customers/preferences page
Question 1) what is the proper/best way given this scenario to popup a form in another controller/action to submit that form, but then resume my current controller/action?
Question 2) should I move all of my form and code from the widgets/addWidget controller action into my existing customers/preferences action? (that seems to be the wrong approach)
I have researched jQuery documentation, Zend documentation, and searched other threads with trusty Google and stackoverflow, but I am still struggling to figure out the right way to get this to work with Zend Framework and popup forms such as jQuery dialog.
I have a working Zend action/controller that using a Zend Form and view to display and process my form. I have also been able to use jQuery dialog to popup a window when I click the link to that controller/action.
My issue is with the proper way to get the dialog to display the form and still be able to submit and process the page. If I only load the #content tag in the dialog the form and submit button appear in the dialog box, but the submit button no longer works. If I let the dialog open the full page (not just the #content) now the form will process properly, but the form submit is set to go to my action page for processing, so the form submits and takes me away from the original page and to the real controller/action page instead.
In my customerController I have a preferencesAction where a customer can choose a widget from a list of widgets. When the customer needs to add a new widget to the list, I want to open the addWidgetAction from the WidgetsController in a popup form. I want to add the widget in the popup form, submit the form to the addWidgetAction, and come back to the customer/preferences page I was already working in (with the newly added widget available in my list to select from).
//CustomerController
public function preferencesAction(){
//this is where I click a link to /widgets/addWidget and use jQuery dialog for form
}
//Customer preferences.phtml
<script>
$(document).ready(function() {
$('#add-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
buttons: {
"Add Widget": function(){
$("#AddWidget").submit();
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<a id="add-link" href='<?php echo $this->url(array('controller' => 'widgets',
'action' => 'addwidget')); ?>'>Add a Widget...</a>
//WidgetsController
public function addWidgetAction(){
// display form to add widget
// process form, validate, add to widgets table
$baseUrl = $this->getRequest()->getBasePath();
$action = $baseUrl . '/widgets/addWidget';
$form = new Form_Widget();
$form->setName('Add Widge')
->setAction($action);
}
I need to understand how to get the dialog to load my Zend action page for form processing, but without requiring the entire layout with header, footer, etc. I also need to understand how to process the form in the dialog popup without moving away from my original page where the popup was linked from.
Thank you for your assistance!
Well, I am not sure if i understand your question but you can try this
You can load your form in UI dialog box, to disable layout do this on you can do this
public function addwidgetAction(){
$this->_helper->layout()->disableLayout();
//just diable layout and do eveything normal
}
on your preferences.phtml file load the content of url baseurl/contrller/addwidget to jquery modal dialog
UPDATE
One way is use a jqueryplugin fancybox (external src) check the forgot password link
The other way is to use ajax
UPDATE
Well now i read your question well, though don't understand so clearly, i understand that you are trying to do something that is quite ambitious. And you cannot achieve through normal load method. You need to use ajax
I have to admit that I don't like jquery ui modal dialog so i don't know much about it, and i usually use jquery fancy box where it would give me an ability to load external page. Maybe you can do this through jquery ui modal dialog box.
I guess the problem that you are facing right now is you open a dialog box, you get the form in dialog, and you submit the form, it sends the normal post request, so dialog is reloaded, that's what happens in the link i have above, just click on forgot password link
Well there's solution for that too, the solution is ajax, and i hope you are quite familiar with it. you send ajax request and get response back, and depending on your response, you can exit dialog box as well update the the parent (preferences controller page) but that is quite ..... I tried to so same with few months back, but not with zf, i don't know how much i accomplished but it sure gave me a nasty headache