jquery ui autocomplete with multiple fields - javascript

this code works just fine, but the second input field does not show images appearing with the text suggestions. I would appreciate if someone could take a look and let me know what needs to be changed in the js for it to work.
Example queries: clinton, bush
you can see the script here http://predcast.com/include/autoc/jqui/test2.php
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Autocomplete: Custom HTML in Dropdown</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.loading {
display: none;
width: 16px;
height: 16px;
background-image: url(/img/loading.gif);
vertical-align: text-bottom;
}
#autocomplete.ui-autocomplete-loading ~ .loading {
display: inline-block;
}
.ui-menu-item {
padding:1px;
margin:1px;
}
.ac-m {
height:block;
overflow:auto;
padding:2px 2px 2px 2px;
}
.ac-img {
max-width:30px;
float:left;
margin:2px 2px 2px 2px;
}
.ac-title {
margin:1px;
font-size:14px;
}
.ui-autocomplete {
margin:1px;
}
</style>
</head>
<body>
<form action="http://www.test.com/">
<input class="autocomplete" type="text" placeholder="Option 1" name="e1">
<input class="autocomplete" type="text" placeholder="Option 2" name="e2">
<span class="loading"></span>
</form>
<script>
/*
* jQuery UI Autocomplete: Custom HTML in Dropdown
* http://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html
*/
$(function () {
$('.autocomplete').autocomplete({
delay: 500,
minLength: 3,
source: function (request, response) {
$.getJSON("http://predcast.com/include/autoc/jqui/jsond.php", {
q: request.term,
}, function (data) {
var array = data.error ? [] : $.map(data.movies, function (m) {
return {
label: m.title,
year: m.year,
img: m.img,
};
});
response(array);
});
},
focus: function (event, ui) {
event.preventDefault();
},
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var $a = $("<div class='ac-m'></div>");
if (item.img) {
$("<span></span>").addClass(item.icon).appendTo($a).append("<img src='" + item.img + "' border='0' class='ac-img' />");
}
$("<span class='ac-title'></span>").text(item.label).appendTo($a);
return $("<li></li>").append($a).appendTo(ul);
};
});
</script>
</body>
</html>

The problem is related to the way you are defining the _renderItem extension point.
In your code, you are redefining the jquery-ui autocomplete _renderItem function only for your first widget instance, so the _renderItem for your second autocomplete instance is the default one defined in the jquery-ui code.
You are initializating the autocomplete for your 2 inputs with this $('.autocomplete').autocomplete({ ...}) then you get the first widget instance with this instruction .data("ui-autocomplete") and then redefine the _renderItem function for this instance only.
You can define it for all your instances like this:
// Create your widget instances
$('.autocomplete').autocomplete({
delay: 500,
minLength: 3,
source: function (request, response) {
$.getJSON("http://predcast.com/include/autoc/jqui/jsond.php", {
q: request.term,
}, function (data) {
var array = data.error ? [] : $.map(data.movies, function (m) {
return {
label: m.title,
year: m.year,
img: m.img,
};
});
response(array);
});
},
focus: function (event, ui) {
event.preventDefault();
}
});
// Then redefine the _renderItem for each instance
$('.autocomplete').each(function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
var $a = $("<div class='ac-m'></div>");
if (item.img) {
$("<span></span>").addClass(item.icon).appendTo($a).append("<img src='" + item.img + "' border='0' class='ac-img' />");
}
$("<span class='ac-title'></span>").text(item.label).appendTo($a);
return $("<li></li>").append($a).appendTo(ul);
};
});

Related

AJAX response, boolean value creating a different CSS custom

