jQuery Forum

Dialog does not close correctly
[1Reply]
- 08-May-2015 10:30 PM
- Forum: Using jQuery UI
I need to open several dialogs, one after another when focus occurs on a textfield, the first dialog opens correctly, the following one opens when focus occurs, but this does not close correctly.

I am using jquery1.11.4, with jquery 2.1.4 is the same thing.

Demo : Demo

Attr checked after open jquery dialog does not work
[1Reply]
- 10-Apr-2015 11:37 PM
- Forum: Using jQuery
I am using jquery 1.11.2, I am trying to check a checkbox after opening the dialog if the value in a textbox is '1', but it works only the first time.

I tried with jquery v1.8.3 then it works, I don´t know if I making a mistake or maybe is a bug.

I leave the source code here using the two versions.
Attachments
- dialog1v1.8.3.zip
  
  Size: 224.58 KB Downloads: 1151
- dialogv1.11.2.zip
  
  Size: 232.67 KB Downloads: 1194

Creation my own plugin for form validation

09-Feb-2015 03:03 PM
Forum: Developing jQuery Plugins

I am trying to develop a validation plugin to validate forms using jquery, but I can´t to execute some action after a successful validation, I don't know how to return a value from my plugin or to execute a callback after a successful validation.

jquery_validacion_form.js

(function($){
   $.fn.extend({
      validate:function(){
          var success=true;
          return this.each(function() 
               //var $this=$(this);
               if($(this).attr('class')=='required'){
                  if($(this).val()==''){
                    $(this).css('border','1px solid #FF0000');
                    success=false;
                   }
                 else{
                    $(this).css('border','1px solid #CCCCCC');
                  }
                }

          });
          return success;
      }
   });
})(jQuery);

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div {
  margin: .4em 0;
}
div label {
  width: 12%;
  float: left;
}
</style>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery_validacion_form.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $('#btn1').click(function(){
      $('#frm1 input:text').validate();
      return false;
   });   
 });

</script>
</head>
<body>
<form id="frm1">
  <fieldset>
  <legend>Alta en el servicio</legend>

  <div>
    <label for="name">Name</label>
    <input type="text" id="name" class="required"/>
  </div>

  <div>
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" size="35"/>
  </div>
  <div>
     <button id="btn1">Click</button>
  </div>
</fieldset>
</form>
</body>
</html>

