I'm using jqModal inside a Django application. What I would like to do is have a bunch of different links each of which passes a parameter to jqModal to have it call a different ajax url based on the parameter. For example, depending on the ID of what is click on, I want to do something like:
$('#popup').jqm({ajax: '/myapp/objects/' + id, trigger: 'div.modaltrigger'});
Where id is the id of whatever I've clicked on.
Is this possible to do?
Use data attributes of the triggering elements to store your URLs:
<div class="modaltrigger" data-ajax-url="/myapp/objects/108"...
Then use jqModal in the following way:
$('#popup').jqm({ajax: '#data-ajax-url', trigger: 'div.modaltrigger'});
You said you want to change the url depending on ID, so I assume your links look like this
<div id="obj1" class="modaltrigger">foo</div>
<div id="obj2" class="modaltrigger">bar</div>
And you want jqModal to call urls like this
/myapp/objects/obj1
/myapp/objects/obj2
Then this code should work
//must run before first ajax call is made
$('div.modaltrigger').each(function(i, ele) {
ele.title = '/myapp/objects/'+this.id;
});
$('#popup').jqm({
ajax: '#title',
trigger: 'div.modaltrigger'
});
Related
i have one jsp page(addStep1.jsp) where i have lot of input fields and drop downs to get values from user.
among all the dropdowns i want to get value from one of the drop down whose id is svoAffectedSoftware.
<select id="svoAffectedSoftware" name="svoAffectedSoftware" class="form-control" >
Now, on the same page i want to include other jsp file for which i have uses below code (i have uses two approach to solve this but in both the cases i am not getting the desire output. the problem in first approach is i am not getting any error but my page doesn't comes up not even my addStep1.jsp where i have included this code and in the second approach it saying:: The method $(String) is undefined for the type
__2F_ssappmgr_2F_webapps_2F_sam_2F_apps_2F_itapp_2F_ticket_2F_addStep1_2E_jsp. )
approach 1
<%# include file="ticketResolutionChatBot.jsp?svoAffectedSoftware="svoAffectedSoftware %>
or
approach 2
<jsp:include page="ticketResolutionChatBot.jsp" >
<jsp:param name="svoAffectedSoftware" value="<%= $("#svoTicketState").val() %>"/>
</jsp:include>
can anyone tell me how do i pass parameter in the correct way also how to achieve this?
I would like to suggest you to use javascript for this purpose. With jQuery it is very easy to achieve your goal.
Include jQuery library in your jsp page
Example is here https://www.w3schools.com/jquery/jquery_get_started.asp
And here: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_lib_microsoft
Don't forget to use all your jquery code inside
$(document).ready(function(){
// your code for the page
});
use my example for you from fiddle
https://jsfiddle.net/u0frjksd/3/
This function subscribes to your select value and loads content page, based on the selection:
$(".form-control").on('change', function() {
var value = $(this).val();
$('.content').load(value);
});
Instead of first value you can provide your own value, I mean your href(in value) to the jsp page you want to include.
Your jsp page will be loaded to the div .
i have uses change() and ajax function here.
$('#svoAffectedSoftware').change(function() {
var form_data = {
svoAffectedSoftware: $("#svoAffectedSoftware").val()
};
$.ajax({
type: "GET",
cache: false,
url: "getNewPage.jsp",
data: form_data,
success: function(data){
$("#contentDiv").html(data);
}
});
});
where, url: "getNewPage.jsp"--> redirecting page,
var form_data = {svoAffectedSoftware: $("#svoAffectedSoftware").val()}; --> takes value for the new page which i was asking through parameter,
success: function(data){$("#messageDiv").html(data);} --> include the content of the resultant page into original page (addStep1.jsp) in the specified div.
I have an asp.net webform where I include the following script (on a separate .js file):
function pageLoad() {
var mpe = $find("mpeEmpresa");
mpe.add_shown(onShown);
$addHandler(document, "keydown", onKeyDown);
}
function onShown() {
var background = $find("mpeEmpresa")._backgroundElement;
background.onclick = function() {
$find("mpeEmpresa").hide();
}
}
Unfortunately, it won't work because asp.net 3.5 changes the elements id's. The only way I could get it to work is to use ctl00_ContentPlaceHolder1_empresaFilha_mpeEmpresa as the ID.
Sure I could use <%= mpeEmpresa.ClientID %> from the asp.net side, it would work but I'll have to pass that as a var to my external .js file and it's not exactly what I'm trying to accomplish.
I have searched on a few ways to select the element by it's ID name partially, but couldn't get any of them to work... Is there a guaranteed way?
I can see the JQuery tag on your question, so you can easily use this:
$('div[id*="mpeEmpresa"]')
As i know the ContentPlaceHolders are rendered as div.
Update:
If you need to select empresaFilha too so you can't use the above selector.
because $('div[id*="mpeEmpresa"]') select both of ctl00_ContentPlaceHolder1_empresaFilha and ctl00_ContentPlaceHolder1_empresaFilha_mpeEmpresa.
so you need to use this:
Select only mpeEmpresa:
$('div[id*="mpeEmpresa"]').css("background-color","blue");
Select only empresaFilha:
$('div[id*="mpeEmpresa"]').parent('div[id*="empresaFilha"]').css("background-color","red");
Or something like this, maybe this code isn't so optimized because i don't see your ASP code or rendered HTML so have to provide a general solution.
You can simply use this
var mpe=$('div[id$="mpeEmpresa"]');
or
var mpe=$find('div[id$="mpeEmpresa"]');
I have a Div of Class
<div class='navigation five-icons'></div>
and i want to load a URL which returns html inside it, how can i select that div with jquery,
what i have tried is
$('.navigation .five-icons').load('URL');
$('.navigation.five-icons').load('http://www.astuffaday.com/shot/menu.php');
but no use.
I dont know about loading but you can use below code to select more than one class
$('.navigation, .five-icons')
Are you trying to get the data asynchronously?
Use $.post() or $.get()
$.post('filename.php', {'name1':'value1', 'name2':'value2'}, function(result) {
alert(result); // result has the HTML content returned by filename.php
$('#resultDiv').html(result); // resultDiv will have its contents
// Now you need to get only particular div
// You can use 'find()'
// Something like this may help [Have not been tested]
var data = $('result').find('.navigation .five-icons');
alert(data);
})
References
$.ajax()
$.post()
$.get()
$.load()
.find()
I want to perform some logic in JavaScript when users click on the span element and update current XML instance from jQuery:
(I have seen 2 similar questions online but they never got answered!)
XForms:
<xhtml:span class="buttonPlusOne" id="plusVat">+</xhtml:span>
<xf:output ref="instance('submitted_instance')/TotVATAmnt"></xf:output>
<xf:input id="changeVatTotal" ref="instance('submitted_instance')/TotVATAmnt"></xf:input>
JavaScript:
$('span.buttonPlusOne').on('click', function () {
// do some logic and increment value for 0.01
orbeonElId = $(this).siblings('#changeVatTotal').children('input').attr('id');
// alert(orbeonElId) produces right id (changeVatTotal$xforms-input-1)
// alert(newValue) produces 0.02 (for example)
ORBEON.xforms.Document.setValue(orbeonElId, newValue);
});
I can see Orbeon posting data (Firebug), but the XML Instance does not get updated (input does not update the output - even though they share same "ref" attribute).
I suppose that you're mixing up the html element's id with the XForms id (id attribute) of the xf:input element.
The Orbeon documentation shows an example: the id to use in the ORBEON.xforms.Document.setValue() function call is the id of the (server-side) XForms element. So in your example it's changeVatTotal, and not the id of the (client-side) html input element changeVatTotal$xforms-input-1. This is why there's a request showing up in firebug with no effect on the XForms instance: the server-side XForms engine doesn't find a xf:input element with the id changeVatTotal$xforms-input-1, so it doesn't know what to do with that request.
This means, too, that you (usually) don't need to compute the id of the target element, instead you can just use the "plain" XForms id attribute value of the xf:input.
Alternatively:
Is it possible to handle the "plus" button completely in XForms? You could use a xforms:trigger control and include a xforms:setvalue action on the DOMActivate event:
<xf:trigger>
<xf:label>+</xf:label>
<xf:setvalue
ev:event="DOMActivate"
ref="instance('submitted_instance')/TotVATAmnt"
value="0.01 + instance('submitted_instance')/TotVATAmnt" />
<.... more actions ...>
</xf:trigger>
I think this solution would be more stable than doing some of the work client-side and some server-side.
On my blog I have a lot of <pre> blocks containing code snippets.
What I want to do is add a .click() handler to all the <pre> elements on the page which will send its content to another page - let's call it viewcode.php - via POST.
I know how to send information to this page using $.ajax, I'm just not sure how to send the information and navigate to the page.
The idea is that visitors can click a <pre> which will navigate to another page containing the code on its own for readability and easy copy / paste.
I have a feeling the solution is dead simple and probably obvious, I just can't think of it.
Not sure I would handle it this way, probably I would simply pop up a dialog with the code rather than leave the page, but you could handle this by building a form using javascript then triggering a submit on that form instead of using AJAX.
Using dialogs with jQuery UI:
$('pre').on('click', function() {
$('<div title="Code Preview"><p>' + $(this).text() + '</p></div>').dialog({
... set up dialog parameters ...
});
});
Build a form
$('pre').on('click', function() {
var text = $(this).text();
$('<form class="hidden-form" action="something.php" method="post" style="display: none;"><textarea name="code"></textarea></form>')
.appendTo('body');
$('[name="code"]').val(text);
$('.hidden-form').submit();
});
You could use a hidden <form> element. Then set the onclick() attribute of the <pre> to copy the value from the <pre> to the form. Optionally, you can set the action attribute to select the page you'd like to post the information to. Finally, submit that form.
I know it's not elegant, but it'll work.
If your code snippets are stored somewhere in a database or files, I suggest you just link the snippets to a page where you get the snippet based on some identifier.
If the snippets are only contained in your html, and you just want to display them in a cleaner way, you shouldn't need any ajax posting. You might want to Use a hover div or a jquery plugin, that pop's up and shows a cleaner piece of code obtained from the pre element, something like:
$('pre').click(function() {
var code = $(this).html(); //this is the pre contents you want to send
$('#hoverDiv').html(code).show();
});
Yes, you have to create a form and submit it. You can do all sorts of things with ajax posts/gets but the only way to navigate to a post result is via an actual form post. Here is concise version of it:
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();
My code does this:
// Navigate to Post Response, Convert first form values to query string params:
// Put the things that are too long (could exceed query string limit) into post values
var form = $('#myForm');
var actionWithoutQueryString = form[0].action.split("?")[0];
var action = actionWithoutQueryString + '?' + $.param(form.serializeArray());
var html = myArray.map(function(v, i) { return "<input name='MyList[" + i + "]' value='" + v + "'/>"; }).join("\n");
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();