JavaScript - Paging Webservice Search Results

Hey there everyone.

I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it.

I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear.

I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes.

For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear.

like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know.

thanks

Hi all!,

I'm having a few challenges trying to create a link to a "new" search from a database search results page. This maybe a better example:

My goal is:
To allow website visitors to searches site for i.e. "Dog Collars", the results page lists every "dog collar" and store that carries "dog collars" (in database).

At that point I would like to have links (on the results page) to all brands of "dog collars" and stores that carry "dog collars".

I would like to then be able to click on a "brand" (text link) of "dog collars" and then generate a new results page that lists all store and vendor information.

thank you in advance!

Erick

p.s. this is a link to a site that has a similar featu http://69.0.211.58/~pubexpress/ami/html/index.html

I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url.

I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help.
Code:

searchForms = new Ext.TabPanel({
    fullscreen: true,
    title: 'Search',
    displayField: 'text',
    sto  searchForm,
    iconCls: 'search',  
    items: [{
        id: 'searchSubmit',
        xtype: 'form',
        standardSubmit : true,
        scroll: 'vertical',
        items: [{
            xtype: 'fieldset',
            title: 'Keywords',
            defaults: {
                // labelAlign: 'right'
                labelWidth: '35%'
            },
            items: [{
                xtype: 'textfield',
                name: 'keywords',
             id: 'keywords',
                placeHolder: 'EG: Music, TV',
                autoCapitalize : true,
                required: true,
                useClearIcon: true
            }]
        }, {
            xtype: 'fieldset',
            title: 'Advanced Search',
            items: [{
                    xtype: 'selectfield',
                name: 'genre',
             id: 'genre',
                label: 'Genre',
                options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
                }]
            }, {
                xtype: 'selectfield',
                name: 'media',
             id: 'media',
                label: 'Media',
                options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
                }]
            }]
        }, {
            layout: 'vbox',
            defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
            items: [{
                text: 'Search',
                 ui: 'confirm',
                scope: this,
                hasDisabled: false,
                handler: function(){
                    searchForms.submit({
                    url: 'search.php'
                });
                }
            }, {
                text: 'Reset',
                ui: 'decline',
                handler: function(){
                    searchForms.reset();
                }
            }]
        }]
    }]
});

I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all.

I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file.

I've also tried to load the file in the app seperately by using:

Code:

 
Ext.regModel('mobile', {
    fields: [
       {name: 'text',        type: 'string'}
    ]
});

var searchForm = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'search.php?keywords=test',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search'

I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working

I don't know if this is of help, but the main javascript file is:

Code:

var tabPanel;

var homePanel = new Ext.Panel({
    title: 'Home',
    iconCls: 'home',
    fullscreen: true,
    scroll:{direction:'vertical',threshold:7},
    items: [{
        html: '<center><p>Home</p></center>'    
    }]
});

var servicePanel = new Ext.Panel({
    title: 'Services',
    iconCls: 'team',
    fullscreen: true,
    items: [{
        html: '<center>Please choose a service</center>'    
    }]
});

var searchPanel = new Ext.Panel({
    title: 'Search',
    iconCls: 'search',
    fullscreen: true,
    items: [{
        html: '<center>Search</center>' 
    }]
});

var feedtabpanel = new Ext.Carousel({
    title: 'More',
    iconCls: 'more',
    fullscreen: true,
    sortable  : true,
    xtype:'panel',
    scroll:{direction:'vertical',threshold:7},
    items: [
        {
            title: 'Contact',
            html : '<center><h1>Contact Us</h1></center>',
        },
        {
            title: 'Feedback',
            html : '<center><h1>Let us know what you think<h1></center>',
        },
        {
            title: 'Tell a friend',
            html : '<center><h1>Tell your friends how much you love this app</h1></center>',
        }
    ]
});


