jQuery Forum

$.getJSON give "bad request"
[1Reply]
- 03-Sep-2012 06:23 AM
- Forum: Using jQuery
Hi. I am developing a web application with Rails.
I need to pass data to JavaScript, so let Rails generate JSON on load like,
1. <%= content_tag "div", id: "json", data: {script: @video.scripts } do %>
2. <% end %>
It generates HTML,
1. <div data-script="[{"created_at":"2012-09-03T11:17:37+09:00","endp":"45.3","id":80,"startp":"30.1","text":"generated in console for test","updated_at":"2012-09-03T11:17:37+09:00","video_id":11},{"created_at":"2012-09-03T13:32:02+09:00","endp":"86.0","id":81,"startp":"60.6","text":"another generation from console","updated_at":"2012-09-03T13:32:02+09:00","video_id":11}]" id="json">
2. </div>
It's messy but a JSON object is stored properly.

Then I tried to get the data using jQuery
1. var json = $('#json').data();
2. $.getJSON( json, function(data) {
3. console.log(data);
4. alert(data);
5. });
But this gives an error
I understand the first argument of $.getJSON is URL, but I am having trouble getting the set variable, "json".

Could anyone help me out for this? If there is a better way, I would like that too.

soujiro0725

Timing of .change() action
[2Replies]
- 05-Mar-2012 05:10 AM
- Forum: Using jQuery
jQuery 1.7.1

I have a portion of jQuery like,
2. var val;
3. $('.script_list').change(function () {
4. val = $container.find('.script_list').val();
5. if( (val < valbefore) || (valafter < val) ) {
6. $('.update').addClass('disabled');
7. $('.message').html('<div class="alert alert-error">'
8. + '<a class="close" data-dismiss="alert">×</a>'
9. + 'The start value must be between '
10. + valbefore
11. + ' and '
12. + valafter
13. + '</div>');
14. } else {
15. $('.update').removeClass('disabled');
16. $('.message').html('');
17. }
18. });
The important point is the line 6, where 'update' button gets disabled. This button starts DB communication, so it is crucial to avoid a wrong input before being clicked.
This piece of code seems to work well, but in fact there is a critical drawback.

After changing the input value AND move the focus, it would certainly disable the button. But if the focus stays the same after changing the value, the button is still active. Hence, the update action can be achieved even if the value is wrong.

How can I change the timing of disabling action? In other words, I want the button disabled as soon as the value is changed a tiny bit.

thanks in advance.

soujiro0725

toggle SLOW for .on('click'...)
[2Replies]
- 02-Mar-2012 01:17 AM
- Forum: Using jQuery
jQuery 1.7.1

I have something like,

var toggleEditor;
$('.viewer').on('click', '.edit, .cancel', function(event) {
toggleEditor($(this).closest('.script-container'));
});

toggleEditor = function($container) {
var $bodyField;
$container.find('.view_script, .editor_script').toggle();
$bodyField = $container.find('.editor_script .text_list');
if ($bodyField.is(':visible')) {
$bodyField.val($container.find('.view_script .text_list').text()).select();
}
};

It shows and hides an editor like you can imagine. It works perfectly so far.

My question is

Is there anyway to add 'easing effect' to this particular component?

More specifically, I want it to show and hide 'slowly'.

Thanks in advance.

soujiro0725

a variable for UI slider range max
[2Replies]
- 21-Jan-2012 09:52 PM
- Forum: Using jQuery UI
ui slider 1.8.17
jQuery 1.7

I want to set a variable for the max setting of UI slider range.

