I am developing blog in codeigniter using tank authentication library(downloaded from net)
As you know blog contain like/dislike button .When click on like button(a view page) ,first control is transfer to controller where it is checked whether user is logged in or not,if user is logged in then control is transferred back to main blog page and blog is liked(ie like counter is incremented)
but, if user is not logged in or is not the member of community then login/register form is displayed.
These all functionality is in-build in tank authentication library is it is working fine.
Problem:
I want that if user is not logged in or is not a member ,then whichever page is displayed(login/register/forgot password/send email again),they should be opened in pop up on click of like/dislike button.
Work done:
Used anchor popup function but no use.
Result:It display view in new window
Placed the view of login/register form on same blog page,used jquery (fade in,fade out)etc function to display pop up.
Result:pop up is displayed, but as that pop up is not coming from controller so is of no use.(as tank authentication library function are not getting envolved.)
So if possible then please help me to display view(called from controller as pop up).
If possible then do send some proper links or any demo project.
There is a function of jquery-fancy box,I guess that would work.
I know the problem will be solved by applying concept of jquery+ mvc flow, but as I am new to php as well as codeigniter so I am not able to integrate my thoughts properly.
Thank you in advance.
Use Fancybox your problem will be solved. [Download] the package first. Then include the CSS and JS in your template.1
Usage:
Login
$(function(){
$(".fancybox").fancybox({
type : 'iframe',
autoSize : false,
width : "60%",
height : "56%",
'scrolling' : 'no',
'titleShow' : false,
openEffect : 'fade',
closeEffect : 'fade'
});
});
EDIT
Changes :
added the fancybox class in the link.
Dislike
Mandatory includes in the <head> section of the index page:
<script type="text/javascript" src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="<?=base_url()?>css/fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="<?=base_url()?>js/jquery.fancybox.js"></script>
Now in the page in the <head> section include this after the above includes:
<script type="text/javascript">
$(function(){
$(".fancybox").fancybox({
type : 'iframe',
autoSize : false,
width : "60%",
height : "56%",
'scrolling' : 'no',
'titleShow' : false,
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
Related
How can I add jQuery code inside magento2 pages? For example I have a "Contact us" page. So I can edit the content inside contact us page by
Login to Admin panel
admin -> content -> Pages -> Contact us
I want to add some jQuery code.
So I write
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script>
jQuery(function($){
$(".mybox").on("click", function(){
MY CODE *******
});
});
</script>
Here the problem is: I have to call <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
Otherwise it will not work. How can I solve this?
ie. How can i add jquery code in wysiwig editor
Magento 2 Uses Require js
Try using
<script>
require([
'jquery'
], function ($) {
$(".mybox").on("click", function () {
console.log('your code starts here');
console.log('your code ends here');
});
});
</script>
When I changed the page, the javascript did not execute.
index.html
$("#login").submit(function(e){
e.preventDefault();
$.mobile.changePage('main.html', {
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true,
transition: "flow"
});
});
main.html
<script type="text/javascript">
$(document).ready(function () {
alert("Test");
});
</script>
The above javascript in main.html does not execute upon page change; can anyone explain why this is and how to fix it?
It's because change page will cause reload of pages and JQM is not getting the head section of recently loaded page in the DOM so any scripts in the <head> of the document will not be included.
Hence, you can put all of your JS into an external file and include it on each HTML page of the site that you required.
You can also place your JavaScript code inside the data-role="page" element and you JS will be included.
I am new to Magento, in the checkout page. I have a text field and onblur of the text field will open a fancy box popup.
so in the checkout.phtml I placed a div to show their content in the pop up and set CSS attribute display as none.
In on blur I called a JS function and load the poup, for that I write the JS function - jQuery(".zipformcont").fancybox().trigger('click');
zipformcont is class name of div.
The issue is pop up is loading with an error - "The requested content cannot be loaded.
Please try again later."
Please help me to fix this. thanks.
Instead of using .trigger(); why not call fancybox like this:
jQuery.fancybox();
Fancybox triggers depending on the selector its connected to. Not the div its going to open.
jQuery(function(){
jQuery('#zipcode').blur(function(){
jQuery.fancybox({
"content":$('#formcontainer'),
"hideOnContentClick": true,
"hideOnOverlayClick": true
});
});
});
This should do it and get rid of the onblur attribute
I tried another option and it is working fine now.
Option
1) Created a div with CSS attribute - display as none
<div style="display:none"><a id="azcodelink" href="#zipcode_form">test</a></div>
2) In the textfield, Onblur called a JS function
<input type="text" name="namefld" id="namefld" value="" onblur="openpopup()" />
3) In the JS function, I trigered the click function of "azcodelink"
function openpopup() {
$("#azcodelink").trigger('click');
}
4) The id - zipcode_form - has the pop up content
<form id="zipcode_form">
...
</form>
Thats all..
Thanks for all your support.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
});
</script>
<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script
I would like to disable my facebox links until the page has completely loaded reason being, when I click on a facebox link before the page loads completely, the page loads a different page instead of the modal! What is the best way to fix this problem?
This is facebox script
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'images/ajax-loading.gif',
close_image : 'images/fb_closelabel.png'
})
})
</script>
this is html
Click to goto somewhere
.hover1{font-size:10pt};
$(function(e){
$(".hover1").attr('href','');
});
// here you can change the path in 'http://www.viomjeet.blogspot.com'
click to google
var blocking = false;
$(window).load(function(){blocking=true;});
$('a').click(function(){return blocking});
So... the links wont be clickable till all the images have loaded which is fired on window.load(...)
modify $('a') to your facebox links
Just figured out a decent workaround. Depending on the content you're dealing with, a simple solution is to set display:none to the tag in question, then simply add the following code to your js.
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'images/ajax-loading.gif',
close_image : 'images/fb_closelabel.png'
});
$('a[rel*=facebox]').show();
})
and in your html:
Click to goto somewhere
A few months late, but hope this helps someone!
Jay,
In response to your question, here's how I manage to have the link display, but not function until all the content is loaded:
JS:
$("a.add-facebox").click(function(){
$.facebox({ ajax: $(this).attr('fb-href') });
return false
});
HTML:
Click to go somewhere
Hope this helps!
I have to load accordion panels into one of my pages using AJAX and I'm finding that JQuery is 'accordionizing' all of the panels defined in the HTML file, but none of the panels loaded via Javascript. One other little quirk: I'm doing this on a nested accordion - the accordion within an accordion. It's accordion inception, if you will.
I checked other Stack Overflow questions and the JQuery Forum and I found that most of them are about resizing panels after loading data. The closest question I found was here, but it doesn't answer my question because trying to destroy and then re-accordion-ize my JS-loaded panels does not work.
This is the relevant section of my html head section:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".accordion").accordion({
collapsible: true,
icons: false,
autoHeight: false,
active: false
});
});
</script>
This is the relevant section of my html body section:
<div class="accordion">
<h3 id="acc1">First panel title</h3>
<div>First panel content</div>
<h3 id="acc2">Second panel title</h3>
<div class="accordion" id="ajaxresults-aliaslist">This is where the nested accordion goes</div>
<h3 id="acc3">Third panel title</h3>
<div>Thirdpanel content</div>
</div>
<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/");
</script>
When javascript loads "/loadaliaslist/", it received a message with the following content:
<h3>1st panel within a panel title</h3>
<div>1st panel within a panel content</div>
<h3>2nd panel within a panel title</h3>
<div>2nd panel within a panel content</div>
<h3>3rd panel within a panel title</h3>
<div>3rd panel within a panel content</div>
I know that the content above is being passed to the div because the content appears un-accordionized when I load the page. Instead of an accordion within an accordion, I just get a bunch of boring content sitting at the first level of the dream sequence. I've got to go down a level... Wait, where was I?
Right, one more thing: I have tried two things that did not work:
- I tried putting both the load and the accordion scripts at the bottom of the page (load first), hoping that the order would matter. (noobish? not sure...)
- I tried adding a script at the end to destroy and recreate the panels like so:
$("#ajaxresults-aliaslist").accordion('destroy').accordion();
That's all. I really hope someone out there is the Leonardo DiCaprio of accordions, and can help rescue me from my predicament. Much appreciated!
Untested but try something like this...
The issue is most likely due to the fact that the event handlers aren't being attached to the inserted content (via Ajax).
$(function() {
var config = {
collapsible: true,
icons: false,
autoHeight: false,
active: false
}
$(".accordion").live('load', function(){
$(this).accordion(config);
}).accordion(config);
});
EDIT: Changed the code a bit (still untested).
EDIT FROM OP: SOLUTION FOUND
After playing around more, I found a way to solve this problem as long as AJAX is loading the new data immediately on pageload. Solution was to call the accordion function, only once, immediately after the load. As in the solution below:
<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/",
function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an <strong>error</strong>: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
/* All panels are accordionized immediately after loading the content */
$(".accordion").accordion({
collapsible: true,
icons: false,
autoHeight: false,
active: false
});
});
</script>
A word of caution: This will only work if all of the accordion content is loaded immediately. If there are pieces of content loaded after the first accor
I suppose that you want to reset the accordion control. Try to do this:
$('#accordion')[0].innerHTML = "";
After that fill the control with your HTML using the append.