searchForms = new Ext.TabPanel({
        fullscreen: true,
        title: 'Search',
        displayField: 'text',
        sto  searchForm,
        iconCls: 'search',  
        items: [{
            id: 'searchSubmit',
            xtype: 'form',
            standardSubmit : true,
            scroll: 'vertical',
            items: [{
                xtype: 'fieldset',
                title: 'Keywords',
                defaults: {
                    // labelAlign: 'right'
                    labelWidth: '35%'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'keywords',
                 id: 'keywords',
                    placeHolder: 'EG: Music, TV',
                    autoCapitalize : true,
                    required: true,
                    useClearIcon: true
                }]
            }, {
                xtype: 'fieldset',
                title: 'Advanced Search',
                items: [{
                        xtype: 'selectfield',
                    name: 'genre',
                 id: 'genre',
                    label: 'Genre',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Country',
    value: '1'
    text: 'Sci-Fi',
    value: '2'
    text: 'Western',
    value: '3'
                    }]
                }, {
                    xtype: 'selectfield',
                    name: 'media',
                 id: 'media',
                    label: 'Media',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Music',
    value: '1'
    text: 'TV',
    value: '2'
    text: 'Movie',
    value: '3'
                    }]
                }]
            }, {
                layout: 'vbox',
                defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
                items: [{
                    text: 'Search',
                     ui: 'confirm',
                    scope: this,
                    hasDisabled: false,
                    handler: function(){
                        searchForms.submit({
                        url: 'search.php'
                    });
                    }
                }, {
                    text: 'Reset',
                    ui: 'decline',
                    handler: function(){
                        searchForms.reset();
                    }
                }]
            }]
        }]
    });

Ext.regModel('mobile', {
    fields: [
        {name: 'text',        type: 'string'}
    ]
});

var searchForm = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'search.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var store = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'areas.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var nestedList = new Ext.NestedList({
    fullscreen: true,
    title: 'Location',
    displayField: 'text',
    sto  store,
    iconCls: 'locate',  
});

nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
    var store      = subList.getStore(),
        record     = store.getAt(subIdx),
        recordNode = record.node,
        title      = nestedList.renderTitleText(recordNode),
        card, preventHide, anim;

    if (record) {
        card        = record.get('card');
        anim        = record.get('animation');
        preventHide = record.get('preventHide');
    }

    if (card) {
        tabPanel.setCard(card, anim || 'slide');
        tabPanel.currentCard = card;
    }
});

var services = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'subcats.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var servicesList = new Ext.NestedList({
    fullscreen: true,
    title: 'Services',
    displayField: 'text',
    sto  services,
    iconCls: 'team',    
});

servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
    var store      = subList.getStore(),
        record     = store.getAt(subIdx),
        recordNode = record.node,
        title      = servicesList.renderTitleText(recordNode),
        card, preventHide, anim;

    if (record) {
        card        = record.get('card');
        anim        = record.get('animation');
        preventHide = record.get('preventHide');
    }

    if (card) {
        tabPanel.setCard(card, anim || 'slide');
        tabPanel.currentCard = card;
    }
});

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',

    onReady: function() {

        tabPanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'dark',
            animation: {
                type: 'cardslide',
                cover: true
            },
            items: [
                homePanel,
                nestedList,
                servicesList,
                searchForms,
                feedtabpanel
            ]
        }); 
    }
})

I'd like to create two dropdown (select) lists with a search button next to it so if the user chooses A in the first list and C in the second list and clicks 'search', the results return items that relate to both A and C.

Practical Example:

User chooses "London" in the first dropdown and "Middle Schools" in the second.

Result returns the middle schools I've listed for London.

How can this be done or if it can't, is there another way to achieve what I want?

-edit- I found what I wanted he http://www.alistapart.com/d/complexd...ts&de=Pancakes

However, now my question is what would I put in for the form "action" to populate the results?

Please try a search on my webpage (search box is located at top of sidebar on the left): http://www.americanchic.net/help

Here is the code implemented on the search results page:

Code:

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 500;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

The original code (from my Google custom search control panel) included a FrameWidth of 600 and I changed it to 500 but it didn't make a difference. Any ideas?

I am developing simple quiz page using php and JavaScript. i have 24 questions in 6 pages which i was loaded from a xml file. i just want to do the validation page by page. those pages loading from JavaScript paging functions.

Now the validations happen to all 24 questions. i need to do the validations only in the current page then the other page..