var valMax = $("#youtube-player-container").tubeplayer("data").duration;
$( "#slider-range" ).slider({

range: true,
min: 0,
max: valMax, ;;HERE!!!
values: [ 75, 80 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});

It needs to obtain the max value (which in this case, the duration of YouTube video) when loaded. So I tried above. But it shows the default max value, which is 100. It does not seem to work.

Is there anyway to solve this problem?

soichi

active changes id values by clicking a button, using "attr"
[2Replies]
- 02-Jan-2012 08:10 PM
- Forum: Using jQuery
Hi. I have a list of text input fields, which can be added and moved freely by clicking buttons.
They are like

write1 [text: ] [up] [down] [delete]

write2 [text: ] [up] [down] [delete]

...

[button: add text input field]

[up] [down] buttons move the corresponding text fields accordingly. [delete] button is obviously to remove the text input area together with up, down, and delete buttons.

Certainly, if I delete a line in the middle like below, the order of "id" attributes is now messed up.

write1 [text: ] [up] [down] [delete] (id="num1")

~~write2 [text: ] [up] [down] [delete] (id="num2")~~
write3 [text: ] [up] [down] [delete] (id="num3")

But I wish to reorganize the "id" attributes accordingly. Of course, similarly for up and down buttons.

=>
write1 [text: ] [up] [down] [delete] (id="num1")
write2 [text: ] [up] [down] [delete] (id="num2")

So, I need to implement jQuery code so that every button click updates all id values.
I tried...
2. <tr>
3. <td><input type="text" name="c_change" class="choice_input" id="num1"/></td>
4. <td><button class="up">up</button> <button class="down">down</button></td>
5. <td><button class="deleteButton">delete</button></td>
6. </tr>
8. $('.deleteButton').live('click',function(event){
  $(this).parent().parent().remove();
  
  $('.choice_input').removeAttr('id');
  $(".choice_input").attr("id", function (arr) {
  return "num" + arr;
  })
  });
  // up
  $('.up').live('click',function(event){
  var own = $(this).parent().parent();
  var pre = own.prev();
  own.insertBefore(pre);
  });
for the delete and up buttons, hoping that removeAttr() removes all id attributes. But it does not.

Could anyone give me tips?

Any jQuery function only to send data to servlet?
[0Replies]
- 05-Mar-2011 03:17 AM
- Forum: Using jQuery
Hi. I'm looking for a jquery function that only sends data to Java servlet.

jquery.get('url' , {name: "soichi"})

does send the data (in this case, the name) to the servlet. But I want the servlet to create a new HTML page based upon the sent data and to redirect to it.
So, maybe I should write in Java,

public void doGet(HttpServletRequest req, HttpServletResponse resp)

throws IOException {

String text = null;

text = req.getParameter("name");

resp.setContentType("text/html");

resp.getWriter().print("<html><body><h1>" + text + "</h1></body></html>");

resp.sendRedirect("redirected.html")
}

something like this. I am not sure, though.

Could anyone provide some ideas for me?
If it works better, it does not have to be jQuery. Pure JavaScript or Java is OK as long as it achieves what I want.

Thanks in advance.

soichi

Selectors for clicked element
[2Replies]
- 02-Mar-2011 10:22 PM
- Forum: Getting Started
I have an html file that looks like the following.

---------------------------------
<div id="outline-container-1_1" class="outline-3">
  <h3 id="sec-1_1"><span class="section-number-3">1.1</span> Counting </h3>
   <div class="outline-text-3" id="text-1_1">

   <p>this is the first CONTENT that is hidden and shown by clicking.</p>

   </div>
</div>
...
<div id="outline-container-1_1" class="outline-3">
  <h3 id="sec-1_2"><span class="section-number-3">1.2</span> Motivation </h3>
   <div class="outline-text-3" id="text-1_2">

   <p>this is the second CONTENT that is hidden and shown by clicking.</p>

   </div>
</div>
...
----------------------------------

in CSS,

----------------------------------
.outline-text-3 {
   display:none;
}
----------------------------------

so, the content is initially hidden.

I want to show the content by clicking the header of the content, in this case, "<h3 id="sec-1_1"><span class="section-number-3">1.1</span> Counting </h3>".
So I wrote,

----------------------------------
$(document).ready(function(){
   $(".outline-3 h3").click(function(){
$(".outline-text-3").toggle(1000);
   });
});
----------------------------------

But this opens up all the contents simultaneously. I want to open only the content that follows the clicked header. The problem is, I assume, the use of selectors.

How can I achieve this?

soichi

jQuery.get(servlet url) should activate Java servlet?
[2Replies]
- 18-Feb-2011 04:21 AM
- Forum: Getting Started
I am trying to develop a web program that uses ajax with AppEngine.

in HTML <head> part, I put...

<script type="text/javascript">//<![CDATA[

function asyn() {

$.get("http://localhost:8888/ajaxtestforpictures");

}

//]]</script>

and the java servlet is only...

public class AjaxTestForPicturesServlet extends HttpServlet {

public void doGet(HttpServletRequest req, HttpServletResponse resp)

throws IOException {

resp.sendRedirect("redirected.html");

}

}

the URL of the servlet (/ajaxtestforpictures) is fine.
I am hoping that clicking the button would activate the servlet and redirect to redirected.html. But it does not work. I have recently started using jQuery.ajax, so could anyone help me out to find the problem?

want to choose the css selector "clicked"
[1Reply]
- 09-Aug-2010 01:25 AM
- Forum: Using jQuery
hello. I have a question about choosing a css selector.
As partially shown below, an user clicks a dom element "dl dt", then the code executes whatever inside.

in the HTML, there is an element

<dl>

<dt>...</dt>
   <dd>
   <div id="">...</div>
   </dd>

<dt>...</dt>
  <dd>
   <div id="">...</div>
  </dd>
...
</dl>

then, by clicking "dl dt", the element works fine. But I want as well to change the attribute of the div element, which is a child of <dl> and is a sibling of <dt> .

How should I set the selector in order to make $(...).attr("id", "slideShow") work fine?

//-----------------------------jQuery code-------------------------------------------
  $("dl dt").click(function(){
if($("+dd", this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd", this).slideDown("slow");
$("dt").removeClass("selected");
$(this).addClass("selected");

//★★★★★HERE!
$(this + "div").attr("id", "slideShow");

}

Response title

Attachments

jQuery Forum

Activity Trend