My webpage is receiving through AJAX GET requests Arrays with strings, and a Boolean.
The objects within the array are displayed subsequently to shape a chat app, the received array represents messages to display in a chatbox. However, some of the messages are bot's answers, stored as a user message.
Therefore, to recognize such message, I added a Boolean Value (bot=True : This is a bot answer). Such message has to be displayed on the right of the chatbox, when user messages are diplayed on the left. My code is brute forcing the left side of the chatbox, whatever the boolean value.
HTML:
<div id="display" class="chatbox"></div>
CSS:
.chat {
border-top: 1px solid #CCC;
margin-top: 1em;
border-radius: 2px;
color: white;
padding-top: 1em;
padding-bottom: 1em;
display: flex;
flex-direction: column;
}
JS:
<script>
$(document).ready(function() {
function imgMarkup(model) {
if (model.mediasrc) {
return `<img class='imgchat' src=../static/${model.mediasrc}.png/>`
}
return '';
}
setInterval(function() {
$.ajax({
type: 'GET',
url: "/checkview",
success: function go(response) {
console.log(response);
$("#display").empty();
for (var model of response.models_to_return) {
const temp = `
<div class='chat'>
<span class='time-left'>${model.datetime}</span>
<b>${model.user_id}</b>
<p>${model.room}</p>
${imgMarkup(model)}
</div>`;
$("#display").append(temp);
}
},
error: function(response) {
//alert('An error occured')
}
});
}, 1000);
})
</script>
I would like to be able to add a second class to my .chat (css), like class="chat right" depending on the boolean value of the variable 'bot' from the AJAX response.
Use a variable to hold the additional class, and set it conditionally based on model.bot.
$(document).ready(function() {
function imgMarkup(model) {
if (model.mediasrc) {
return `<img class='imgchat' src=../static/${model.mediasrc}.png/>`
}
return '';
}
setInterval(function() {
$.ajax({
type: 'GET',
url: "/checkview",
success: function go(response) {
console.log(response);
$("#display").empty();
for (var model of response.models_to_return) {
let botclass = model.bot ? 'right' : '';
const temp = `
<div class='chat ${botclass}'>
<span class='time-left'>${model.datetime}</span>
<b>${model.user_id}</b>
<p>${model.room}</p>
${imgMarkup(model)}
</div>`;
$("#display").append(temp);
}
},
error: function(response) {
//alert('An error occured')
}
});
}, 1000);
})

Load inserted text in dialog