here is a sample link which i want to develop...(the quiz thing)
http://www.careerpath.com/career-tests/career-quiz/
please help me...

Code:

<table border=0 width=520px>
  <tr>    
     <td > 
     <div style=" border:0px solid gray;">
        <br>
       <div style="width:400px;height:52px;background:url(images/head-careerpath-quiz-test.gif ) no-repeat;valign:middle;margin-left:25px;line-height:52;"></div>
          <div style="width:500px;padding-left:10px;"> 
             <fieldset>
          <form id="formID" class="formular" action="result.php" method="get"> 
              <b>Getting Started</b> <br> <br>
              There are 24 pairs of statements below. As you read each pair, click the one statement in each pair that has the most appeal for you. As you select, assume that each choice is equal in pay, prestige, and challenge. If you are uncertain of a job title, select the one that has the most appeal for you. 
              <br><br><div style="width:470px;height:31px;valign:middle;line-height:31px; color:#FFF;background:url(images/question_header_single_test.gif) no-repeat;">&nbsp;&nbsp;&nbsp;<b>Please respond to the following statements.</b>
              </div>
       <div style="width:470px; background:#ece6f8;">    
        <table id="results" border=0>
            <tr>
                <th></th>
                <th></th>
            </tr>
 <?php

                     // set name of XML file
              $file = "question.xml";

                   // load file
              $xml = simplexml_load_file($file) or die ("Unable to load XML file!");
                     
             ?>       
                     
           
           
           
              <?php foreach ($xml->question as $section) {$quesionindex++; ?>
              <tr> 
              
                <td valign="top"> <?php echo $section->qno.".";?></td>
                 
                  <td valign="top"> 
                      <input class="validate[required] radio" type='radio' id="answer1_<?php echo $section->qno;?>" name="<?php echo $section->qno;?>" value='0' ><?php echo $section->answer1->answer;?> <br />
                      <input class="validate[required] radio" type='radio' id="answer2_<?php echo $section->qno;?>" name="<?php echo $section->qno;?>" value='1'><?php echo $section->answer2->answer;?>
                  </td>
                   
                                  
                </tr> 
            <?php   }  ?>

				
        </table>
		

        <br><br>
        <div id="pageNavPosition"></div>
        <br>
        <div><input class="submit" type="submit" /><input type="reset" /></div>
        </div>
    </form>
    
    <script type="text/javascript"><!--
        var pager = new Pager('results', 6); 
        pager.init(); 
        pager.showPageNav('pager', 'pageNavPosition'); 
        pager.showPage(1);
    //--></script>
               
              
    
             
             </fieldset>
               </div>
             
            </div>
        
        
       

        </div>
     </td>
     
  </tr>

</table>

here is the javascript i am using for paging
Code:

function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;
    
    this.showRecords = function(from, to) {        
        var rows = document.getElementById(tableName).rows;
        // i starts from 1 to skip table header row
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to)  
                rows[i].style.display = 'none';
            else
                rows[i].style.display = '';
        }
    }
    
    this.showPage = function(pageNumber) {
    	if (! this.inited) {
    		alert("not inited");
    		return;
    	}

        var oldPageAnchor = document.getElementById('pg'+this.currentPage);
        oldPageAnchor.className = 'pg-normal';
        
        this.currentPage = pageNumber;
        var newPageAnchor = document.getElementById('pg'+this.currentPage);
        newPageAnchor.className = 'pg-selected';
        
        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
        this.showRecords(from, to);
    }   
    
    this.prev = function() {
        if (this.currentPage > 1)
            this.showPage(this.currentPage - 1);
    }
    
    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }                        
    
    this.init = function() {
        var rows = document.getElementById(tableName).rows;
        var records = (rows.length - 1); 
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }

    this.showPageNav = function(pagerName, positionId) {
    	if (! this.inited) {
    		alert("not inited");
    		return;
    	}
    	var element = document.getElementById(positionId);
    	var i=1;
    	var pagerHtml = '<span onclick="' + pagerName + '.prev();i--;" class="pg-normal"> &#171 Prev </span> | ';
        for (var page = 1; page <= this.pages; page++) 		
			
		  pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + '' + '</span> ';
        
		 //pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + '' + '</span> ';
		  pagerHtml += '<input value="Continue" type="submit" onclick="'+pagerName+'.next();" class="pg-normal"/> '; 
		
             
        element.innerHTML = pagerHtml;
    }
}