Conflict scroll event jscrollpane jquery
[0Replies]
- 29-Jan-2014 02:52 PM
- Forum: Using jQuery Plugins
I have a problem and is the following; I am using scroll event to paginate records which is defined like this:$(window).scroll(function() { if ($(window).scrollTop() === $(document).height()- $(window).height()) { //Do something } )};but I am using jscrollpane too, but when this is visible triggers the scroll event of the window. I tried to do this to disable the scroll of jscrollpane, but does not work$('#dvmenu').unbind('jsp-scroll-y').jScrollPane({autoReinitialise: true});

is this possible?

on after off scroll window
[3Replies]
- 02-Dec-2013 04:09 PM
- Forum: Using jQuery
hello, I would like to know how to activate the event scroll after off in the browser window

Heres is my source

$('#btn').click(function() {
        $(window).off('scroll');//This works
    });

But I need to activate the scroll after keyup event

$('#txt').keyup(function(){
$(window).on();
})

But the scroll event does not work anymore,
I tried with bind and unbind, but I get the same behaviour like this:

$('#btn').click(function() {
        $(window).unbind('scroll');//This works
    });

$('#txt').keyup(function(){
$(window).bind('scroll');
})

Drag and Drop to load images
[0Replies]
- 24-Aug-2013 10:50 AM
- Forum: Using jQuery
Hello, I am developing a a source to load images because any plugin has the design that I need and I would like to add drag & drop, but I have no idea to do this.

The source is in the attachment file.
Attachments
- ajaxsinplugin.zip
  
  Size: 36.8 KB Downloads: 1232

Vertical Scroll menu
[0Replies]
- 22-Aug-2013 05:26 PM
- Forum: Using jQuery
Hello, I have a vertical menu and I need to hide some options, I have a link '+' to show more options when is pressed , it's something like this link , but this plugin does not work for my layout and I have to implement it for myself, but I have no idea.

any help, thank you.
- Vehiculos
  - Carros
    
    Marca
    
    Chevrolet
    
    Aveo
    Cruze
    Blazer
    
    Mazda
    BMW
    
    Transmisión
    Dirección
  - Camiones
- Accesorios
- Computadores
- Celulares
- Tablets
- Ubicación
+
Attachments
- menu3.txt
  
  Size: 3.94 KB Downloads: 341

Tree Menu
[1Reply]
- 20-Aug-2013 09:13 AM
- Forum: Using jQuery
Hello, I am trying to implement a tree menu, but I have no idea to get it work fine, it's multilevel , thanks for any help

Here is my source code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <script type="text/javascript" src="jquery.min.js"></script>
7. <style type="text/css">
8. *{
9. padding:0;
10. margin:0;
11. }
12. #dvmenucategorias{
13. width:15%;
14. float:left;
15. }
16. #dvmenucategorias a{
17. color:#000;
18. text-decoration: none;
19. }
20. #dvmenucategorias li p{
21. padding:3%;
22. }
23. #dvmenucategorias li{
24. list-style: none;
25. }
26. #dvenccategorias{
27. background-color: #fbb03b;
28. padding:3%;
29. text-align: center;
30. }
31. li.level1{
32. background-color: #005b9f;
33. color:#FFFFFF;
34. border-bottom: 1px solid lightslategray;
35. }
36. li.level2 {
37. background-color: #373636;
38. border-top: 1px solid #FFFFFF;
39. color:#FFFFFF;
40. }
41. li.level3{
42. color:#000;
43. background-color: #f0f2f2;
44. border-top: 0;
45. }
46. li.level4{
47. color:#000;
48. background-color: yellowgreen;
49. border:0;
50. }
51. li.level5{
52. background-color: #FFFFFF;
53. border:0;
54. }
55. </style>
56. <script type="text/javascript">
57. $('document').ready(function() {
58. $('li').click(function() {
59. if ($(this).find(':first-child').find('ul').is(':visible')) {
60. $(this).find(':first-child').find('ul').hide();
61. }
62. else {
63. $(this).find(':first-child').find('ul').show();
64. }
65. });
66. });
67. </script>
68. </head>
69. <body>
70. <ul id="dvmenucategorias">
71. <li class="level1"><p>Vehiculos</p>
72. <ul><li class="level2"><p>Carros</p>
73. <ul>
74. <li class="level3"><p>Marca </p>
75. <ul>
76. <li class="level4"><p><a href="" class="lnkfiltro">Chevrolet</a></p>
77. <ul>
78. <li class="level5"><p>---<a href="" class="lnkfiltro">Spark</a></p></li>
79. <li class="level5"><p>---<a href="" class="lnkfiltro">Cruze</a></p></li>
80. </ul>
81. </li>
82. </ul>
83. <ul>
84. <li class="level4"><p><a href="" class="lnkfiltro">Mazda</a></p>
85. <ul>
86. <li class="level5"><p>---<a href="" class="lnkfiltro">Mazda 3</a></p></li>
87. <li class="level5"><p>---<a href="" class="lnkfiltro">Mazda 6</a></p></li>
88. </ul>
89. </li>
90. </ul>
91. <ul>
92. <li class="level4"><p><a href="" class="lnkfiltro">Daewoo</a></p>
93. <ul>
94. </ul>
95. </li>
96. </ul>
97. <ul>
98. <li class="level4"><p><a href="" class="lnkfiltro">Toyota</a></p>
99. <ul>
100. </ul>
101. </li>
102. </ul>
103. <ul>
104. <li class="level4"><p><a href="" class="lnkfiltro">Hiunday</a></p>
105. <ul>
106. </ul>
107. </li>
108. </ul>
109. <ul>
110. <li class="level4"><p><a href="" class="lnkfiltro">Renault</a></p>
111. <ul>
112. </ul>
113. </li>
114. </ul>
115. <ul>
116. <li class="level4"><p><a href="" class="lnkfiltro">Audi</a></p>
117. <ul>
118. </ul>
119. </li>
120. </ul>
121. </li>
122. <li class="level3"><p>Dirección </p>
123. <ul>
124. <li class="level4"><p><a href="" class="lnkfiltro">Asistida</a></p>
125. <ul>
126. </ul>
127. </li>
128. </ul>
129. <ul>
130. <li class="level4"><p><a href="" class="lnkfiltro">Hidraulica</a></p>
131. <ul>
132. </ul>
133. </li>
134. </ul>
135. <ul>
136. <li class="level4"><p><a href="" class="lnkfiltro">Mecanica</a></p>
137. <ul>
138. </ul>
139. </li>
140. </ul>
141. </li>
142. <li class="level3"><p>Color </p>
143. <ul>
144. <li class="level4"><p><a href="" class="lnkfiltro">Rojo</a></p>
145. <ul>
146. </ul>
147. </li>
148. </ul>
149. </li>
150. </ul>
151. </li>
152. </ul>
153. <ul><li class="level2"><p>Camiones</p>
154. <ul>
155. <li class="level3"><p>Marca </p>
156. <ul>
157. <li class="level4"><p><a href="" class="lnkfiltro">Chevrolet</a></p>
158. <ul>
159. <li class="level5"><p>---<a href="" class="lnkfiltro">Turbo </a></p></li>
160. </ul>
161. </li>
162. </ul>
163. </li>
164. </ul>
165. </li>
166. </ul>
167. </li>
168. <li class="level1"><p>Ubicación</p></li>
169. <li class="level1"><p>Rango de Precios</p></li>
170. <li class="level1"><p>Refinar Busqueda Por</p></li>
171. </ul>
172. </body>
173. </html>