I am using summernote 0.8 and jquery 3.5.
I have created a dialog that inputs synonyms for example, when inputing test1, test2, test3 in the dialog a special tag is filled into the editor like the following:
<span data-function="addSynonym" data-options="[test2, test3]"><span style="background-color: yellow;">test1</span></span>
I would like to load the dialog with these values, edit them and add the updated values to the editor's text field.
Find below my minimum viable example:
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
tabsize: 2,
toolbar: [
['insert', ['synonym', 'codeview']]
],
});
});
(function(factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery);
}
}(function($) {
$.extend($.summernote.plugins, {
'synonym': function(context) {
var self = this;
var ui = $.summernote.ui;
var $editor = context.layoutInfo.editor;
var options = context.options;
context.memo('button.synonym', function() {
return ui.button({
contents: '<i class="fa fa-snowflake-o">',
tooltip: 'Create Synonym',
click: context.createInvokeHandler('synonym.showDialog')
}).render();
});
self.initialize = function() {
var $container = options.dialogsInBody ? $(document.body) : $editor;
var body = '<div class="form-group">' +
'<label>Add Synonyms (comma - , - seperated</label>' +
'<input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" />'
'</div>'
var footer = '<button href="#" class="btn btn-primary ext-synonym-btn">OK</button>';
self.$dialog = ui.dialog({
title: 'Create Synonym',
fade: options.dialogsFade,
body: body,
footer: footer
}).render().appendTo($container);
};
// You should remove elements on `initialize`.
self.destroy = function() {
self.$dialog.remove();
self.$dialog = null;
};
self.showDialog = function() {
self
.openDialog()
.then(function(data) {
ui.hideDialog(self.$dialog);
context.invoke('editor.restoreRange');
self.insertToEditor(data);
console.log("dialog returned: ", data)
})
.fail(function() {
context.invoke('editor.restoreRange');
});
};
self.openDialog = function() {
return $.Deferred(function(deferred) {
var $dialogBtn = self.$dialog.find('.ext-synonym-btn');
var $synonymInput = self.$dialog.find('#input-synonym')[0];
ui.onDialogShown(self.$dialog, function() {
context.triggerEvent('dialog.shown');
$dialogBtn
.click(function(event) {
event.preventDefault();
deferred.resolve({
synonym: $synonymInput.value
});
});
});
ui.onDialogHidden(self.$dialog, function() {
$dialogBtn.off('click');
if (deferred.state() === 'pending') {
deferred.reject();
}
});
ui.showDialog(self.$dialog);
});
};
this.insertToEditor = function(data) {
console.log("synonym: " + data.synonym)
var dataArr = data.synonym.split(',');
var restArr = dataArr.slice(1);
var $elem = $('<span>', {
'data-function': "addSynonym",
'data-options': '[' + restArr.join(',').trim() + ']',
'html': $('<span>', {
'text': dataArr[0],
'css': {
backgroundColor: 'yellow'
}
})
});
context.invoke('editor.insertNode', $elem[0]);
};
}
});
}));
<head>
<meta charset="UTF-8">
<title>Summernote with Bootstrap 4</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.js"></script>
</head>
<body style="
padding-top: 50px;
border-left-width: 50px;
padding-left: 50px;
border-right-width: 50px;
padding-right: 150px;
">
<div class="container">
<div class="summernote">
<p>Hello World!</p>
This text should be replaced by the dialog. </div>
</div>
</body>
Any suggestions how to do add this update functionality to my yellow text?
I appreciate your replies!
Using the oninit callback, we can easily use jquery methods to select that embedded text and trigger a click on that button you added in your plugin.
It's the first time I use Summernote. So to bring a clear code and a similar syntax in the [UPDATE], I added jquery-ui dialogBox that would be used to update the clicked span.
And for this I used updateSpan() function that receives the (targeted) current span object and it's new value as arguments.
var i=0;
function updateSpan(object,value){
object.text(value.split(',', 1));
object.attr('data-options',value.split(',', 1));
object.attr('data-all','['+value+']');
object.css('backgroundColor','yellow');
object.parent().append(" ");
}
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
tabsize: 2,
toolbar: [
['insert', ['synonym', 'codeview']]
],
callbacks: {
onInit: function() {
$(".note-editable").on('click','span[data-function="addSynonym"]', function (e) {
var spanvalue=($(this).attr('data-all')).replace(/[\[\]']+/g,'');
var targetSpan=$(this);
//console.log(spanvalue);
$('#upDialog').dialog({
open : function (event, ui) {
$('#upDialog #input-synonym').empty().val(spanvalue);
//console.log(spanvalue);
},
modal: true,
title: 'Dialog',
show: {
effect: "scale",
duration: 200
},
resizable: false,
buttons: [{
text: "ok",
click: function () {
updateSpan(targetSpan,$('#upDialog #input-synonym').val());
$(this).dialog("close");
targetSpan.focus();
}
}]
});
});
}
}
});
});
(function(factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery);
}
}(function($) {
$.extend($.summernote.plugins, {
'synonym': function(context) {
var self = this;
var ui = $.summernote.ui;
var $editor = context.layoutInfo.editor;
var options = context.options;
context.memo('button.synonym', function() {
return ui.button({
contents: '<i class="fa fa-snowflake-o">',
tooltip: 'Create Synonym',
click: context.createInvokeHandler('synonym.showDialog')
}).render();
});
self.initialize = function() {
var $container = options.dialogsInBody ? $(document.body) : $editor;
var body = '<div class="form-group">' +
'<label>Add Synonyms (comma - , - seperated</label>' +
'<input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" />'
'</div>'
var footer = '<button href="#" class="btn btn-primary ext-synonym-btn">OK</button>';
self.$dialog = ui.dialog({
title: 'Create Synonym',
fade: options.dialogsFade,
body: body,
footer: footer
}).render().appendTo($container);
};
// You should remove elements on `initialize`.
self.destroy = function() {
self.$dialog.remove();
self.$dialog = null;
};
self.showDialog = function() {
self
.openDialog()
.then(function(data) {
ui.hideDialog(self.$dialog);
context.invoke('editor.restoreRange');
self.insertToEditor(data);
//console.log("dialog returned: ", data)
})
.fail(function() {
context.invoke('editor.restoreRange');
});
};
self.openDialog = function() {
return $.Deferred(function(deferred) {
var $dialogBtn = self.$dialog.find('.ext-synonym-btn');
var $synonymInput = self.$dialog.find('#input-synonym')[0];
ui.onDialogShown(self.$dialog, function() {
context.triggerEvent('dialog.shown');
$dialogBtn
.click(function(event) {
event.preventDefault();
deferred.resolve({
synonym: $synonymInput.value
});
});
});
ui.onDialogHidden(self.$dialog, function() {
$dialogBtn.off('click');
if (deferred.state() === 'pending') {
deferred.reject();
}
});
ui.showDialog(self.$dialog);
});
};
this.insertToEditor = function(data) {
i++;
//console.log("synonym: " + data.synonym)
var dataArr = data.synonym.split(',');
var restArr = dataArr.slice(1);
var $elem = $('<span>', {
'data-function': "addSynonym",
'data-id': i,
'data-options': '[' + restArr.join(',').trim() + ']',
'data-all': '[' + dataArr.join(',').trim() + ']',
'html': $('<span>', {
'text': dataArr[0],
'css': {
backgroundColor: 'yellow'
}
})
});
context.invoke('editor.insertNode', $elem[0]);
context.invoke('editor.insertText', ' ');
//context.invoke('editor.restoreRange');
//Still a bug : https://github.com/summernote/summernote/issues/3249
$('.summernote').summernote('editor.insertText', ' ');
context.invoke('editor.focus');
}
}
});
}));
#upDialog{
display:none;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.15/dist/summernote-bs4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<body style="
padding-top: 50px;
border-left-width: 50px;
padding-left: 50px;
border-right-width: 50px;
padding-right: 150px;
">
<div class="container">
<div class="summernote">
<p>Hello World!</p>
This text should be replaced by the dialog.
</div>
<div id="upDialog" title="Update Value"><input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" /></div>
</div>
</body>
You can replace this dialog by a modal to look identical or adapt the Dialog design to the old one.