hi, At the moment when I select a county from the dropdown list, they show in the <div id="ajaxDiv"> - HttpRequest is loading apage, I'd like to do this with the pagination?!

JavaScript
Code:

function ajaxFunction(){
	var townRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		townRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			townRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				townRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	townRequest.onreadystatechange = function(){
		if(townRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = townRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var rsCounty = document.getElementById('rsCounty').value;
	var rsTown = document.getElementById('rsTown').value;
	var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&rsTown=" + rsTown;
	//Add the following line
	townRequest.open("GET", "http://www.mypubspace.com/townpubs.php" + queryString, true);
	townRequest.send(null);
}

function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var rsCounty = document.getElementById('rsCounty').value;
	var rsTown = document.getElementById('rsTown').value;
	var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&rsTown=" + rsTown;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true);
	countyRequest.send(null);
}

form shows list of counties:
Code:

<form name="form3" method="post" action="">
			  <!--<select name="menu2" onChange="MM_jumpMenu('parent',this,0)" class="textbox">-->
			  <select name="menu2" onChange="countyFunction();" class="textbox" id="rsCounty">	
				 <option value="">Search by County...</option>
				<? 					
				$county_pubs = mysql_query("SELECT DISTINCT RSCOUNTY, COUNT(PUBID) As PubCount1 FROM pubs GROUP BY RSCOUNTY  ORDER BY RSCOUNTY ASC")
				?>

					<?php while($row1 = mysql_fetch_array($county_pubs))
					{
					echo '<option value="'.$row1['RSCOUNTY'].'">'.$row1['RSCOUNTY'].'&nbsp;('.$row1['PubCount1'].')</option>'; 
					}
					?>
			</select>
			<input type='hidden' id='name' />
<input type='hidden' id='rsCounty' />
<input type='hidden' id='rsTown' />

		  </form>

where I place: <div id="ajaxDiv"></div> this shows the countypubs.php page

countypubs.php page
Code:

<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
	//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	//Select Database
mysql_select_db($dbname) or die(mysql_error());

				if ($msg <>"") 
					{
					echo "<div class=\"ui-widget\">
				<div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\"> 
					<p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span> 
					<strong>Alert:</strong> $msg</p>
				</div>
			</div>"; 
					}
	$county = $_GET["rsCounty"];
	echo $county .'<br />';
	$tableName="pubs";		
	$targetpage = "default.php"; 	
	$limit = 20; 
	$query = "SELECT COUNT(*) as num FROM $tableName WHERE rsCounty = '$county'";
	$total_pages = mysql_fetch_array(mysql_query($query));
	$total_pages = $total_pages['num'];
	
	$stages = 3;
	$page = mysql_escape_string($_REQUEST['page']);
	if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) {
      $page = (int) $_GET['page'];
      $start = ($page - 1) * $limit;
}else{
      $start = 0;   
}
	
    // Get page data
	$query1 = "SELECT * FROM $tableName WHERE rsCounty = '$county' ORDER BY rsPubName Asc LIMIT $start, $limit";
	$result = mysql_query($query1);
	
	// Initial page num setup
	if ($page == 0){$page = 1;}
	$prev = $page - 1;	
	$next = $page + 1;							
	$lastpage = ceil($total_pages/$limit);		
	$LastPagem1 = $lastpage - 1;					
	
	
	$paginate = '';
	if($lastpage > 1)
	{	
		$paginate .= "<span class='paginate'>";
		// Previous
		if ($page > 1){
			$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
		}else{
			$paginate.= "<span class='disabled'>previous</span>";	}
			

		
		// Pages	
		if ($lastpage < 7 + ($stages * 2))	// Not enough pages to breaking it up
		{	
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page){
					$paginate.= "<span class='current'>$counter</span>";
				}else{
					$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
			}
		}
		elseif($lastpage > 5 + ($stages * 2))	// Enough pages to hide a few?
		{
			// Beginning only hide later pages
			if($page < 1 + ($stages * 2))		
			{
				for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";		
			}
			// Middle hide some front and some back
			elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";		
			}
			// End only hide early pages
			else
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
			}
		}
					
				// Next
		if ($page < $counter - 1){ 
			$paginate.= "<a href='$targetpage?page=$next'>next</a>";
		}else{
			$paginate.= "<span class='disabled'>next</span>";
			}
			
		$paginate.= "</span>";		
	
	
} echo 'Pubs found: '.$total_pages;
 // pagination
 echo $paginate;
