Search the Community
Showing results for tags 'jquery'.
-
Hi guys ! First real project with ProcessWire, and I can say I adopted the platform. It's incredibly fun to work with ! I'm currently making a Google Maps interface, in which I can add branch offices in the backend as pages. Each pages have data : title, latitude longitude etc. and compare it with the user geoloc or a geocoded address. At first, I fetch the childrens ID, latitude and longitude, json_encode them in an array. Then, I find the 3 nearest offices and play with data until I need to get the rest of the data matching the IDs, so I can show detailed profiles of the 3 nearest offices. I'm currently debugging with static data, and I get a 500 internal server error on MAMP... but I don't know, it seems my setup is not showing PHP errors properly. Here is my Javascript function (executed on dom ready elsewhere) : File main.js : function fetchOfficeData() { $.ajax({ url: 'http://127.0.0.1:8888/site/ajax/fetchoffice.php', type: "POST", dataType:'json', data: ({id: 1013}), success: function(data){ console.log(data); } }); } File fetchoffice.php : //Format to fetch the office with the ID $sel_id = 'id=' . (string)$_POST[id]; $result = $page->child($sel_id)->title; echo json_encode($result); But I get an error and I suspect it's because I cannot use selectors in my AJAX page because it's not in my template. I'm able to output $sel_id, or anything else for that matter, but using $page->child... doesn't work. Is it possible to put this code inside my template so the selectors work ? Another solution could be to fetch all the data of all the offices and put them in the json_encode array at the beginning... there will be 30 offices max... but I don't feel like it's the right thing to do. Thank you very much in advance
-
I am in the process of converting over a one page website to work with PW and am at the stage of hooking up the contact form but it's not working. I'm using the phpMailer script with a bit of jquery to process the form validation. I'm not set on converting over my current form to work with PW as the phpMailer script is a bit out of date now. All I need is something that works, outputs validation without a page refresh and ideally has some anti-spam measures built in. I know Ryan built the Form Template Processor so wasn't sure if this is a better route to go down? Here's the jquery for my current form. $(function() { // These first three lines of code compensate for Javascript being turned on and off. // It simply changes the submit input field from a type of "submit" to a type of "button". var paraTag = $('input#submit').parent('p'); $(paraTag).children('input').remove(); $(paraTag).append('<input type="button" name="submit" id="submit" class="btn pull-right" value="Send" />'); $('#main input#submit').click(function() { $('#main').append('<img src="assets/img/mail-ajax-loader2.gif" class="loaderIcon" alt="Loading..." />'); var name = $('input#form_name').val(); var email = $('input#form_email').val(); var subject = $('input#form_subject').val(); var comments = $('textarea#form_message').val(); $.ajax({ type: 'post', url: 'sendEmail.php', data: 'name=' + name + '&email=' + email + '&subject=' + subject + '&comments=' + comments, success: function(results) { $('#main img.loaderIcon').fadeOut(1000); $('ul#response').html(results); } }); // end ajax }); }); Any advice is greatly appreciated.
-
Hello. i have a very weird error in jQuery. this is the message in chrome's console: GET http://localhost/clientes/promundi/site/v4_pw/site/en/contact/images/ui-bg_glass_100_f6f6f6_1x400.png 404 (Page Not Found) jquery-1.11.1.min.js:2 GET http://localhost/clientes/promundi/site/v4_pw/site/en/contact/images/ui-bg_gloss-wave_35_f6a828_500x100.png 404 (Page Not Found) jquery-1.11.1.min.js:2 GET http://localhost/clientes/promundi/site/v4_pw/site/en/contact/images/ui-bg_highlight-soft_100_eeeeee_1x100.png 404 (Page Not Found) i can see jQuery is being loaded properly, because this works, showing the expected alert box. But what on earth are those files? And "ui-bg_glass" seems to be a jQueryUI file, which i'm not using! <script type="text/javascript"> $(document).ready(function($){ alert("message"); }); </script> and i'm not calling other jquery scripts. it happens with any version i try to run (one at a time, of course) calling 2.1.1 with the CDN <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> calling 1.11.0 with the CDN <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> calling 1.11.1 locally <script src="http://localhost/clientes/promundi/site/v4_pw/site/site/templates/promundi/js/jquery-1.11.1.min.js"></script> calling 2.1.1 locally <script src="http://localhost/clientes/promundi/site/v4_pw/site/site/templates/promundi/js/jquery-2.1.1.min.js"></script> I'm not sure if this is a processwire issue, but i don't know where else to look for any ideas? -
I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage. but how do i call it one by one? for ex. ignore the code for my first item it doesnt work but how do i make my slider work? have 3 images uploded on a single image field called slider1 how do i call each of them , what is the code to be put on img src for each item
-
how do I get jquery/javascript code online and use it on pw? I'm trying to port my static html in pw by the way. I successfully used the css code since there are css files included in my template folders which I placed it there. and used the <?php echo $config->urls->templates?> to make it work. see code above. however there is a jquery code which is being called online. I know <?php echo $config->urls->templates?> wont work. So how do I call it in pw? to make the jquery codes work? it doesnt work if I left it like that by the way. or should I just download the js files place it on my scripts folder then use <?php echo $config->urls->templates?> way again?
-
Hi guys, Is there any reason why $session variables shouldn't get updated when using jQuery $.post? For some reason, no matter how trivial the example I use, data received from $.post which is successfully updating pages is failing to set $session variables. Am properly in "banging head against wall territory" now
-
Hi guys, i've been trying to fix an issue all day and can't figure it out! i have a php page that calls another php page through AJAX. The problem is that the session variables i set in the page i call through AJAX don't stick when i go back to the calling page. I believe it may be because of the way i'm calling the page url with AJAX, which could be what makes another session once it gets to the AJAX page url:"<?php echo $config->urls->templates?>logincode.php/", the session ID's are completely different on both pages and the name of the session from the calling page is 'wire'. The name of the session on the AJAX page is called 'PHPSESSID'. So the sessions are not the same, which is why the session variables set in the AJAX page aren't available in the calling page when the AJAX page is returned to the calling page. i've tried renaming the ProcessWire session name in the config file to 'PHPSESSID', although that didn't work. When i go to the page 'logincode/' as a regular post from a form it works perfectly and has the same session ID and variables, although through AJAX the sessions on both pages are completely different. Does anyone know how to do this properly and make the session the same? Please help, it's driving me mad! see the AJAX calling code below: $.ajax({ type : 'POST', xhrFields: {withCredentials: true}, data : {'username':username, 'password':password}, url:"<?php echo $config->urls->templates?>logincode.php/", success:function(result){ if(result == "1"){ alert('Please input username and password'); } }, error:function(xhr, status, error) { alert('error'); } });
-
Hey friends! Well I am finally to the part of my development where I need to begin thinking hard about implementing some form of advanced search. I am a bit of a newbie so please forgive me for asking such a general question. Up until now I have been able to see quite clearly where this project is going. I have all of the items defined that I will be using and I also have all of my main sections mostly fleshed out, what I do not have is anything other then ajax searching and the basic search.php template (with a couple extra fields defined). I have read several form posts about specific advanced search features, but I was hoping for something a bit more general and I would just code from there. What I would like some insight on is where should I start in the development of an advanced search interface, what methodologies do people implement when producing a site wide search, and finally are there any really good tools that would make my life easier in this process? Any info is extremely appreciated.
-
Hi guys, I have a jquery mobile $session problem : Some background : The system itself is a mix between CodeIgniter and PW - customer login, business logic calculations are done via CI; however some static pages are displayed via PW. CI sets $_SESSIONS on login, which are then used from processwire; furthermore PW API is used by CI to create new pages, add text images, etc. All of the above works fine on a desktop/tablet The problem : That's where jQuery mobile comes. To detect mobile devices I've used this logic inside site/config.php: if( check_user_agent('mobile') ) { $config->urls->templates = '/site-mobile/templates/'; $config->paths->templates = $rootPath . $config->urls->templates; } It all works good - I get redirected accordingly; Sadly there is a but - On the mobile version after I (user) manually refresh the page or open another page the $session goes from this array(6) { ["Session"]=> array(0) { } ["username"]=> string(19) "my_email@gmail.com" ["firstname"]=> string(5) "Boris" ["lastname"]=> string(7) "Processwire" ["usertime"]=> int(1406733793) } to nothing: array(1) { ["Session"]=> array(0) { } } The original idea was for the mobile to sit on m.mysite.com ,but for cross domain requests, session and seo issues this is not an option. What have I tried with jQuery Mobile so far : disable ajax globally / page specifically force full urls e.g. from /page to www.mysite.com/page 'a' tags data-ajax=false pass sessions from $_SESSION to PW $session->varname - it goes empty on refresh As mentioned it all works fine on the desktop version, so I'm pretty sure that has something to do with jQuery mobile. Any ideas. suggestions, notes, topics or anything on the subject is highly appreciated! Please let me know if you want me to display more code samples.
-
I need your advice! I recently launched my fathers site http://www.skulptour.eu which has a booking form on this page http://www.skulptour.eu/will-kommen/buchung/ The form is validated with the jQuery Validation Plugin and fires an ajax call for the booking-form-process.php (which sends the an notification e-mail to my dad) inside the submit handler of the plugin. Here is the code to demonstrate the structure /* * * contact-form.js * */ $(document).ready(function(){ //form var booking_form = $('#booking-form'); var booking_form_success = $("#booking-form-success"); //add workshop validation rule jQuery.validator.addMethod( "isworkshop", function(value, element) { return /^(W(O|E)|S)\s?\-?14\s?\-?\d{2}\s*?$/i.test(value); }, "Geben Sie eine Workshop-Kennnung ein. Beispiel: WO-1420 oder S-1421" ); //validate form booking_form.validate( { rules: { / .... / }, messages: { / .... / } }, highlight: function(element) { $(element).closest('.control-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.control-group').removeClass('has-error').addClass('has-success'); $(element).closest('.error').remove(); }, submitHandler: function() { console.log("submitHandler: call ajax"); $.ajax({ url:'/site/mail/booking-form-process.php', data: booking_form.serialize(), type:'POST', success:function(booking_form) { console.log("submit Handler: ajax: sucess"); $("#booking-form").hide(); $("#booking-form-success").fadeIn(500,1); }, error:function(data) { $("#error").show().fadeOut(5000); } }); // ajax } // submitHandler }); // validate (jQuery Plugin) }); //doc ready Now i'd like to add a custom google analytics event tracker, which fires only if the ajax call is successfully executed. i already tried to add the following lines right after submitHandler: function () { //google analytics event console.log("submitHandler: google analytics call event"); ga('send', 'event', 'buchung', 'click', 'workshoptyp', 1); but it won't work. unfortunately i've no experience with the google analytics events yet and i updated my Analytics Account to use the new Universal.js, which itself is implemented properly. Do you guys have any ideas, how to solve this? Pseudocode: Booking Form > Validation w/ Errors > Ajax Call (Some php) > Ajax Call Successful > Fire Google Analytics Tracker Thanks in advance! - topada -
Hi everyone, I'm working on a project where users can upload images, using a jquery uploader (no $_FILES input in the form) : - User select images - Images are uploaded in a specific folder After that, how can i attach the images to a page ? I took a look to wireupload() but it seems to need a $_FILES input. Thanks for you help
-
Hi all! First of all to say, PW is great and I am using it for all my projects now. I came to a point where I needed to implement carousel/slider to my PW site with that is getting data from a JSON file. Now I am kindly asking everybody, are there any jQuery developers/experts on this forum? I would need some small help with this carousel Thank you everybody for any help! Best regards, Franci
-
anyone know why im getting this error TypeError: $(...).live is not a function $("li.PageListActiondelete a").live("click", function(el){ deleted all the js from the page but its still doing it
-
I have build an online shopping store, but would want to give away a promo code or Gift coupon to some of my customers so that they can avail discounts while they check out. Please tell me what coding should I do or what addition should I do for this feature.
- 2 replies
-
- 1
-
-
- promo code
- shopping cart
- (and 2 more)
-
Hi, I'm trying to finish a new PW site, and there's one last thing i'm trying to achieve; with this site, there are products where the product variants are child pages of the 'master product'; when a search returns a product variant, it has a querystring at the end that has the part #, like ?part=0001 the link takes them to the (master) product page, with that variant's specs highlighted (clientside using js), and an accordion open with the add to cart button for that variant. I'm trying to get it so that if the user clicks on a different variant (on the accordion), the querystring changes (to like ?part=0002) to reflect the newly chosen variant, (and then the js to highlight the specs also triggers). I've read 10 -20 solutions on stack exchange, and tried some jquery plugins, but i can't seem to figure this out... seems there should be an easy way to do it.. I looked at BBQ, which is probably what i need to use, but haven't quite got a solution yet... thought i'd run it by some of you fine folks here... TIA
-
Hello there - So I'm migrating an existing yoga studio site that I built into ProcessWire. I created a template for the "teachers" page, which has teacher bios, that uses repeating fields for each teacher & wraps each one in a section tag: <?php foreach($page->Info_Block as $Info_Block) { ?> <section class="bio"> <? echo "<h2>{$Info_Block->Name}</h2>"; echo "<div><img src='{$Info_Block->Image->eq(0)->url}'>"; echo "<p>{$Info_Block->Information}</p></div> "; }?> </section> I would like to make it so that only the teachers' names show, and then the bio section opens when the name is clicked, which I've done with CSS on the existing site: http://saniyoga.com/teachers.php. But the pure CSS solution uses modified inputs, which doesn't seem like a viable solution here. I've tried adding the script for the JQuery UI accordion to the template in both its original form (the containing div for the above code is "dropdown_cont") $(function() { $( ".dropdown_cont" ).accordion(); }); .... and with a modifier to take the section into account, $(function() { $( ".dropdown_cont" ).accordion( { header: '> section.bio > h2' } ); }); but it doesn't work. Still very new to ProcessWire so would appreciate any suggestions. -
Anyone out there with 5 minutes spare to help me with a jQuery puzzle? Probably quite simple for anyone with half a brain and a bit more skill than me I can give you a link to the site. It basically involves a hidden area to the side which slides in when clicked upon. (So far so good). The thing is when you hover over the bit of the hidden area that's displayed, it pops out a bit further to tease you with the content. When you click on the link the whole area slides into view. The issue is that when it pops out on hover, I'd like the whole area to become a clickable link so that the user doesn't have to go back to the original link to get the slide to take place. (Confused yet?) All this is still fine. Where I'm stuck is that once the (whole page) link has been clicked upon, that link needs to disappear otherwise all the content on that page becomes one big link. I've tried using wrap and unwrap and I'm now wondering whether it's even possible!
-
Has anyone implemented the jQuery version of Paul Irish's Infinite Scroll script on a site built with ProcessWire? If so, I'm interested in reading about your experience and tips on how you implemented it. https://github.com/paulirish/infinite-scroll
- 12 replies
-
- 1
-
-
- ajax
- infinite scroll
- (and 2 more)
-
I was looking for jQuery Carousel and I stumble upon this cool jQuery Carousel call Roundabout. It has lots of options! http://fredhq.com/projects/roundabout Found from this article: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
-
Hi all.. I was wondering, Is there a nice css/template framework out there? I have been playing around with Twitters Bootstrap, but It has its limitations.. Let me hear your 2 cents..
-
hi forum, in my current project i'll have a very long faq-list (ul, li). thinking on how i could improve the usability of this list, i had the idea to provide an entry box on top of the list: as the user types into it, the list narrows itself depending on which letters are typed (example: if "a" is entered the list is filtered and only list-items starting with letter "a" are presented). does anyone of you has ever made something similar or knows a good route how to implement it? i would appreciate any hint. thanks in advance, christoph
-
Just wondering if anyone knows of an alternative for a slide/carousel thingy for my homepage that has a pause on the last slide. I have used nivo-slider previously but it only does a stop on last slide. Any ideas gratefully received
-
I just wanted to know if you know the solution to something I'm stuck with. I have a select in my form which I want to: 1. disable when someone chooses and clicks the option in it 2. activate it if someone clicks the button and set the first select option (empty option in my case). The code looks like this: var selectDisable = {}; selectDisable.select = function() { $('form.visit_form option').click(function() { $('form.visit_form select').attr('disabled', 'disabled'); }); $('input.cancelChoice').click(function() { $('form.visit_form select').removeAttr('disabled').val($('form.visit_form select option:first')); }) }; All seems OK however disabling select dosen't work in chrome and safari. I tried to change "attr" method to "prop" also change the second argument from "disable" to "true" but non of this works. Has anyone encountered this kind of issue?
-
For everyone new to javascript/jQuery i thought i'd post a link to what is imo a great intro: http://jqfundamentals.com/ (Maybe we could use this topic to post more references; CSS, PHP etc.)
- 3 replies
-
- 3
-
-
- 101
- javascript
- (and 1 more)
