I am using JS-Graph.IT to create a flowchart diagram and want to upon selection of a dropdown option, load a div with an altered version of the flowchart. Prior to loading AJAX content, the flow diagram works and shows boxes with arrows pointing from one box to another. After loading AJAX content, the connectors can't seem to be generated.
I found here that it is because of the need to clear the canvas before using the same canvas ids. SourceForge I tried following the instructions and copied the delCanvas function to the JS file, and calling the delCanvas function and reinitializing page objects in the header of the HTML page as such:
<script type="text/javascript">
jQuery(document).ready(function() {
JSGraphIt.initPageObjects();
$("body").delegate("#button1", "click", function() {
delCanvas('#mainCanvas');
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside17.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.initPageObjects();
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
}
});
});
});
</script>
Thanks in advance for your help!
HTML page:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Jquery for Slide Toggle -->
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../sf-homepage.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
}
</style>
<script type="text/javascript">
function onLoad()
{
JSGraphIt.initPageObjects();
}
jQuery(document).ready(function() {
$(".block").bind('click', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({ // ajax call starts
url: 'srvrside.php', // JQuery loads serverside.php
data: 'button=' + button, // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#content').html(''); // Clear #content div
$('#content').append(data);
}
});
return false; // keeps the page from not refreshing
}, this));
$("#button1").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside15.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
});
</script>
</head>
<body onload="onLoad();">
<select id="combo">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="button1" type="button" value="Click!" />
<div id="mainCanvas" class="canvas" style="float: left; background: #F8F8F8; width: 100%; height: 60%; border-top: #ccc 1px solid !important; border-bottom: #ccc 1px solid !important; margin: 0 !important; border-left: 0; border-right: 0; padding: 0 !important;">
<?php
***database connection details***
while($row = mysqli_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block" style="background: red;';
echo ' !important; left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
echo '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
echo $row['name'];
echo '</div>';
}
// Creating connectors
$result = mysqli_query($con,"SELECT * FROM dependencies");
while($row = mysqli_fetch_array($result))
{
echo '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
echo 'down_start">';
}
else {
echo 'right_start">';
}
echo '<img class="connector-end" src="arrow.gif">';
echo '<label class="middle-label">'.$row['desc'].'</label>';
echo '</div>';
}
// Closing database connection
mysqli_close($con);
?>
</div>
</body>
</html>
Server side PHP:
<?php
// Get value of clicked button
$button = $_GET['button2'];
$all = '';
***Database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div id="'.$row['id'].'_block" class="block" style="border: 3px solid #000; background: red;';
$all .= 'left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
$all .= '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
$all .= $row['name'];
$all .= '</div>';
}
***database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
$all .= 'down_start">';
}
else {
$all .= 'right_start">';
}
$all .= '<img class="connector-end" src="arrow.gif">';
$all .= '<label class="middle-label">'.$row['desc'].'</label>';
$all .= '</div>';
}
// Closing database connection
mysqli_close($con);
print json_encode($all);
?>
JS-Graph.IT JS
Related
So, I am using the AJAX Live Search PDO
I changed the backend-search to link the displayed words. The problem is if you click on the table that it doesn't take them to the link, but just inputs the text. I want to be able to link the entire row... so if they do not just click on the searched word.
I read over the document very thoroughly and did not find the answer.
I think it either is on the JavaScript on line 62 of search-form.php, or one the backend-search.php
I added
<a href=\"" . $row["link"] . "\"> to the backend-search file.
search-form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</body>
</html>
backend-search.php
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try{
if(isset($_REQUEST["term"])){
// create prepared statement
$sql = "SELECT * FROM countries WHERE name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST["term"] . '%';
// bind parameters to statement
$stmt->bindParam(":term", $term);
// execute the prepared statement
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close statement
unset($stmt);
// Close connection
unset($pdo);
?>
I would like when a person clicks anywhere on the row of the results that it goes to the link. Currently they have to click on the hyperlink
you can do that by making the 'a' tag fullwidth(display:block) or cover the 'p' tag with 'a', that will make the whole row clickable.
Here it's a rough example of what you should do. Run the snippet below to check the results (the second link google is not working, it's due to stackoverflow, but if you use on your side, it will work)
$(document).on("click", ".result p", (event) => {
var url =$(event.target).find("a").prop("href"); // getting the clicked element with event target.
window.location = url;
})
p {
width: 100%;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="result">
<p> stack</p>
<p> google</p>
</div>
I bind the event on the document for various reason. Yours links will be create with a script after the html (DOM) was loaded. Using document permit to bind the event "click" on all ".result p" element even if you add it in the dom after the loading of the page.
$(".result p").click(() => {
var url =$(this).find("a").prop("href");
window.location = url;
});
It will target the same element. But it will bind only to ".result p" element that already exist on your html. Note : with this way the clicked element is "this" and not "event.target", because in the previous event, "this" refers to "document".
I have a horizontal image gallery, the images for which is populated from a thumbnail folder. I want to create a utility where the clicked image always remain at the middle of the thumbnail image palette. Similar to the question asked here.
A minimal version of the code is as follows:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#loaded_img_panel {
border-top: solid 0.3em #f1ded9;
display:flex;
flex-wrap: nowrap;
overflow-x:auto;
padding: 10px 0 0 0;
}
#loaded_img_panel > ul > li {
list-style: none;
}
#loaded_img_panel ul li img {
display: inline;
width: 210px;
height:175px;
cursor: pointer;
}
#loaded_img_panel img.active{
border: 0.4em solid red;
padding : 5px;
}
#loaded_img_panel > caption {
display:block;
}
#loaded_img_panel img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<div class="loaded_img_panel" id="loaded_img_panel">
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
window.addEventListener('load', function(e) {
var matchLst = "thumb";
var project = "upload";
if (matchLst !== null && matchLst !=="") {
$.post("loadimages.php", { 'project' : project,'matchLst' : matchLst }, function(output){
$("#loaded_img_panel").html(output).show();
});
}
})
$(function(){
$('#gotoframe').change(function() {
var i = $(this).val() -1;
activeBook(i);
localStorage.setItem('clicki', i);
});
$('#loaded_img_panel').on('click', 'img', function() {
activeBook($(this).index());
});
function activeBook(i){
$('#loaded_img_panel img').removeClass('active');
var active = $('#loaded_img_panel img').eq(i).addClass('active');
var left = active.position().left;
console.log("firstleft: " + left);
var currScroll= $(".loaded_img_panel").scrollLeft();
var contWidth = $('.loaded_img_panel').width()/2;
var activeOuterWidth = active.outerWidth()/2;
left= left + currScroll - contWidth + activeOuterWidth;
$('.loaded_img_panel').animate( {
scrollLeft: left
},'slow');
}
});
</script>
loadimages.php
<?php
session_start();
$project = $_POST['project'];
$match = $_POST['matchLst'];
$_SESSION['matchLst'] = $match;
$tardir = "projects/" . $project . "/" . $match . "/thumb/*.jpg" ;
$imgdir = "projects/" . $project . "/" . $match . "/" ;
$files = glob($tardir);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $imgdir . $imgname;
$filnam = substr($filname, -5);
$filnam = rtrim($filnam);
echo '<ul class="item" id="item">';
echo '<li class="book"><img src="'.$img.'" id="thumbNails'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
?>
The php code renders the images from the folder. When I click on the image from the gallery, instead of providing the position of the image, I get static values till I use the scroll bar to select some of the images that were not visible onload. Those clicks returns the position values in negative. What I am trying to do is given as an example here.
I want to echo my image path using append and also using a variable to store the value but when i do it shows me error let me show you my code.
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/get_all_post"); ?>',
data: "id=" + lastID,
dataType: 'json',
beforeSend:function(html){
$('.load-more').show();
},
success:function(data){
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
$PostId=json[4]['id'];
for(i=0;i<5;i++ )
{
var post_status = json[i]['status'];
var status_image = json[i]['status_image'];
var multimage = json[i]['multimage'];
// alert($status_image);
$("#status_data").append('<div style=" margin: 20px 50px 0px 40px; "><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div>'+post_status+'</div></div>');
$("#status_data").append('<div style=" margin: 20px 50px 0px 40px; "><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div><img src='+<?php base_url('uploads/'.status_image); ?>+'></div></div>');
$('#status_image_data').attr('src',status_image);
}
$('.load-more').attr('lastID', $PostId);
}
});
}
});
});
</script>
now here the image is not showing its correct path even if i save the value of status_image in a variable let me show you that too
now here the path is showing itself in user but the images are stored in uploads how can i access that?
Correct
From
$("#status_data").append('<div style=" margin: 20px 50px 0px 40px; "><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div><img src='+<?php base_url('uploads/'.status_image); ?>+'></div></div>');
To
$("#status_data").append('<div style=" margin: 20px 50px 0px 40px; "><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div><img src="<?php echo base_url('uploads'); ?>/'+ status_image +'"></div></div>');
In short, you can't combine js variable with php,
From
<img src='+<?php base_url('uploads/'.status_image); ?>+'>
^
You will receive PHP Notice: Use of undefined constant status_image - assumed 'status_image'
To
<img src="<?php echo base_url('uploads'); ?>/'+ status_image +'">
I found an example online that shows how to build a auto-suggest text field by using javascript and PHP. Originally I started out by building my on version of the example, but after many failed attempts in getting it to work, I decided to see if the example itself even worked. I copied and pasted the example, changing only the database connection and the information regarding the database table. To my surprise the example still doesn't work! In my database I have a a table called Device and in that table there are three columns, ID,Device_type, and Price. Right now I have one value in the table and it's Apple iPhone 6 in the Device_type column, so when the program is working correctly, it should start to auto suggest Apple iPhone 6 as soon as I type "A" into the text box. Unfortunately, that doesn't happen, a dropdown box appears, as it should, but the box is blank and doesn't show any suggestions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List Suggestion Example</title>
<style type="text/css">
<!--
div.suggestions {
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
text-align: left;
}
-->
</style>
<script type="text/javascript">
var nameArray = null;
</script>
</head>
<body onclick="document.getElementById('divSuggestions').style.visibility='hidden'">
<?php
mysql_connect("hostname", "username", "password") OR DIE ('Unable to connect to database! Please try again later.');
mysql_select_db('DeviceRecycling');
$query = 'SELECT Device_type FROM Device';
$result = mysql_query($query);
$counter = 0;
echo("<script type='text/javascript'>");
echo("this.nameArray = new Array();");
if($result) {
while($row = mysql_fetch_array($result)) {
echo("this.nameArray[" . $counter . "] = '" . $row['Device_type'] . "';");
$counter += 1;
}
}
echo("</script>");
?>
<!-- --------------------- Input Box --------------------- -->
<table border="0" cellpadding="0" width="50%" align="center">
<tbody align="center">
<tr align="center">
<td align="left">
<input type="text" id="txtSearch" name="txtSearch" value="" style="width: 50%; margin-top: 150px; background-color: purple; color: white; height: 50px; padding-left: 10px; padding-right: 5px; font-size: larger;" onkeyup="doSuggestionBox(this.value);" />
<input type="button" value="Google It!" name="btnGoogleIt" style="margin-top: 150px; background-color: purple; color: white; height: 50px; font-size: larger;" onclick="window.location='http://www.google.com/#hl=en&source=hp&q=' + document.getElementById('txtSearch').value" />
</td>
</tr>
<tr align="center">
<td align="left">
<div class="suggestions" id="divSuggestions" style="visibility: hidden; width: 50%; margin-top: -1px; background-color: purple; color: white; height: 250px; padding-left: 10px; padding-right: 5px; font-size: larger;" >
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function doSuggestionBox(text) { // function that takes the text box's inputted text as an argument
var input = text; // store inputed text as variable for later manipulation
// determine whether to display suggestion box or not
if (input == "") {
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
} else {
document.getElementById('divSuggestions').style.visibility = 'visible'; // shows the suggestion box
doSuggestions(text);
}
}
function outClick() {
document.getElementById('divSuggestions').style.visibility = 'hidden';
}
function doSelection(text) {
var selection = text;
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
document.getElementById("txtSearch").value = selection;
}
function changeBG(obj) {
element = document.getElementById(obj);
oldColor = element.style.backgroundColor;
if (oldColor == "purple" || oldColor == "") {
element.style.background = "white";
element.style.color = "purple";
element.style.cursor = "pointer";
} else {
element.style.background = "purple";
element.style.color = "white";
element.style.cursor = "default";
}
}
function doSuggestions(text) {
var input = text;
var inputLength = input.toString().length;
var code = "";
var counter = 0;
while(counter < this.nameArray.length) {
var x = this.nameArray[counter]; // avoids retyping this code a bunch of times
if(x.substr(0, inputLength).toLowerCase() == input.toLowerCase()) {
code += "<div id='" + x + "'onmouseover='changeBG(this.id);' onMouseOut='changeBG(this.id);' onclick='doSelection(this.innerHTML)'>" + x + "</div>";
}
counter += 1;
}
if(code == "") {
outClick();
}
document.getElementById('divSuggestions').innerHTML = code;
document.getElementById('divSuggestions').style.overflow='auto';
}
</script>
</body>
</html>
In my attempt to trouble shoot, I have discovered a few things. First off the connection string to the database is good, and that is not the problem. In an attempt to further check whether it was the database query that was causing issues, I have discovered that if I remove the echo("<script type='text/javascript'>") from the PHP portion of the code, that it will actually print Apple iPhone 6 at the top of the page, which tells me the query itself is actually working. Obviously though, by removing the javascript tag the program still doesn't work because it should only be displaying the results as you type something that matches what is in the database.
hi maybe you have a error on your code
this is a little example
for get the result and show
autocomplete.php
<?php
$connection = mysqli_connect("localhost","username","password","employee") or die("Error " . mysqli_error($connection));
//fetch department names from the department table
$sql = "select department_name from department";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));
$dname_list = array();
while($row = mysqli_fetch_array($result))
{
$dname_list[] = $row['department_name'];
}
echo json_encode($dname_list);
?>
for view and show the result
demo.php
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Textbox Demo | PHP | jQuery</title>
<!-- load jquery ui css-->
<link href="path/to/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- load jquery library -->
<script src="path/to/jquery-1.10.2.js"></script>
<!-- load jquery ui js file -->
<script src="path/to/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var availableTags = <?php include('autocomplete.php'); ?>;
$("#department_name").autocomplete({
source: availableTags,
autoFocus:true
});
});
</script>
</head>
<body>
<label>Department Name</label></br>
<input id="department_name" type="text" size="50" />
</body>
</html>
i preffer use jquery
donwload jquery
enter link description here
result
I have a div with the name "frined-replace" and an autosuggestion field. When the page loads the contents inside the frined-replace div shown. when we write something to the input field to search then the frined-replace is replaced with the data of the autosuggestion. Now the question is that when i write something the frined-replace div is replaced by the data and when i erase the input field characters which i have entered then i can't reshow the frined-replace div elements.
frined-replace:
<li style="float:left; width:240; margin:2px 0 4px 2px; border-bottom:1px solid #CCC; background-color:#f90; height:30px;">
<a href="<?php echo $config->baseUrlTs;?>messages?user_id=<?php echo $myusrid;?>" >
<img src="<?php echo $config->baseUrl;?><?php echo $imgs;?>" alt="" width="26" height="26" />
<font style="font-weight:bold; color:white"><?php //global $config;
echo $myusrname;
?></font></a>
</li>
and this is the autosuggestion part:
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="")
{
$("#erase").empty();
return;
}
$.ajax({
url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+$(this).val()+"&user_id="+<?php echo $userid;?>,
context: document.body,
success: function(data){
$("#frined-replace").replaceWith(data);
//$("#search").val('');
//$('#search').val('').empty();
}
});
});
I just made a snippet code which show a possible answer
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="") {
$("#frined-replace").html($("#frined-replace-bck").html());
$("#frined-replace-bck").remove();
$("#erase").empty();
return;
}
if (!$('#frined-replace-bck').length) {
var backup = $("#frined-replace").clone();
backup.prop('id', 'frined-replace-bck');
backup.css('display', 'none')
$("#frined-replace").before(backup);
}
//Replace with your ajax call
$("#frined-replace").html('<li>' + qr + '</li>');
//$("#search").val('');
//$('#search').val('').empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input id="search" type="text"/>
<div id="frined-replace">My initial content</div>
</div>
I fixed it. I made another div with display to none after i show the data in that div instead of replacing it with frined-replace div.
<style type="text/css">
#loadsearch
{
display:none;
width: 250px;
position: absolute;
margin-top: -8px;
height: 100px;
z-index: 1;
margin-left: 2px;
height:auto;
}
</style>
<div id="loadsearch">
</div>
In the jquery
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="")
{
$("#erase").empty();
$("#loadsearch").hide();
return;
}
$("#loadsearch").empty();
$.ajax({
url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+qr+"&user_id="+<?php echo $userid;?>,
context: document.body,
success: function(data){
$("#loadsearch").show();
$("#loadsearch").append(data);
//Here i am showing the data inthe div instead of replacing
},
});
});