I cant update a div after keypress using ajax
[2Replies]
- 19-Jul-2013 05:44 PM
- Forum: Using jQuery
hello, I have a problem when I am trying to update a div after to save a record in my DB, what I am doing is to save a record and then to print in another div.

here is my code:
1. $('input.txtcomentario').keypress(function(e) {
2. if (e.keyCode === 13) {
3. var idp = $(this).closest('.dvpublicacion').find('input.hdidpub').attr('value');
4. var comentario = $(this).attr('value');
5. $(this).val('');
6. if (comentario.length > 0) {
7. $.ajax({
8. type: 'POST',
9. url: "interaction/savecomment.php",
10. data: 'idp=' + idp +
11. '&comentario=' + comentario,
12. success: function(data) {
13. $.ajax({
14. type: 'GET',
15. url: "interaction/listcomments.php' ?>",
16. data: 'idp=' + idp,
17. success: function(data1) {
18. $(this).closest('.dvpublicacion').find('.dvcomentariospub').html(data1);//This does not work
19. }
20. });
21. }
22. });
23. }
24. }
25. });
But something strange occurs, when I print anything on the div outside of the second ajax, it works.
1. $('input.txtcomentario').keypress(function(e) {
2. if (e.keyCode === 13) {
3. var idp = $(this).closest('.dvpublicacion').find('input.hdidpub').attr('value');
4. var comentario = $(this).attr('value');
5. $(this).val('');
6. if (comentario.length > 0) {
7. $.ajax({
8. type: 'POST',
9. url: "interaction/savecomment.php",
10. data: 'idp=' + idp +
11. '&comentario=' + comentario,
12. success: function(data) {
13. $.ajax({
14. type: 'GET',
15. url: "interaction/listcomments.php' ?>",
16. data: 'idp=' + idp,
17. success: function(data1) {
19. }
20. });
21. $(this).closest('.dvpublicacion').find('.dvcomentariospub').html('anything');// This works
22. }
23. });
24. }
25. }
26. });
I can find the mistake, please help me.

Recognize new Dom Elements
[0Replies]
- 06-Jul-2013 06:04 PM
- Forum: Using jQuery
Hello, my problem is the following, I have a script that allows me retrieve data in json format and with those data I have to build a view with Images and I need to apply a plugin but the new Elements added do not work.