Images loading twice with jQuery

I have used jQuery to display images from a JSON file. However the 2 images appear twice when I only want to display one of each.
JSON:
{
"tiles": [
{
"city": "example",
"img" : "example.jpg"
},
{
"city": "example",
"img" : "example.jpg"
}
]
}
HTML:
<div class="tile-image"></div>
<div class="tile-image"></div>
CSS:
.tile-image img {
width: 432px;
height: 192px;
object-fit: cover;
border-radius: 4px;
}
jQuery:
jQuery(document).ready(function ($) {
var jsonURL = "example.json";
$.getJSON(jsonURL, function (json) {
var imgList = "";
$.each(json.tiles, function () {
imgList += '<div><img src= "' + this.img + '"></div>';
});
$('.tile-image').append(imgList);
});
});
I have tried removing the two div containers from my HTML but when I do this all the images disappear. Any suggestions as to why they are appearing twice instead of once would be great.
The issue is because you append the imgList to all .tile-image elements.
To fix this you could instead loop over the .tile-image and append the img from the response data at the matching index, like this:
// mock AJAX response:
var response = {
"tiles": [{
"city": "example",
"img": "example-1.jpg"
}, {
"city": "example",
"img": "example-2.jpg"
}]
}
jQuery(function($) {
// inside the AJAX callback...
// $.getJSON('example.json', function (response) {
$('.tile-image').each(function(i) {
$(this).append('<div><img src= "' + response.tiles[i].img + '"></div>');
});
// });
});
.tile-image img {
width: 432px;
height: 192px;
object-fit: cover;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tile-image"></div>
<div class="tile-image"></div>

Firefox simple Extension to get clicked items on panel

in simple extension of Firefox i have:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[id^='menuitem']").click(function() {
var id=$(this).attr('id');
addon.port.emit("id", id);
});
});
</script>
</head>
<body class="body">
<div id="menuitem_1" class="menu">ITEM 1</div>
<div id="menuitem_2" class="menu">ITEM 2</div>
<div id="menuitem_3" class="menu">ITEM 3</div>
</body>
</html>
now i'm trying to handle ids by this code in index.js:
var tgbutton = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var contextMenu = require("sdk/context-menu");
var button = tgbutton.ToggleButton({
id: "updaterui",
label: ".Net Updater",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL: self.data.url("./popup.html"),
onHide: handleHide,
contentScript: "self.port.emit('resize', " +
"{width: 300," +"height: 145});"
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
panel.port.on("id", function (id) {
console.log(id);
});
panel.port.on("resize", function({width, height})
{
panel.resize(width, height);
});
panel.port.on("click-link", function(url) {
console.log(url);
});
i want to get div id by click on that. after click on menuitem_1 i must be open other popup. this code for click on div and get id is not correct and i can not resolve that.
SOLUTION:
after two week debug and try to read mozilla document i can resolve this problem now. full source code:
** --- UPDATED --- **
index.js:
var data = require("sdk/self").data;
var tgbutton = require('sdk/ui/button/toggle');
var panel = require("sdk/panel").Panel({
contentURL: data.url("panel.html"),
contentScriptFile: [data.url("jquery.min.js"),data.url("get-click.js")],
onHide: handleHide,
contentScript: "self.port.emit('resize', " +
"{width: 300," + "height: 145});"
});
var button = tgbutton.ToggleButton({
id: "updaterui",
label: "some lable",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
function handleChange(state) {
panel.show({
position: button
});
}
function handleHide() {
button.state('window', {checked: false});
}
panel.on("show", function () {
panel.port.emit("show");
});
panel.port.on("resize", function ({width, height}) {
panel.resize(width, height);
});
panel.port.on("id", function (id) {
console.log(id);
panel.hide();
});
get-click.js:
$(document).ready(function () {
$("[id^='menuitem']").click(function() {
var id=$(this).attr('id');
self.port.emit("id", id);
});
});
panel.html:
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.min.js"></script>
<script src="get-text.js"></script>
<style type="text/css">
.body {
direction: rtl;
font-family: tahoma;
margin: 5px;
}
.menu{
width:96%;
height: 30px;
background-color:#fff;
padding-top:15px;
padding-right:10px;
clear: both;
cursor: pointer;
}
.menu:hover{
background-color: #ddd;
}
</style>
</head>
<body class="body">
<div id="menuitem_1" class="menu">dsfsf</div>
<div id="menuitem_2" class="menu">sssssssss</div>
<div id="menuitem_3" class="menu">fffffffffff</div>
</body>
</html>

jQuery dialog and ajax postback

A page on my site are auto-reloading every 15th second. It's being done by using jQuery's .ajax function.
My problem are, that everytime the page are being loaded by the user, the form in the dialogs work fine.
But when it's reloaded automatically by the page itself, the inputs are being moved OUTSIDE the form.
Many on the internet writes, that it is possible to move it back into the form by appending a div into the first form found. My problem is, that when i try to move my "input-wrapper" back into the form, i get a hirachy-problem.
Can anyone help? Or point out an alternative solution?
My jQuery-script:
<script type='text/javascript'>
var intval;
var xmlhttp;
function init() {
$('#dialog:ui-dialog').dialog('destroy');
$('.ui-dialog').dialog({ modal: true, draggable: false, resizable: false, autoOpen: false, open: function(event, ui) { stopTimer(); }, close: function(event, ui) { startTimer(); } });
$('#targets').dialog({ width: 400, buttons: { 'close': { text: 'Luk', height: '30px', click: function() { $(this).dialog('close'); } }, 'submit': { text: 'OK', class: 'submit', height: '30px', click: function() { $(this).find('form').trigger('submit'); } } } });
$('#targets" & id2 & "Opener').click(function() { $('#targets').dialog('open'); return false; });
};
function startTimer() { intval = setTimeout('ajaxRefresh()', 15000); };
function stopTimer() { clearTimeout(intval); if(xmlhttp) xmlhttp.abort(); };
function ajaxRefresh() { xmlhttp = $.ajax({ url: '/', data: {h: 'ok'}, beforeSend: function() { stopTimer(); }, success: function(result) { $('body').html(result); } } }) };
$(document).ready(function() { init(); startTimer(); $('#targetsFormWrap').parent().appendTo('#targetsForm'); });
</script>
The HTML:
<div id='targets' class='ui-dialog' title='The Dialog Title' style='text-align: center; display: none;'>
<form id='targetsForm' name='targetsForm' method='post'>")
<div id='targetsFormWrap'>")
<input id='input1target' name='input1target' type='text' value='' style='width: 95%; />
<input id='input2target' name='input2target' type='text' value='' style='width: 95%; />
<input id='input3target' name='input3target' type='text' value='' style='width: 95%; />
</div>
</form>
</div>
you are trying to add targetFormWrap to targetsForm right? so just do:
$("#targetsForm").append($("#targetsFormWrap"));

Categories