I got a code that replaces a string. Here is my HTML created by my PHP code.
...
foreach ($notes as $note) {
echo '<li><input name="noteTypeID" type="radio" class="noteTypeID" value="'.$note['NOTETYPEID'].'"></li>';
}
...
foreach (...) {
...
echo '<li class="getshrtcode">[srms_more_info id="'.$cnt.'" instanceID="'.$val_id.'" type="'.$val_type.'" noteCodeID="" planID=""]</li>';
...
}
my script is like this:
jQuery(document).ready(function(){
var noteTypeID = null;
var planID = null;
jQuery('.noteTypeID').click(function() {
noteTypeID = jQuery(this).val();
planID = prompt("Enter a Template planID value from axcelerate");
jQuery('.getshrtcode').each(function(){
jQuery(this).text(jQuery(this).text().replace('noteCodeID=""', 'noteCodeID="'+ noteTypeID +'"'));
jQuery(this).text(jQuery(this).text().replace('planID=""', 'planID="'+ planID +'"'));
});
});
});
the 1st change is fine but the next is not. I see that it can't re assign the .getshrtcode text because the planID and noteCodeID string have value. Is it possible to turn it noteCodeID="" planID="" again?
You are trying to set a non-DOM entity with jquery which is not possible. When you have a template engine to generate HTML, the template code gets executed and gives results before any javascript loads, so you cannot set template properties unless the template engine itself provides you a mechanism to do this.
If you really want the customer to specify a certain template plan ID to present him with something specific, you need to load your page through an AJAX call where you send a request to the server passing noteCodeID & planID and respond with the desired HTML that comes as a result of the custom template engine execution.
If you have custom attributes in your HTML that you want to set using jquery, then you can simply use attr function :
$('#foobar').attr('foo','bar');
Related
I have a scenario where-in by-default I would be rendering some data from JSON on my JSP page. Now, I want to achieve a use-case wherein when I click on some menu-item it would trigger a function and that should in response update the template with the relevant data.
So for initial loading I am loading the data from JSON using:
$.getJSON( "/somelocation/test.json", function( data ) {
console.log(data); //json output
var template = $.templates("#theContent");
var htmlOutput = template.render(data, {selectedValue: "abc"});
$("#mainBody").html(htmlOutput);
});
Now I write the same logic in a function which will be triggered on the menu item click then on the JSP page I just see "#theContent" as an output. Can you please suggest what might be an issue.
If you pass a string to $.templates(someString), then JsRender will first attempt to treat it as a jQuery selector. If jQuery is loaded and the selector does return a script element for a template then that template will be used.
If the string is not valid selector or does not return a script element for a template block, then JsRender will fall back on treating the string as template markup.
You can test in the context of your code whether $("#theContent") does return a non-empty jQuery object. ($("#theContent").length === 1). It looks as if in your code it is not finding a script element with ID "theContent".
This is probably simple but I've never had to do it. I'm loading another page on the site and want to extract the html from a div with the id of terms_text.
So I am loading the data (it's there no problem), and am trying to filter it but am receiving undefined for my $html variable. Any ideas?
function test () {
$.get("/terms?" + new Date().getTime(), function(data){
var $html = $(data).filter('#terms_text').html();
alert($html);
});
}
You probably need to use $(data).find('#terms_text') instead of $(data).filter('#terms_text'). Either that or there just is no element returned in /terms... with the id terms_text
I'm developing userscript for one webpage (aka browser plugin). I need to update one global Javascript variable (lets call it gVariable (it is an array)) with the one I get with ajax request.
In ajax request I'm requesting for the same page I'm on. But just want to "extract" that one global variable and replace current one with the one downloaded.
This is something I have now (not working).
function LoadNewItemList() {
$.get(window.location, function (data) {
var $data = $(data);
unsafeWindow.gVariable = data.gVariable; //I'm getting 'undefined'
});
}
JS test:
http://jsfiddle.net/ywVKT/15/
Looking at your fiddle, there are mainly 4 tags. i.e.
"title" , "link" , "ul" , "script". That's why you need to use index as 3, since the script tag contains the variable name and value.
Try this and it would work.
$('#variableHere').text(data2[3].innerText);
it will return you following o/p: var gVariable = 0; gVariable = 5
Now you can use regex/substring function to extract the vairable name and value..
I found solution:
unsafeWindow.gVariable = 0;
var $script = $data.filter('script:contains("var gVariable")').first();
eval($script.text());
unsafeWindow.gVariable = gVariable;
I'm trying to display specific parts of a Cloudant database. This database contains many separate documents, and each document contains a category called "results". I'm trying to display whatever is in results. Each document is identified by its own id. I tried using the get() method in jQuery, but unfortunately it is not running successfully.
function grabData(){
var url = 'https://cloudant.com/futon/document.html?acharya%2Ftoxtweet/ff558f75077e8c758523cd3bd8ffdf88';
$.get(url, function(data) {
$('.result').html(data);
alert("Data loaded: " + data);
});
}
grabData();
I'm not entirely sure where I went wrong...Should I consider using SQL instead of ajax?
I think your issue it this:
replace this:
grabData();
with this:
$(document).ready(function(){
grabData();
});
or more shortened:
$(function(){
grabData();
});
The URL you are using is returning an entire webpage.
Your jQuery code is looking for an element on the current page with a class name of result and trying to change it's inner HTML to the response from the URL.
You didn't provide any additional code to look at, but I would assume that is not what you were expecting it to do.
I assume you are wanting to parse through the entire url, but in your current code the page will be processed as a raw string and not a DOM object. So you would have to parse through that string with regular expressions, etc.
I have an ajax form that I would like to submit, and the response contains two divs, one containing html content and the other containing dynamic javascript in a script tag.
I'm submitting the form and receiving the response ok, but I can't seem to get the javascript to evaluate. I've put an alert inside but it never fires. This is the code I am using to submit the form:
$("#categoryFormSubmit").live("click", function(event){
event.preventDefault();
var action = this.form.action + '?_eventName=' + this.name + 'Ajax';
var params = $(this.form).serialize();
var xhr = $.post(action, params, function(response) {
var responseDom = $(response);
var contentData = $('#content', responseDom).html();
var javascriptData = $('#javascript', responseDom).html();
$('#content').html(contentData);
$('#javascript').html(javascriptData);
}, 'html');
});
In the response I am trying to convert the response data to a DOM object and parse out the content and the javascript, and insert them into the existing dom. The content replacement works fine, but nothing seems to be working with the javascript. I can't get it to evaluate. How should I be doing this? I imagine I shouldn't be trying to insert it into the DOM like I am.
There is no need to manually parse the response and separately add the HTML and JS to your page. jQuery will detect scripts inside of markup you attempt to add to the DOM and will handle the proper addition and execution of them.