Search the Community

Showing results for tags 'jquery'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome to ProcessWire
    • News & Announcements
    • Showcase
    • Wishlist & Roadmap
  • Community Support
    • Getting Started
    • Tutorials
    • FAQs
    • General Support
    • API & Templates
    • Modules/Plugins
    • Themes and Profiles
    • Multi-Language Support
    • Security
    • Jobs
  • Off Topic
    • Pub
    • Dev Talk

Product Groups

  • ProDrafts
  • ListerPro
  • ProFields
  • ProCache
  • Form Builder
  • Likes
  • ProDevTools
  • Custom Development

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 50 results

  1. Hello there I need a field with realtime percent calculation (without page save) with values from other fields in admin template. I think about jQuery with onChange methods on corresponding fields but this is not clear for me how to do this in module. Any help with some advice or example will be highly appreciated! Thanks in advance!
  2. Which should I learn and use for my PHP projects whether using Processwire or another great CMS?
  3. Hi there, I'm trying to get to work some AJAX call with vanilla Javascript, not jQuery. Anything seems to work so far, but the !$config->ajax seems to be ignored. To find out whats the problem by comparing both, jquery and plain javascipt, i built this template. commenting out //loadJquery(''); or loadVanilla(''); switches the two variants. (empty url variable means that the same pages will be loaded.) The problem: the pure Javascript function ("loadVanilla") is loading the full page content into the dc-container, which is wrong. The jQuery function ("loadJquery") only loads the part outside of the if(!$config->ajax): - which is as it should be. So - any help with this, what am i doing wrong? Thanks a lot - Matze <?php namespace ProcessWire; if(!$config->ajax): ?> (some static content)<br> <a id="loadlink" href="#">load</a><br> <?php endif; // end if not ajax ?> <span id="dc-container">(dynamic content)</span> <?php if(!$config->ajax): ?> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var loadlink = document.getElementById('loadlink'); loadlink.addEventListener('click', function(event) { //loadJquery(''); loadVanilla(''); event.preventDefault() }); function loadVanilla(url) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("dc-container").innerHTML = 'loaded: ' + this.responseText + (' (by vanilla javascript)'); } }; xhttp.open("POST", "", true); xhttp.send(); } function loadJquery(url){ // Load content $.ajax({ type: "POST", url: url, data: { ajax: true }, success: function(data,status){ pageData = data; } }).done(function(){ // when finished and successful document.getElementById("dc-container").innerHTML = 'loaded: ' + pageData + ' (by jquery ajax)'; }); } </script> <?php endif; // end if not ajax ?>
  4. rareyush

    hi everyone I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop. i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this
  5. Hello dear community I have a problem with a front edit possibility inside a OWL gallery. The thing is, normally you do a double click to edit something directly on a page. In my case a single click opens up a picture inside a gallery, so I can't "hit" the editing. <div class="demo-gallery"> <ul id="lightgallery2" class="list-unstyled row"> <li class="img-md-12 mb-12 mb-sm-12 mb-md-12 mb-lg-12 mb-xl-12 col-12 col-md-12 img-fluid full-height" data-responsive="" data-src="<? echo $page->page_home_owl_00_img->url; ?>" data-sub-html="<h4><? echo $page->page_home_owl_00_h4; ?></h4><p><? echo $page->page_home_owl_00_p; ?></p>"> <a href=""> <img class="img-responsive" src="<? echo $page->page_home_owl_00_img->url; ?>"> </a> </li> <? foreach($page->children('template=9dk-owl-home') as $item): ?> <li class="img-md-6 mb-3 mb-sm-3 mb-md-3 mb-lg-3 mb-xl-3 col-12 col-md-6 img-fluid" data-responsive="" data-src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>" data-sub-html="<h4><? echo $item->page_home_owl_01_h4; ?></h4><p><? echo $item->page_home_owl_01_p; ?></p>"> <a href=""> <img class="img-responsive" src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>"> </a> </li> <? endforeach; ?> </ul> </div> I tried any variants of options C and D from this page: https://processwire.com/api/modules/front-end-editing/ Are there any hints for me, what I can do? Any help is highly appreciated! Best from Munich in Germany
  6. Hi people I think I have seen them all but maybe I missed some of the just wanted to know what do you recommend for an editor with JQuery autocompletion or support?
  7. I've implemented Slick sliders on WordPress sites many times, but I've never had this error before. The site is here. The template code I'm using is: <link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/> <script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script> <?php // if (count($page->home_header_image) > 0): ?> <div class="home-featured-image slick-carousel"> <?php foreach($page->home_header_image as $image): ?> <div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div> <?php endforeach ?> </div> <?php // endif ?> <script> (function($) { $('.slick-carousel').slick(); })( jQuery ); </script> The JS error I'm getting is: TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined) As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. What am I missing?
  8. hi i want to post variables to a page via ajax to get result from my database depenting my post value so my ajax is: var clickval = clickelement.value; var dataval = "city=" + clickval; $.ajax({ type: 'POST', url: "*MY PAGE SMART URL*", // e.g. http://my_domain/my_page.... data: dataval, dataType: 'text', //or json, i try both complete: function(data, status){ alert(data.responseText); } }); and in php page: $getcity = $input->post->city; echo "value = ".$getcity; just to show my post value... and my alert is "value = ". $getcity is empty and $input has no value inside and it seems like post is never be done, but i have no error in my console... can anyone help me?
  9. CodeRunner 2 is on sale at MacUpdate: https://www.macupdate.com/app/mac/38362/coderunner Mostly I use it for writing shell scripts, mocking up algorithms in PHP, JavaScript/jQuery. But is also supports other programming languages as well. https://coderunnerapp.com/ "An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free."
  10. Hi there, I have a globally declared variable where I want to store a mapping table. var _Pagelist=new Map(); The following Ajax call doesn't seem to set _Pagelist above. I think I have set the context parameter correctly to 'this'. I've scoured through Stackoverflow and JQuery documentation but I can't figure out what is wrong. Any pointers would be much appreciated. Thanks if (!pagelist){ SearchWaitDisplay(true); $.ajax({ url: '/site/pagelist.php', context : this , success: function(result) { //here this._Pagelist is null, can't refer to This._Pagelist for (var x=0;x<result.length;x++) { this._Pagelist.set(result[x].id, result[x].url); //This will throw an error as _Pagelist is NULL. }; window.localStorage.setItem('pagelist', JSON.stringify(_Pagelist)); //The following will not update _Pagelist. Next 2 lines are just test code. this._Pagelist = result; window._Pagelist = result; SearchWaitDisplay(false); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + ' ' + thrownError); } }); } else { //InitialiseSearchField(autocompletelist); }
  11. Hello, has anybody here done this with processwire: https://datatables.net/examples/server_side/ I want to use this solution because I have to work with a huge amount of data. TIA Henning
  12. Hi, Trust this message finds you hale and hearty. Need your help, if you'd be so kind. I just can't seem to get the file paths correct for a template I'm converting to Processwire. Js folder is inside the site -> templates folder: In this folder are calls to js files, in my _head.inc and _foot.inc files: In the _head.inc file: jquery.js jquery-migrate-1.2.1.js device.min.js In the _foot.inc file: script.js Here's the code I use to call these files: _head.inc <script src="<?php echo $config->urls->templates; ?>js/jquery.js"></script> <script src="<?php echo $config->urls->templates; ?>js/jquery-migrate-1.2.1.js"></script> <script src='<?php echo $config->urls->templates; ?>js/device.min.js'></script> _foot.inc <script src="<?php echo $config->urls->templates?>js/script.js"></script> Inside the script.js file, there are a bunch of includes, like the following: include('js/jquery.cookie.js'); I'm on Chrome, and the console shows a bunch of 404 errors. The main files don't find the files referenced in script.js. Here's an example: http://localhost/surfinn.rocks/js/jquery.cookie.js http://localhost/surfinn.rocks/js/jquery.cookie.js That shows an error. The HTML demo of the site I installed on my Wamp works fine. No errors. Not the case when loaded in Processwire. Any idea what I'm missing? Thanks so much for your time.
  13. I pushed an initial (testing) version of TemplateFileHelper to bitbucket. https://bitbucket.org/pwFoo/templatefilehelper/src/ The autoload module extends TemplateFile instances with API vars $layout and $view $layout -> global layout instance of TemplateFile to set layout placeholders ($layout->set(...) or global scripts / styles. $view -> current page instance of TemplateFile to set the current page placeholders and current page scripts / styles. load() method Load a template / view with additional controller (php) file as subTemplate. Returns a TemplateFile object to render / output Each sub-template controller have access to API Vars and $subTemplate (current TemplateFile instance, $subTemplate->set('placeholder', 'My value...')). Load site/templates/chunks/test1.php controller and site/templates/chunks/test1.tpl view: $part = $view->load('chunks/test1'); echo $part->render(); chunks/test1 example <?php // chunks/test1.php - controller $subTemplate->set('var1', "Subtemplate variable output..."); <!-- chunks/test1.tpl - view --> <div><?=$var1?></div> scripts / styles properties FilenameArray like $config->styles | scripts. It should help to organize scripts / styles with ajax in mind (global / current page only). // current page script $view->scripts->add('js-file.js'); // global / layout script $layout->scripts->add('js-file.js'); You have to handle the output yourself by two foreach loops inside your _layout.php / _layout.tpl files (non ajax calls scripts and styles should be in layout head section). foreach ($layout->scripts as $globalScript) { ... } foreach ($view->scripts as $currentPageScript) { ... } IntercoolerJS module will take care about async / ajax handling of (custom page) scripts and styles. hook Page::render hook after page render to load and add the global layout. The current page template (PW template file == controller) just handle the currents page code / view. Global layout / controller / view is moved to separate files (default: _layout.php controller and _layout.tpl view). Just use $layout->set(...) to fill the _layout.tpl placeholder variables inside the _layout.php controller file. configurable module Some settings are available... Global layout (view + controller) file name (default: "_layout") Current page content variable (used inside of the _layout.tpl view to output current page content, default: "currentPageContent") View file extension (default: ".tpl") Controller file extension (default: ".php") It will be a dependency of the planned IntercoolerJS module which adds ajax page calls, async scripts / styles handling (current page scripts and styles...) and need a defined template handling to work...
  14. Hi everyone, I am trying to create a gallery of tiles where the user can click a tile and it will open another set of images that are unique to that tile. So a page of albums. I am using repeaters so that the user can add albums, without having to create fields or pages. However I am struggling to separate the albums into the desired tile, since at the moment all the albums I have uploaded to PW come back. Generally my code is quite messy and I haven't coded some elements that I have described. Since I was unsure how to progress, I was experimenting with things like having each album having an number so that I could Identify them. Also I am using UIKit for scrolling through the album. See code below. <?php include("./head.inc"); ?> <!--Image Viewer--> <div id="back" class="back"> <a href="javascript:void(0)" onclick="closeAlbum()" class="material-icons">close</a> <div class="uk-container uk-container-center"> <div class="uk-container uk-container-center uk-width-3-4"> <div id="slideshow" data-uk-slideshow="{autoplayInterval:1000}"> <div class="uk-slidenav-position"> <ul class="uk-slideshow"> <?php $i=1; foreach ($page->album_repeater as $item) { echo "<li class='album-$i'>"; foreach ($item->album_images as $image) { echo "<li>"; echo "<img src='{$image->url}'>"; echo "</li>"; } $i++; } echo "</li>"; ?> </ul> <ul> <a href="" class="gl uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a> <a href="" class="gl uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a> </ul> </div> </div> </div> </div> </div> <!--Album Thumbnails--> <div id="content" class="uk-width-1-1 uk-grid" style="min-height: calc(100% - 100px);"> <div id="gallery" class="uk-width-8-10 uk-container-center uk-flex uk-flex-center uk-flex-middle uk-grid" data-uk-grid="{gutter: 20}"> <?php $th = ""; foreach($page->album_repeater as $item){ $th .= "<div class='gallery-item uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-6'>"; $th .= "<a id='thumb' class='uk-panel' onclick="; $th .= "'openAlbum()'"; $th .= "><img src='{$item->album_images->first()->url}'>"; $th .= "</a>"; $th .= "</div>"; } echo $th; ?> </div> </div> <script> function openAlbum() { document.getElementById("back").style.display = "block"; document.getElementById("thumb").style.display = "none"; document.getElementById("content").style.display = "none"; } function closeAlbum() { document.getElementById("back").style.display = "none"; document.getElementById("thumb").style.display = "block"; document.getElementById("content").style.display = "block"; } </script> <?php include("./foot.inc"); As a visual aid I've attached screenshots of what the code produces. First Image is the album where you can slide through the images. The second is the tiles that when clicked open the associated album. Does anyone know any solutions or existing gallery's similar to the idea above (preferably tutorials). Thanks, Matt
  15. I have a client who wants to have a modal pop up box (i'm using the Zurb 'Reveal' jquery plugin for it) on their homepage, but they only want it to appear once per visit, so if the user clicks back to the homepage, they don't get the pop up again. Just wondering if anyone has any idea how to do this with php/processwire, or should i be using jquery cookies? Thanks, Marc
  16. I know that the Topic title is probably confusing(sry for that ). Let me explain my Question: I have two Filters(Main Filter & Detail Filter) like you can see below. When I click on a main filter it gets bold and will be added to the "Meine Auswahl(my selection)" container below the Filters. When I click on the "X" span inside the "My Selection" Container, the selected Filter gets resetted. Now, what I want to achieve is a ajax Filter which changes the php Selector for the for the $pages->find(). For Example: When I come to that page, the selector for the main and detailfilter should look like this: $branches = $pages->find("template=branch"); // Main Filters <?php $genres = $pages->find("template=genre, select_sparte=''"); ?> //Detailfilters (Returns a NullPage so dont show the Detailfilters when none main filter is selected) When I select for e.g Example Filter 1 it should change to this without a page refresh: <?php $genres = $pages->find("template=genre, select_sparte.title='Example Filter 1'"); ?> So that I get the Detail Filters of Example Filter 1 without a page refresh. Is this even possible? When yes how, can you guys show me a direction?
  17. Hello, I have a PHP script being called by AJAX request. At this moment everything work perfectly, but my script is in the root directory, bootstraping PW. request = $.post('/public_html/pw/contactus.php', serializedData); My question is, it is possible to put this PHP script in my templates directory and call it from there ? (if I hardcode the path I get a 403 HTTP error and doing that can cause problem between dev environment and production); How I should code my path in the Javascript code ?
  18. Hi, I have been googling around like crazy to find a suitable very light-weight javascript library for showing a simple image gallery with one bigger main picture (just on the page, not in a lightbox), with clickable thumbnails that will show the selected image in a bigger version in the main image area when clicked. See the attached screenshot for an example! Most libraries out there seem to focus on fancy transitions, lightbox style image viewing, or don't include the thumbnail feature (just showing these dots, for selecting pictures) ... and so I haven't so far found what I'm looking for. Any hints? (Again, preferrably something super-lightweight, that is super-easy to integrate with pw).
  19. berechar

    Hi all, A question regarding security/best-practice concerning a simple front-end login through AJAX calls. My plan is to use this kind of module inside a small AngularJS architecture to update the entire application when someone is logged in/out. * I've made a simple HTML form in which the user can login by typing his/her username and password in the corresponding fields. After submitting the form, these values are fetched with jQuery. Then an Ajax GET request is made with these values to a page which has access to the Processwire API. This page checks if these values (after sanitization) correspond to an existing user in the CMS. If the user and password matches, the user is logged in, and a success message is being returned. If the user and password mismatches, an error message is being returned. * I don't know much about encryption, therefore I highly doubt if this a 'safe' way of doing things. Hopefully someone can give me some pointers on this! best, berechar
  20. http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ Please check your code for how you use the .show() and .hide() methods! I did a quick grep for a 2.6.9 site (has a dozen random modules) and the .js files listed below were using .show(). It might well be that some of them will break with jQuery 3.0. BatchChildEditor.js ProcessBatcher.js AdminThemeReno\scripts\main.js InputfieldFile.js InputfieldPageAutocomplete.js InputfieldSelector.js JqueryTableSorter\widgets.js JqueryWireTabs.js ProcessField.js ProcessModule.js ProcessPageAdd.js ProcessPageEditImageSelect.js ProcessPageEditLink.js ProcessPageList.js ProcessPageLister.js ProcessPageSearch.js ProcessTemplate.js SystemNotifications\Notifications.js templates-admin\scripts\inputfields.js templates-admin\scripts\main.js
  21. 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
  22. 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.
  23. 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?
  24. Hi folks, I have a bit of an odd question, but I'm assuming it's related to something I have/haven't changed upon moving my local build to a live server. Everything, locally, works 100% and I have encountered no problems at all, but sometimes, when logging into the admin, the stylesheets/js will break and I'll get a broken page (see image below) – sometimes it happens, sometimes not and the page it happens on varies as well. The thing is, once it's happened, I can't return to the unbroken site until I save over the config.php file. Or, after a few refreshes it returns back. Odd, right? Looking in the error console on devtools, it states: Uncaught ReferenceError: $ is not defined sheffieldculture.co.uk.s141188.gridserver.com/:205 Uncaught ReferenceError: initPageEditForm is not defined This makes me think that the jQuery is failing to load... Any thoughts/similar issues?
  25. 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