?>
<div id="ajaxCountylist">
<div id="accordion">
<?php 
 

		while($row = mysql_fetch_array($result))
		{
		
		echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />';
		echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>';
		echo '</div></div>';
		
		}
		 echo '<span style="float:right;">'.$paginate.'</span>';
	?>
</div>
</div>

how do I do the same as what I am doing here to my pagination?

here is the URL:

http://www.mypubspace.com

1)I want to make a http request to a url lets say http://test1.com/info this will give me xml
2)I want to convert this xml from 1 to json lets say json 1
3)Now I make a rest request to url lets say http://test2.com/myweb this returns a json lets say json 2
json 1

[

{
"id": "123",
"testname": "test123",
"name": "John Doe",
"active": true,
"type": "test6"
}

{
"id": "456",
"testname": "test564",
"name": "Ship Therasus",
"active": true,
"type": "test7"
}

.... some 100 entries
]
and json 2 some like below

[
{
"id": "123",
"country": "USA",
"state": "KA",
"age": 24,
"group": "g1"
}

{
"id": "456",
"country": "UK",
"state": "MA",
"age": 28,
"group": "G2"
}

...... 100 entries
]
Now Id is the constant thing between json1 and json2 I want to make a resultant json something like below lets call json3.I want to match the id and get country and state from json2 and append to json1

[
{
"id": "123",
"testname": "test123",
"name": "John Doe",
"active": true,
"type": "test6",
"country":"USA",
"state":"KA"
}

{
"id": "456",
"testname": "test564",
"name": "Ship Therasus",
"active": true,
"type": "test7",
"country":"UK",
"state":"MA"
}
]
Now wat i tried for 1 and 3 but for 2 dont know wat to do and to compare and combine I am not sure wat to do If any help will be greatful

function fun()
{
var data="hello";
$.post('http://localhost/ws/service.asmx/HelloWord',{},function(response)
{ data = response;
}).error(function(){
alert("Sorry could not proceed");
});

return data;
}

I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this?

btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function.

hi
i am doing a project and now i am try to work on paging, however i am stuck. I want to put in a list of links of website in the itemfilereadstore. So when show, i want to be able to click on any one of the link in the page, which will bring you to the selected website

reference guide:
http://dojotoolkit.org/reference-gui...agination.html

Hello,

very simple code block is below. Javascript functions that call web service methods are working when I called them between form tags. But they are not working at the beginning of the page.
I specified lines that are not working below.

Please help.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">

function GetMyName() {
WebService1.GetName(onNameSuccess, onNameFailure);
}
function onNameSuccess(result) {
return result;
}
function onNameFailure(result) {
alert("There is an error");
}

function GetMySurname() {
WebService1.GetSurname(onSurnameSuccess, onSurnameFailure);
}
function onSurnameSuccess(result) {
return result;
}
function onSurnameFailure(result) {
alert("There is an error");
}

//JAVASCRIPT FUNCTIONS ARE NOT WORKING HERE
//THESE TWO LINES ARE NOT WORKING

var name = GetMyName();
var surname = GetMySurname();

</script>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService1.asmx" />
</Services>
</asp:ScriptManager>

//JAVASCRIPT FUNCTIONS ARE WORKING HERE

</form>
</body>
</html>

view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand.

click View all 3 comments and it will show all comments
then click more button
try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top.

http://www.runningprofiles.com/membe...ll_Script.php#

Why is this??

What do i need to do to fix it?

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>9lessons Applicatio Demo</title>
<link href="frame.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
 


<script type="text/javascript">
$(function() 
{
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}

return false;
});
});




