We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2603
    • 104 Posts
    Hello!

    Sorry for my poor knowlege in MODx and html.

    What I should write in my template to make Ajax work from it?

    <!--SearchBar -->
    <div class="dd" style="position:absolute;">
    <table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" background="main_imgs/search.png" align="center" valign="middle" style="padding-top:4px;"><input style="background:none; border:none; display:block; padding-left:10px;" size="16" height="22px" type="search" value="" border="0"></td><td width="54px" valign="middle"><input style="background:none; border:none; width:54px; height:22px; background-color:#f8712f; color:#333333; font-size:12px; font-weight:bold;" type="submit" value="Search"></td></tr> </table>
    </div>
    <!--End SearchBar -->


    thanks a lot
      Getting higher! | www.djabuzz.com
      • 5811
      • 1,717 Posts
      What are you trying to do ? create an input form for a search ?

      Here is a board for the AjaxSearch snippet. To get the search input form in your template do as follow:

      adds [!AjaxSearch? &ajaxSearch=`0` &AS_landing=`xxx`!] inside your template (in the header for instance)

      * This call renders, on all pages, a search form.
      * Results will be displayed on page #xxx
      * To display the results without the search form, the document #xxx should contain a non-ajaxSearch snippet call:

      [!AjaxSearch? &ajaxSearch=`0` &AS_showForm=`0`!]

      And then, if you would like change the look and field of the input form, you need to change the ajaxSearch/templates/layout.tpl.html file.
      With you example, try for instance:
      <!--SearchBar -->
      <div class="dd" style="position:absolute;">
      [+as.showForm:is=`1`:then=`
      <form [+as.formId+] action="[+as.formAction+]" method="post">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" background="main_imgs/search.png" align="center" valign="middle" style="padding-top:4px;">
        		<input type="hidden" name="advSearch" value="[+as.advSearch+]" />
            <input id="ajaxSearch_input" style="background:none; border:none; display:block; padding-left:10px;" size="16" height="22px" class="cleardefault" type="text" border="0" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
          </td>
          <td width="54px" valign="middle">
            <input id="ajaxSearch_submit" style="background:none; border:none; width:54px; height:22px; background-color:#f8712f; color:#333333; font-size:12px; font-weight:bold;" type="submit" name="sub" value="[+as.submitText+]" />
          </td>
        </tr>
      </table>
      </form>
      `+]
      </div>
      <!--End SearchBar -->
      [+as.showIntro:is=`1`:then=`
      <p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
      `+]
      [+as.showResults:is=`1`:then=`
      [+as.results+]
      `+]
      Or download the attached file, remove the ".txt" extension, drop the "alexLayout.tpl.html" file into the assets/snippets/ajaxSearch/templates directory. And replace the AS snippet call of your template by:
      [!AjaxSearch? &ajaxSearch=`0` &AS_landing=`xxx` &tplLayout=`@FILE:assets/snippets/ajaxSearch/templates/alexLayout.tpl.html`!]

      Don’t forget to replace xxx by the id of your landing document.

      See below inside my signature for the wiki documentation about ajaxSearch, otherwise for the AS demo site is here

      You are a lucky man, I was waked up early today wink

        • 2603
        • 104 Posts
        Thank you, Coroico!

        I’ve made as you told. AS works fine! smiley Strange, but my temlate not active. Search looks as default. Actually I didnt have dirrectory "templates". I’ve made it.
        How I can correct this?

        undecided huh

          Getting higher! | www.djabuzz.com
          • 2603
          • 104 Posts
          Sorry. smiley I had AS 1.7.1.
          Now I upgraded it to 1.8.1 and layout works now, but not so correct.
          There are 2 backgrounds serch.png instead of 1. And it doesnt appear at the same place, as it should be. How to fix that?
          Also I wanted to enter another text to serch field (instead Search here) and on the button (instead Go!). How can I do this?


          I’ve changed template file. Now it’s ok. smiley

                                           <div class="dd" style="position:absolute;">
          
          [+as.showForm:is=`1`:then=`
          <form [+as.formId+] action="[+as.formAction+]" method="post">
          <table border="0" cellpadding="0" cellspacing="0">
          
                                          <table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" background="main_imgs/search.png" align="center" valign="middle" style="padding-top:4px;">
          <input type="hidden" name="advSearch" value="[+as.advSearch+]" />
          <input id="ajaxSearch_input" style="background:none; border:none; display:block; padding-left:10px;" size="16" height="22px" type="text" value="" border="0" name="search" value=""[+as.inputOptions+]>
          </td>
          <td width="54px" valign="middle">
          <input style="background:none; border:none; width:54px; height:22px; background-color:#f8712f; color:#333333; font-size:12px; font-weight:bold;" type="submit" value="Search"></td></tr> </table>
                                          </div> 


          Thank you very much!

          Bludy good stuff!
            Getting higher! | www.djabuzz.com
            • 2603
            • 104 Posts
            Its very strange, but in IE7 and Firefox (with temlate wich I’ve corrected), search appears not on its place. And if I use template wich you gave me - works correct in Firerfox, but in IE7 and Opera - not on its place on the page. And shows 2 backgrounds (search.png) instead of one.
            Maybe its a problem with css?
            I  confused  huh


              Getting higher! | www.djabuzz.com
              • 2603
              • 104 Posts
              I found the decision. It is crossbrouser compartibility.
              I added:
              <!--[if IE]>
              <style type="text/css">
               .dd{
                   margin-top: 0px;
              }
              </style>
              
              
              <link rel="stylesheet" type="text/css" href="style/ie.css" />
              
              <![endif]-->
              
              <script type="text/javascript">
              <!--
              if(window.opera) {document.write('<link rel="stylesheet" type="text/css" .dd{
                   margin-top: 0px; href="style/opera.css" />');}
              //-->
              </script>




              Now in all brousers except Mozilla AS works and looks good.
              I’ve read that for Firefox you can only use css hacks, for example:

                 1.
                    /* Firefox 1 - 2 */ 
                    body:empty #element { color: red; } 
                    /* Firefox */ 
                    @-moz-document url-prefix() { 
                        #element { color: red; } 
                    }  


              But how to write this code (<style type="text/css">
              .dd{
              margin-top: 0px;
              }
              </style>) fo Mozilla I dont know.

              Do you have any ideas?
              Thanks a lot
                Getting higher! | www.djabuzz.com