Here is my code:

<script type="text/javascript">

$('#busquedaanuncio').keyup(function(e) {
var busqueda = $(this).attr('value');
$.ajax({
type: 'GET',
data: 'busqueda=' + busqueda,
url: "<? echo PUBLIC_PATH . 'announcementm/search' ?>",
success: function(data) {
$('#dvrelacionados').html('Terminos relacionados');
}
});

$('#dvpublicaciones').html('');

$.ajax({
type: "GET",
data: '{}',
url: "http://192.168.0.110:3000/announcet/" + busqueda,
dataType: "jsonp",
processdata: true,
success: function(data) {
$.each(data, function(index, objeto) {
$("#dvpublicaciones").append(
'<div class="publicacion">' +
'<img class="panel" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimganuncio + '>' +
'<div class="cap-overlay hide"><h5>Darth Vader</h5><p>Luke, yo soy tu padre, sÃgueme al lado oscuro de la fuerza...</p></div>'+
'<table><tr>' +
'<td width="12%"><img class="imgusr" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimg + '></td>' +
'<td width="88%"><b>' + objeto.titulo + '</b><br/>' +
objeto.texto.replace('&', '') + '</td></tr></table>' +
'</div>'
);
});
data = null;
}
});

});

$('.panel').hcaptions({effect: "fade"});//This Plugin does not work

Recognize new Dom Elements
[0Replies]
- 06-Jul-2013 06:04 PM
- Forum: Using jQuery
Hello, my problem is the following, I have a script that allows me retrieve data in json format and with those data I have to build a view with Images and I need to apply a plugin but the new Elements added do not work.

Here is my code:

<script type="text/javascript">

$('#busquedaanuncio').keyup(function(e) {
var busqueda = $(this).attr('value');
$.ajax({
type: 'GET',
data: 'busqueda=' + busqueda,
url: "<? echo PUBLIC_PATH . 'announcementm/search' ?>",
success: function(data) {
$('#dvrelacionados').html('Terminos relacionados');
}
});

$('#dvpublicaciones').html('');

$.ajax({
type: "GET",
data: '{}',
url: "http://192.168.0.110:3000/announcet/" + busqueda,
dataType: "jsonp",
processdata: true,
success: function(data) {
$.each(data, function(index, objeto) {
$("#dvpublicaciones").append(
'<div class="publicacion">' +
'<img class="panel" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimganuncio + '>' +
'<div class="cap-overlay hide"><h5>Darth Vader</h5><p>Luke, yo soy tu padre, sÃgueme al lado oscuro de la fuerza...</p></div>'+
'<table><tr>' +
'<td width="12%"><img class="imgusr" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimg + '></td>' +
'<td width="88%"><b>' + objeto.titulo + '</b><br/>' +
objeto.texto.replace('&', '') + '</td></tr></table>' +
'</div>'
);
});
data = null;
}
});

});

$('.panel').hcaptions({effect: "fade"});//This Plugin does not work

Recognize new Dom Elements
[0Replies]
- 06-Jul-2013 06:04 PM
- Forum: Using jQuery
Hello, my problem is the following, I have a script that allows me retrieve data in json format and with those data I have to build a view with Images and I need to apply a plugin but the new Elements added do not work.

Here is my code:

<script type="text/javascript">

$('#busquedaanuncio').keyup(function(e) {
var busqueda = $(this).attr('value');
$.ajax({
type: 'GET',
data: 'busqueda=' + busqueda,
url: "<? echo PUBLIC_PATH . 'announcementm/search' ?>",
success: function(data) {
$('#dvrelacionados').html('Terminos relacionados');
}
});

$('#dvpublicaciones').html('');

$.ajax({
type: "GET",
data: '{}',
url: "http://192.168.0.110:3000/announcet/" + busqueda,
dataType: "jsonp",
processdata: true,
success: function(data) {
$.each(data, function(index, objeto) {
$("#dvpublicaciones").append(
'<div class="publicacion">' +
'<img class="panel" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimganuncio + '>' +
'<div class="cap-overlay hide"><h5>Darth Vader</h5><p>Luke, yo soy tu padre, sÃgueme al lado oscuro de la fuerza...</p></div>'+
'<table><tr>' +
'<td width="12%"><img class="imgusr" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimg + '></td>' +
'<td width="88%"><b>' + objeto.titulo + '</b><br/>' +
objeto.texto.replace('&', '') + '</td></tr></table>' +
'</div>'
);
});
data = null;
}
});

});