$(function() 
{
$(".view_comments").click(function() 
{
var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "../viewajax.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});



$(function() {

$(".comment_button").click(function() {

var element = $(this);
   
    var boxval = $("#content").val();
    
    var dataString = 'content='+ boxval;
    
    if(boxval=='')
    {
    alert("Please Enter Some Text");
    
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');
$.ajax({
        type: "POST",
  url: "update_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
 
  $("ol#update").prepend(html);
  $("ol#update li:first").slideDown("slow");
  
   document.getElementById('content').value='';
   $('#content').value='';
   $('#content').focus();
  $("#flash").hide();
  
    
    $("#expand_url").oembed(boxval);
    
  }
 });
}
return false;
    });


//comment slide
$('.comment').live("click",function() 
{

var ID = $(this).attr("id");
$(".fullbox"+ID).show();
$("#c"+ID).slideToggle(300);

return false;
});


//commment Submint

$('.comment_submit').live("click",function() 
{

var ID = $(this).attr("id");

var comment_content = $("#textarea"+ID).val();
    
    var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID;
    
    if(comment_content=='')
    {
    alert("Please Enter Comment Text");
    
    }
    else
    {
    
   
       $.ajax({
        type: "POST",
  url: "comment_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
  
 
  $("#commentload"+ID).append(html);
    document.getElementById("textarea"+ID).value='';
   
   $("#textarea"+ID).focus();
  
  }
 });
    
    
    }

return false;
});

// Delete Wall Update

$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
    jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', 
                
                    function(r) {
                    
                    
                    if(r==true)
                    {
$.ajax({
        type: "POST",
  url: "delete_comment.php",
   data: dataString,
  cache: false,
  success: function(html){
 
 $("#comment"+ID).slideUp();
    
  }
 });
}
return false;
});




return false;

});
});


</script>


<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.update_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
    {
    text-decoration:none;
    color:#d02b55;
    }
    a:hover
    {
    text-decoration:underline;
    color:#d02b55;
    }
    *{margin:0;padding:0;}
    
    
    ol.timeline
    {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;}
    .delete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .cdelete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .feed_link
    {
    font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px
    }
    .comment
    {
    color:#0000CC; text-decoration:underline
    }
    .delete_update
    {
    font-weight:bold;
    
    }
    .cdelete_update
    {
    font-weight:bold;
    
    }
    .post_box
    {
    height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3;  width:499px;padding:.7em 0 .6em 0;line-height:1.1em;
    
    }
    #fullbox
    {
    margin-top:6px;margin-bottom:6px; display:none;
    }
    .comment_box
    {
        display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px;  height:50px;
    
    }
    .comment_load
    {
      margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF;
    
    }
    .text_area
    {
    width:290px;
    font-size:12px;
    height:30px;
    }
    #expand_box
    {
    margin-left:90px;
    margin-top:5px;
    margin-bottom:5px;
    }
    embed
    {
        width:200px;
        height:150px;

    }
*{ margin:0px; padding:0px }
ol.timeline
{ 
list-style:none
}
ol.timeline li
{ 
position:relative;
border-bottom:1px #dedede dashed; 
padding:8px; 
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
    
</style>
</head>

<body>
<?php include '../../../settings.php'; ?>

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>


<div align="left">
<form  method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">

<tr><td align="left"><div align="left">
<h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="submit"  value="Update"  id="v" name="submit" class="comment_button"/>
</td>

</tr>

</table>
</form>

</div>
<div style="height:7px"></div>
<div id="flash" align="left"  ></div>



<ol  id="update" class="timeline">
</ol>
<ol class="timeline" id="updates">
<div id='old_updates'>
<?php
$small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5");
while($r=mysql_fetch_array($small))
{ 
$id=$r['msg_id'];
$msg=$r['message'];

?>


<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>



<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php 
}


?>


<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">




<table width="80%">


<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{ 
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comments; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
        
</tr> 
</table><br />
    </td>
  </tr>








</div>
<?php } ?>
</table>
</div>



<?php } ?>
</ol>
<div id="more<?php echo $id; ?>" class="morebox">
<a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a>
</div>








</div>


</td>
</tr>
</table>
</div>
</body>
</html>


