Jump to content

Search the Community

Showing results for tags 'ajax'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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

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


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 85 results

  1. Let's say I have 500 Eventpages or more with differen content fields(date, title, textarea etc..). I would display all events in a list like this: $events = $pages->find("template=event, limit=10"); echo "<div class='event-container'>"; foreach($events as $event){ echo "<div class='event-detail'> <h1>$event->title</h1> <p>$event->short_description</p> </div>"; } echo "<a class='load-more'>LOAD MORE</a>"; echo "</div>"; Now I want to make the load-more link to display 10 or 20 more events without reloading the page and showing a loading gif/text while its rendering the other events, when clicking on it . How can i achieve this? I know that i could use pagination for displaying this heavy amount of results but the customer doesn't want that because it don't fit in the design of the website. Can I probably achieve a combination with Pagination and Ajax, or are there other ways to do it?
  2. 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
  3. Hello, i am trying to built a contact form using Ajax. here is my code <form method="post" action="<?=$config->urls->root;?>subscribe/contact.php" id="contactForm1"> <input type="text" id="fullname" name="fullname" class="textbox" placeholder="Your name" required=""> <input required="" type="email" id="email" name="email" class="textbox" placeholder="Your email" > <input type="submit" value="Send"> </form> here is my Java Script <script> $(function() { var frm = $('#contactForm1'); frm.submit(function (ev) { ev.preventDefault(); var fullname = $('#fullname').val(); var email = $('#email').val(); $.ajax({ type: 'post', url: frm.attr('action'), data: 'fullname=' + fullname+'&email=' + email, success: function(results) { if(results==1) { $("#suscess").show(); } if(results==2) { $("#fail").show(); } } }); // end ajax }); }); </script> and here is my PHP file <?php $emailTo = "myemail@domain.com"; // sanitize form values or create empty $form = array( 'fullname' => $sanitizer->text($input->post->fullname), 'email' => $sanitizer->email($input->post->email), ); $msg = "Full name: $form[fullname]\n" . "Email: $form[email]" ; if(mail($emailTo, "Website contact form submission", "$msg", "From: $form[email]")) { echo "1"; }else{ echo "2" } ?> the error i am getting is on $sanitizer->text mail( Undefined variable: email i am thinking may be this PHP file in root/subscribe thats why processwire variables are not loading. also i can't access the PHP from Template folder. how to fix this issue. Thanks
  4. I know how to create pages with the API. I need help with the form itself. Here's what I'm working with so far, hacked together from examples found in this forum: <?php $upload_path = $config->uploadTmpDir; $out = ''; // create a new form field (also field wrapper) $form = $modules->get("InputfieldForm"); $form->action = "./"; $form->method = "post"; $form->attr("id+name",'upload-form'); // create file field $field = $modules->get("InputfieldFile"); $field->label = "Audio File"; $field->attr('id+name','audio'); $field->description = "Upload your track(s)"; $field->destinationPath = $upload_path; $field->extensions = "mp3"; $field->maxFiles = 10; $field->maxFilesize = 2*1024*1024; // 5mb $field->required = 1; $form->append($field); // append the field // oh a submit button! $submit = $modules->get("InputfieldSubmit"); $submit->attr("value","Upload"); $submit->attr("id+name","submit"); $form->append($submit); // form was submitted so we process the form if($input->post->submit) { // user submitted the form, process it and check for errors $form->processInput($input->post); if($form->getErrors()) { // the form is processed and populated // but contains errors $out .= $form->render(); } else { // do with the form what you like, create and save it as page // or send emails. to get the values you can use // $email = $form->get("email")->value; // $name = $form->get("name")->value; // $pass = $form->get("pass")->value; // // to sanitize input // $name = $sanitizer->text($input->post->name); // $email = $sanitizer->email($form->get("email")->value); $out .= "<p>You submission was completed! Thanks for your time."; } } else { // render out form without processing $out .= $form->render(); } $content .= $out; That outputs the form but I can't drag & drop or input more than one file, and when I submit it says "Missing required value". I need to at least create one or more pages from the form submission, i.e., one per file uploaded. If possible I'd like to be able to set the title and description for each file/page as well.
  5. Hello, I have a problem with all AJAX -requests getting 301 redirect. AFAIK this leads to the POST -data sent with the request getting cleared. Below I is an example about what I'm trying to do. My question is: Is there something I don't understand about Processwire or internet technology which is causing this behaviour?I have page with a button. When you click this button, an HTML overlay popup (done with Foundation and Reveal) with option to enter email is displayed (The content of this popup is a processwire template which is loaded with AJAX -request. Causes also 301 redirect, but this doesn't use POST -data, so I didn't realise the problem at this point) Then this data is sent as POST -request with payload to processwire for processing The processing is done by special API -template, which exists solely for this purpose of processing data. However the payload in the POST -request never reaches the API -template I believe this is because a 301 redirect happens before the the POST -request reaches the API -template Thanks for reading and special thanks for any answers! Example code: Popup (HTML & JavaScript): <!-- use onsubmit to override the standard 'sending form to self' -behaviour <form onsubmit="WEBSITE.dialog.download.mail($('#email').val(), event); "> <label>email:</label> <input id='email' name='email' type='email' value=''> <input type="submit" value="Send"> </from> The function which sends the POST -request to processwire template (which processes API requests) (the function is in separate .js file) // I've translated this from CoffeeScript to JS without testing, hope there's no errors dialog = { download: { mail: function (email, ev){ // Prevent default behaviour of submit -functionality ev.preventDefault(); // Success and error callbacks success = function(response){ console.log('success', response); } error = function(response){ console.log('error', response); } // Do ajax -request with jQuery request = $.ajax({ url: '/api/mailer/send/', method: "POST", data: {email: email}, success: success, error: error }); } } } I've also tried this with doing the request without jQuery, but result is the same. The API template (PHP): ?php // Redirect non-ajax calls // Get the API address from url $api_url = explode('/api/', $page->url); if(!isset($api_url[1])){ // This url is not in correct format, send error die(createJSONResponseError( 1, 'Invalid url format.' ) ); } switch ($api_url[1]): case 'mailer/send/': // This is where it stops every time, though I've checked from Chrome dev console that the email key/value pair exists (at least when request is made) if($input->post->email === null){ die(createJSONResponseError( 2, 'Insufficient params.' ) ); }else{ // Create the response $response = createJSONResponse( 'success', null ); } break; // Default action - needs to be last of the list default: // So this api does not exist, send error die(createJSONResponseError( 1, 'Unknown API.' ) ); break; endswitch; // Send the response die($response); ?> Here's how the responses are created (from a helper methods file): /** * Create JSON response for httpXMLRequest * * @param status - a string that represents the status of this operation. Recommended values: 'success' or 'error' * @param result - the data resulting this request. * * @return JSON object * */ function createJSONResponse($status, $result){ return json_encode( array( 'status' => $status, 'result' => $result ) ); } /** * Create JSON error response for httpXMLRequest * * @param code - error code * @param msg - error message * * @return JSON object * */ function createJSONResponseError($code, $msg){ return createJSONResponse( 'error', array( 'code' => $code, 'msg' => $msg ) ); }
  6. Hello, I need to connect two PW sites, both with rather big pagetrees. When adding a page to site A, the editor should be able to select one or more related pages from site B (one is an editorial news site, the other a product cataloque) My idea was to build an API for site B which writes JSON data of the applicable pages and feed that into my custom inputfield which would be heavily influenced by PageListSelect. Now my questions: Has anyone built something similar? Since this would be my first custom field / inputfield, where should I look for help? Does this sound like a reasonable approach or are there other ways to connect two PW sites? Thanks for any help, thomas
  7. Hi, I'm about to start developing a website in Processwire but did a bit of research and could'nt find any way to create a form with confirmation message loaded by AJAX when a form is submitted + validated. Is that possible? I think of something similar to Contact Form 7 for WP (when the visitor submits the form it should get validated and if every field validates and email gets sent the visitor gets a message like "Thank you for your message!" without page reload). Is that possible to do this in Processwire or anything thats on the Feature list? From what i can understand theres three modules (Form builder, Form Template Processor and Mailer and Simple Contact Form) that can create forms and also a API-function to call and create the form manually. Is there any of the above which supports ajax submit with "Thank you"-message on the same page without reloading the page on submit? Seems pretty basic, but maybe i've missed something. Thank you!
  8. I'm having problem with setting global session variable in $config->ajax block. To be more clear, here is example: This will not work: if($config->ajax) { $_SESSION["TEST"] = "test" } and then after "normal " page rendering with no ajax I get nothing when trying to get session variable: echo($_SESSION["TEST"]); // produces no output however, if I set variable outside $config->ajax block: if($config->ajax) { // this is left blank to better describe context } else { $_SESSION["TEST"] = "test"; } and then after "normal " page rendering with no ajax - I get what I expect: echo($_SESSION["TEST"]); // produces "test" as output. So, what I want is set some global session variable inside ajax call and then reuse it's value during any page reload. It's late and I probable miss something.
  9. Hi folks, I am using AJAX on a site I am building, specifically PJAX, and I have built all this locally and it has all been working great with no problems. Upon pushing this from local to remote the AJAX is failing to retrieve my pages, and thus falling back to the normal page loading. I have had a look at the Network tab in Google devtools to find out more and it looks like the request goes through but the PJAX url call (for example: http://www.juleslister.co.uk/projects/photography?_pjax=%23pjax) is returning as a 301 error. I have a screenshot of the Network issue here: http://i.imgur.com/oC2ZPce.png Any thoughts? Many thanks, R
  10. Hi folks, I'm building a fairly simple site using PW but I am also working with AJAX driven content (as noted by @ryan here: https://processwire.com/talk/topic/225-how-to-work-with-ajax-driven-content-in-processwire/) and everything works fine except for the change of body classes per page. So, for example, in the head.inc I have the following: <body class="<?php echo $page->name; ?>"> which is useful as it means I can create page specific styles etc. However, as the head and foot remain constant if an AJAX request is called using the following, for example: <?php if(!$config->ajax) include('./head.inc'); ?> the body class fails to update for obvious reasons. Is there any way round this so the body class is updated per ajax call, if you know what I mean? This may be a global AJAX question and not a PW specific question but thought I would ask all the same. Thanks, R
  11. This is a site for composer, conductor, and NYU composition professor Louis Karchin. http://louiskarchin.com/ The site is based around the works which are presented as a filterable datatable, with inline audio player (soundmanager2).. There is some ajax happening on the works page to pull up details about a work in a popup. a lot of the initial work was importing from the original site as well as from CSV files of the works, so there were various custom import/api scripts used to get all the data in.. As with other recent sites, this site has a admin docs section for reference, as well as inline docs on the edit page, using a simple module based on Nik's page references tab. also this uses the configurable widgets system: and i have an admin page for backups, though the backups run automatically on a cron (using the SmartBackup script): this site benefited from a lot of modules, namely: AdminCustomFiles AdminCustomPages PageDocsTab AdminPageSelectEditLlinks AIOM+ FieldtypeDataStructure FieldTypeTemplates InputfieldSelectExtended HannaCode ProcessRedirects ProcessDiagnostics Profields Table Formbuilder Procache Lister Pro
  12. The current default for the Comments module seems to be... 1.) User enters name, email and comments 2.) User hits submit 3.) Page is refreshed 4.) Thank-you message or error message returned How do we avoid step 3, the page refresh? Is it possible with the standard commenting system? Some sort of AJAX must be involved, but I don't know if it's possible to modify the current comments system to accommodate this. Any pointers much appreciated.
  13. Hello, I have a new project in which people from site A should have the possibility to post a "news" which should automatically appear in site B. I think it's not possible to merge two PW installations by bootstraping site B to site A. Don't ask why both pages are not in the same installation ;-) My idea is to use a hook and post the data via ajax to a script which bootstraps site B. Then I post the data into that installation. To be capable to update the news simultanious in both installations I would use an unique field in both installations which will be the "id". Has anyone some better ideas or hints?
  14. 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: '', 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
  15. I am trying to do frontend page creation via AJAX but when the form is loaded into an element, things like CKeditor and proper image uploading do not work. It seems javascript should be re-initialized on the elements that got added to the DOM after the initial page has loaded, but I don't know how to do this (if that is even what should be done in the first place)? I got it working fine without AJAX, via a regular template. But when I move the code to a file that is called by AJAX, javascript breaks on the form hence things like CKeditor don't work. Here's what's in HEAD of the main template: <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><?php echo $headline; ?></title> <link rel="stylesheet" href="<?php echo $config->urls->templates;?>css/foundation.css" /> <script src="<?php echo $config->urls->templates;?>js/vendor/modernizr.js"></script> <!-- Somatonic page edit script --> <script> <?php $jsConfig = $config->js(); $jsConfig['urls'] = array( 'root' => $config->urls->root, 'admin' => $config->urls->admin, 'modules' => $config->urls->modules, 'core' => $config->urls->core, 'files' => $config->urls->files, 'templates' => $config->urls->templates, 'adminTemplates' => $config->urls->adminTemplates, 'adminTemplates' => $config->urls->adminTemplates, ); ?> var config = <?php echo json_encode($jsConfig); ?>; </script> <?php //$config->styles->prepend($config->urls->adminTemplates . "styles/main.css?v=2"); //$config->styles->append($config->urls->adminTemplates . "styles/inputfields.css"); //$config->styles->append($config->urls->adminTemplates . "styles/ui.css?v=2"); $config->scripts->append($config->urls->JqueryUI . "JqueryUI.js"); $config->scripts->prepend($config->urls->JqueryCore . "JqueryCore.js"); $config->scripts->append($config->urls->adminTemplates . "scripts/inputfields.js"); foreach($config->styles->unique() as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />"; foreach($config->scripts->unique() as $file) echo "\n\t<script type='text/javascript' src='$file'></script>"; ?> </head> It loads all the necessary script for frontend page creation. And here is the template that does the form processing: if ($command == "template_selection") { // Selected template ID $id = htmlspecialchars($_POST['template_id']); $page = $pages->get($id); $template = $page->template; foreach($template->fields as $field){ echo $field->label . ": "; //echo $field->type . "<br/>"; echo $page->get($field->name) . "<br/>"; } // make a form $form = $modules->get('InputfieldForm'); $form->method = 'post'; $form->action = './'; // add the page's fields to the form $form->add($page->getInputfields()); // add a submit button to the form $submit = $modules->get('InputfieldSubmit'); $submit->name = 'submit'; $form->add($submit); // process the form if it was submitted if($input->post->submit) { $form->processInput($input->post); $page->save(); echo '<p>saved</p>'; } // render the form output echo $form->render(); die; } This template works properly when not called by AJAX, but, again, when I call it with an AJAX request, the javascripts don't work. Is there any way I can make this work?
  16. I'm using the delayed output template structure the way Ryan recommends. That means I have a _main.php file with all of my HTML markup and each page has a template that outputs to a variable that is echo'd in _main.php. Now I doing some very basic ajax testing, to figure out how this fits into the Processwire workflow. I'm already running into an issue: the file that handles the ajax request is not only outputting the data I'm requesting, but it's also outputting the complete _main.php markup into the ajax container where only the result of my ajax request should be going. Here what I've got: _main.php (greatly simplified) <html> <body> <!-- template output goes here --> <p><?php echo $bodycopy; ?></p> <p>This line will unfortunately also be output to the ajax container</p> </body> </html> ajax_test.php template <?php ob_start(); ?> <?php ?> <form method="post" enctype="multipart/form-data"> <div id="enter_template_container"> <input type="text" name="select_template" id="select_template"/> </div> <p> <a href="#" class="button" id="button_select_template">Search</a> </p> </form> <div id="placeholder_template"></div> <?php $bodycopy .= ob_get_clean(); front.js /** Simple ajax test: search templates **/ var show_template = function(template) { // Ajax data = { template_search: template, command: 'show_template' // add a unique command value to every ajax call so we can identify what function to call in function.php }; $.post("../functions/", data, function (response) { // Add form $('#placeholder_template').html(response); }).fail(function() { // Just in case posting your form failed alert( "Posting failed." ); }); } $('#button_select_template').on('click', function() { var template = $('#select_template').val(); show_template(template); }); functions.php template (yes I have a Wordpress background ;-)) /** Simple ajax test: search templates **/ if ($command == "show_template") { $template = $templates->get(htmlspecialchars($_POST['template_search'])); foreach($template->fields as $field){ echo $field->name . "<br/>"; } } Functions.php does the ajax output which is placed in a div with "placeholder_template" ID in a template called ajax_test.php. The problem is that all the contents of _main.php are also put into that div, not just the output generated by functions.php. What is the best way to counter this behavior? Is it a good idea to add "die;" at the end of the functions.php template for instance? What's the best way to deal with this?
  17. Hello, I'm trying to submit a form through AngularJs $http object, but I can't get any response. My post values are a json object: {"user":"johndoe", "email":"jd@..."} But in the receiving page, I'm using this code [at no avail]: var_dump($input->post) // WireInputData (size=0) echo $_SERVER['HTTP_X_REQUESTED_WITH'] // returns void echo 'hi' // works var_dump(json_decode($input->post, true)); // returns null echo $config->ajax; // no response Thanks for any help
  18. As part of the Agile user story system that I'm in the process of building, each story has a list of acceptance tests that go with it. I have this list put together with a repeater, and I've added a checkbox to each test so that developers can mark it off as complete. What I really want to do, however, is not require developers to edit the page to check things off. They aren't writing the stories, only reading them, so I really want to find a way to give them a checkbox on the rendered page itself that can update the state of the checkbox field when they click it. The users viewing the page are already logged in (I'm using Adrian's Protected Mode module to lock down the whole site), so It seems like then first step will be to find the right Process API call to save a change to the page. The second step is probably harder, though, making all this happen from Javascript.
  19. 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'); } });
  20. Hello, I've been using ProcessWire for over a year now. It's wonderful to work with ProcessWire and enjoy the freedom it provides. I've used PW for tons of projects and now I've started using it for much complex projects such as invoicing applications and PM tools. The only problem I've faced so far is creating public side forms with tons of fields that need validation and processing. I've been doing it manually, writing jQuery validations, form processors and then using PW's API to store information coming from client side. It works but takes a lot of time. A friend of mine uses Drupal, he seems to be able to create client side application of same sort without having to manually process any form, with AJAX support too. I'm not complaining in anyway. I'm well aware that PW has a very strong backend that works just like(for me, even better than) Drupal. But it can't be given to public/client to use for doing form related works. I'm interested in knowing how others are handling this and what I'm doing wrong exactly? Have I missed something? I'm just looking to find a way to make forms processing less and less manual. Like I'll just create a template with set of fields, and some way to have a form of those fields created. Just like it happens at admin side. Thanks.
  21. HELLO! My new portfolio website is nearly finished and I would love some feedback and bugs if anyone has a moment. Built with PW using mixup.js, ajax, loaded.js, tons of css transitions and some custom slideshow and canvas bits. currently here http://benbyford.com/dev/new/ but will be moving it soon to replace http://benbyford.com Thank you!
  22. I'm hoping that someone can help me out with an ajax problem. I'm trying to build a front-end signup form, using jquery.validate for client-side validation, and then sending the form details via a jquery ajax post. The $.ajax submission reaches the target page OK, but the data that should have been sent with the post seems to get lost along the way. $_POST is always empty. The submitHandler for jquery.validate has the following code; $.ajax({ type: "POST", url: "/processMaths/admin/adduser", data: "name=fred&age=27", // data simplified for testing - I've also used {name:"fred",age:27} success: function(rtndata) { $('#debug').html(rtndata); } }); The page handling the ajax request has the following code added to try to work out what is going wrong. print "CONTENT_TYPE: " . $_SERVER['CONTENT_TYPE'] . "<BR />"; $data = file_get_contents('php://input'); print "DATA: <pre>"; var_dump($data); var_dump($_POST); print "</pre>"; echo "here at adding users<br/>"; which updates my #debug div with the following message which suggests that no data reached the page. CONTENT_TYPE: DATA:string(0) "" array(0) { } here at adding users Does anyone have any ideas why the $_POST is empty. The same code outside of PW works OK, and I've previously used ajax inside PW without any problems. I'm stumped on this one - even tried rebooting in desperation, and I've run out of ideas for what else to try. There's obviously something different between my other working ajax calls (including other processwire sites) and this one, but I can't spot the difference. All use apache running on localhost, same version of jquery. The master plan is to set up a mathhelp site using processwire, where teachers can signup (and be assigned a role as "teacher"), and join up their students (role "student" ) - teachers get to set tasks for students to do, and monitor their results, so teachers will have access to more pages than the students (and ideally neither student or teacher will ever need to see the back-end admin pages ). Students, classes and teachers will all be pages. Is there an alternative front-end way of collecting user data that I should know? A more elegant way of using ajax perhaps? I've done so much head scratching my head is getting sore.
  23. Hi, I'm experimenting with using AJAX to deliver just a portion of the page, as described here by Ryan. I've got it working on using this javascript: $(document).ready(function () { $("#topnav a").click(function() { $("#topnav a.alert").removeClass('alert'); // unhighlight selected nav item... $(this).addClass('alert'); // ...and highlight new nav item $("#bodycopy").html(""); $.get($(this).attr('href'), function(data) { $("#bodycopy").hide().html(data).fadeIn(500); }); return false; }); }); However I've also got a 'load more' button powered by Infinite AJAX Scroll which works fine when you first load the page. This is the javascript I'm using for the 'load more' button: var ias = $.ias({ container: "#container", item: ".item", pagination: "#pagination", next: ".next a" }); ias.extension(new IASTriggerExtension({ html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>', })); ias.extension(new IASSpinnerExtension({ })); The 'load more' button works on the first load of the page, however if you click 'all' (or any of the filter buttons, the back to 'all') it doesn't load the Infinite Ajax Scroll script and just shows the plain ol' text link to /page2/ Could anyone point me at how I might be able to make the Infinite Ajax Scroll 'load more' work when the AJAX controlled buttons are used? Any help is greatly appreciated!
  24. 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
  25. 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
  • Create New...