$('.panel').hcaptions({effect: "fade"});//This Plugin does not work

Recognize new Dom Elements
[2Replies]
- 06-Jul-2013 06:04 PM
- Forum: Using jQuery
Hello, my problem is the following, I have a script that allows me retrieve data in json format and with those data I have to build a view with Images and I need to apply a plugin but the new Elements added do not work.

Here is my code:

<script type="text/javascript">

$('#busquedaanuncio').keyup(function(e) {
var busqueda = $(this).attr('value');
$.ajax({
type: 'GET',
data: 'busqueda=' + busqueda,
url: "<? echo PUBLIC_PATH . 'announcementm/search' ?>",
success: function(data) {
$('#dvrelacionados').html('Terminos relacionados');
}
});

$('#dvpublicaciones').html('');

$.ajax({
type: "GET",
data: '{}',
url: "http://192.168.0.110:3000/announcet/" + busqueda,
dataType: "jsonp",
processdata: true,
success: function(data) {
$.each(data, function(index, objeto) {
$("#dvpublicaciones").append(
'<div class="publicacion">' +
'<img class="panel" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimganuncio + '>' +
'<div class="cap-overlay hide"><h5>Darth Vader</h5><p>Luke, yo soy tu padre, sÃgueme al lado oscuro de la fuerza...</p></div>'+
'<table><tr>' +
'<td width="12%"><img class="imgusr" src=' + "<? echo PUBLIC_PATH ?>" + objeto.rutaimg + '></td>' +
'<td width="88%"><b>' + objeto.titulo + '</b><br/>' +
objeto.texto.replace('&', '') + '</td></tr></table>' +
'</div>'
);
});
data = null;
}
});

});

$('.panel').hcaptions({effect: "fade"});//This Plugin does not work

Plugin to add emails into a textarea the same as gmail
[1Reply]
- 19-Jun-2013 12:31 PM
- Forum: Using jQuery Plugins
Hello, please somebody who knows about a plugin to add several emails into a textarea and so to send the same message to several contacts like gmail, I tried out some like this: http://ivaynberg.github.io/select2/ , but I was not able to do it works.

Excuse my english and thank you.

How to load 5000 options with autocomplete
[0Replies]
- 14-Dec-2012 12:31 AM
- Forum: Using jQuery Plugins
Hello, I have a problem with the autocomplete, I need to load 5000 records(options) from my database or more but when the textfield is loading my computer take a lot of time to load the options, may be my way to do it is not efficient,
here is my source, and please what is the best way?

JS
function buscar_dx_principal(){
    $.ajax({
            type: 'GET',
            async:false,
            url: 'facturacion/nuevas_facturas/cargar_dx_principal.php',
            success: functionbb(data){
                dx_principal=data.split(",");
            }
        });
        return dx_principal;
}

$( "#txt_dx_principal" ).autocomplete({
            source: buscar_dx_principal()
});

PHP
<?php
include('../../common/adodb/adodb.inc.php');
include('../../common/conexion.php');

$cmd = ADONewConnection($bd_driver);
$cmd->Connect($bd_servidor,$bd_usuario,$bd_clave,$bd_base);
$sql="SELECT id,desc FROM tb_rge";
$rs = $cmd->Execute($sql);
$dx_principal="";
while (!$rs->EOF) {$dx_principal=$dx_principal.$rs->fields['id']."-".$rs->fields['desc'].",";
                    $rs->MoveNext();
                  }
$cmd->Close();
$dx_principal=substr($dx_principal,0,strlen($dx_principal)-1);
echo utf8_encode($dx_principal);
?>

Response title

Attachments

jQuery Forum

Activity Trend