if it help here is ajax_more.php

PHP Code:
      <?php
include("../../../settings.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);

$small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2");
while($r=mysql_fetch_array($small))
{ 
$id=$r['msg_id'];
$msg=$r['message'];

?>


<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>



<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php 
}


?>


<div class="comments" id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">




<table width="50%">


<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{ 
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comments; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
        
</tr> 
</table><br />
    </td>
  </tr>








</div>
<?php } ?>
</table>
</div>



<?php } ?>



<div id="more<?php echo $id; ?>" class="morebox">
<a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a>
</div>
<?php
}
?>

In this case, Let's take Google Search as example:

The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question.

This code is used in Fiddler(It's a Man-in-the-middle proxy)

Code:

if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
    var str = oSession.fullUrl;
    var sAppend = "test1+test2+test3";
    if (!oSession.uriContains(sAppend))
    {
        oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
    }
}

For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3

Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL.

Basically, how do I make it wait until I click the submit/search button

Thank you.

Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id?

Also, Any other methods besides Onsubmit()?

Hi Everyone! I have a website that I'm designing where I have the need to search multiple sites at specific times. By this I mean that In some cases, we would want to search only the internet using google, or only search the site that I've created (which currently uses the jse_search.js solution), or only our company's website.

I currently have four different search boxes that will search either the internet, the internal site, a separate internal site, or a third-party website, which all working fine. The problem is that the search boxes take up quite a bit of space, and the layout is becoming cumbersome. Is there a way in Javascript I could use a single search box and a drop-down list to select which method to use? The code I'm currently using is below. With the exception of the Google search function, I've modified some of the site names to general site names and paths to preserve the company's anonymity:

Code in the <head> tag:

Code:

<script language="JavaScript1.3" type="text/javascript" src="jse_form.js">

</script>

Code in the <body> tag:

Code:

<!--Begin Internal Site Search 1!-->

<div>
 <p style="text-align: center;">
 <table border="0" cellpadding="0">
  <tr><td><form name="jse_Form" onsubmit="search_form(jse_Form);return false">
   <input type="text" name="d" size="30">
  </tr></td>
  <tr><td>
   <input type="button" value="Internal Site Search 1" onclick="search_form(jse_Form)">
   </form>
  </tr></td>
 </table>


<!--End Internal Site Search 1!-->

<!--Begin Internal Site Search 2!-->

<div>
 <p style="text-align: center;">
 <table border="0" cellpadding="0">
  <tr><td>
  <!--webbot bot="Search" S-Index="all" S-Fields S-Text="Search for:" I-Size="20" S-Submit="Start Search" S-Clear="Reset" S-TimestampFormat="%m/%d/%Y" TAG="BODY" b-useindexserver="1" startspan -->
  <form action="http://sitesearch2.idq" method="POST"><input type="text" name="UserRestriction" size="30" value>
  </tr></td>
  <tr><td style="text-align: center;">
  <input type="submit" value="Internal Site Search 2"></form>
  </form>
  <!--webbot bot="Search" i-checksum="4210" endspan -->
  </td></tr>
 </table>
</div>

<!--End Internal Site Search!-->

<!--Begin Google Search!-->

<form method="get" action="http://www.google.com/search">
 <div>
 <p style="text-align: center;">
  <table border="0" cellpadding="0">
   <tr><td>
    <input type="text"   name="q" size="30" maxlength="233" value="" />
   </tr></td>
   <tr><td align="center">
   <input type="submit" value="Google Search" /></td></tr>
  </table>
 </div>
</form>

<!--End Google Search!-->

<!--Begin Third Party Search!-->

<form id="keywordSearchForm" method="get" action="http://www.site3.html">
 <div>
 <p style="text-align: center;">
  <table border="0" cellpadding="0">
   <tr><td>
    <input class="input" type="text" name="keyword" size="30" />
   </tr></td>
   <tr><td align="center">
    <input type="hidden" name="origin" value="keywordsearch" /><input id="go" class="button" tabindex="0" type="submit" value="Third Party Search" />
   </td></tr>
  </table>
 </div>
</form>

<!--End Third Party Site Search!-->